LionWaffles LionWaffles - 3 months ago 20
CSS Question

Bootstrap Navbar Expanding on Hover

So I just updated the navbar of a project I'm working on to a Bootstrap navbar. I have modified the Bootstrap a tiny bit. The problem seemed to happen when I added

width: 80%;
margin-left: 20%;
to make the navbar span the whole page and have on the very left the "brand". You can see the problem here: Source code:


It is because you are adding margin to anchor tag on hover.

So, change:

li a:hover {
    background-color: #00a8a8;
    margin: 25px 10px;

on line 47 in to

li a:hover {
    background-color: #00a8a8;
    margin: 0px;