.nav-underline jumps when navigating - Githubissues

twbs / bootstrap

The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.

https://getbootstrap.com

MIT License

170.99k stars 78.9k forks source link

.nav-underline jumps when navigating #41062

Open xvaara opened 4 days ago

xvaara commented 4 days ago

Prerequisites

[X] I have searched for duplicate or closed issues
[X] I have validated any HTML to avoid common problems
[X] I have read the contributing guidelines

Describe the issue

.nav-underline .active has font-weight: 700; which causes the navigation to jump around when swiching active

Reduced test cases

https://stackblitz.com/edit/rd28tu?file=index.html

What operating system(s) are you seeing the problem on?

Windows, macOS, Android, iOS, Linux

What browser(s) are you seeing the problem on?

Chrome, Safari, Firefox, Microsoft Edge, Opera

What version of Bootstrap are you using?

5.3.3

antoinevilain001 commented 4 days ago

Hi, gave this a quick shot and it does seem like removing the font-weight on active makes it look a lot worse (active link does not really stand out with just the underline and colour change). I would imagine that to fix this problem we would want navbar item spacing to be done in such a way that bolding one element keeps the spacing of the others constant, which seems like a slightly more involved change.