How do I get rid of Hover "shrink"?

In the past, I’ve used template Nav and none are doing what I need, so I’m trying to create my own. I dropped the Nav component in and was able to change the color and the hover color. I’ve also changed the active color, but active is not working (that will be another post if I don’t figure it out soon).

When I view the Navigation, the Nav Items all changed to the correct color when I hover over them, but the text “shrinks” due to what looks like the margins coming in around it. Is this a feature I can turn off? I’ve scoured the Appearance and Options panels, and can’t find anything that works. I’ve also tried some CSS (including no text decoration), but no luck. Since this Navbar is built from Bootstrap Studio components, my guess is that this is a bootstrap CSS default I don’t know how to find and change? Any help would be greatly appreciated!


There’s nothing in the standard Bootstrap CSS that would cause this behavior. It sounds like you may have changed some of the margin/padding settings to the nav items in their “un-hovered” state that are reverting to the standard margins/paddings when you hover over them.

If you’re making changes to components via the appearance panel, they are being added as inline CSS, so there’s no simple way to diagnose this without seeing your actual website. This is why inline CSS is to be avoided when developing a website. Unless you’re using Bootstrap’s utility classes, all the changes you make to the appearance of elements should be done by adding the inline CSS that is generated when you change things through the appearance panel to an external CSS file (like styles.css) or writing your classes and rules directly in an external CSS file. Then you can easily disable individual rules (or the entire CSS file) to diagnose issues like this. This can be a little confusing/daunting for a beginner that is not familiar with how CSS works.

When you want to make changes to the stock look and feel of Bootstrap components, you really need to have a pretty good understanding of CSS. Just changing things haphazardly can mess with the cascade, and create all kinds of unexpected behaviors.

If you post a link to your live website, someone here can look at the code and probably tell you quickly what’s causing your issue.

I am so sorry for being so late to thank you for your reply. I thought I had notifications on, and didn’t. I did resolve this. Because of what the designer wanted, the hamburger/break wouldn’t work, so I had to do a version of the navbar that didn’t use the toggler. However, I didn’t think about the right commands in Bootstrap Studio having a break set, so when I would expand the drop menu on smaller screens, it would break and that’s what was causing the “shrink” and push down of all the other menu items. Finding that and resetting it solved the problem. Again, thank you for your answer! Tami