LionWaffles LionWaffles - 1 month ago 4
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%;
and
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: http://output.jsbin.com/mumuna. Source code: https://github.com/CSGOFlair/dev

Answer

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 https://github.com/CSGOFlair/dev/blob/gh-pages/css/stylesheet.css to

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