d4ne d4ne - 6 months ago 15
PHP Question

CSS hover no text margin/padding

I added a hover effect to a navigation, sadly the hover is also effecting the text on it. How could i add a hover to the navigation without effecting the text position?

I can't find a way around this sadly.

Html template: http://projects.helpful.ninja/BlackzDesignz/Template_example/

CSS file: http://projects.helpful.ninja/BlackzDesignz/Template_example/assets/css/style.css

CSS code related to navbar:

ul{
margin: 0px;
padding: 0px;
}

li{
list-style: none;
}

.navbar_item{
font-family: Calibri;
font-size: 15px;
color: #fff;
text-align: center;
width:10%;
}

.navbar_item:hover{
color: #1a1a1a;
cursor: pointer;
background-image: url("../images/navbar_hover.png");
background-repeat: repeat-x;
font-weight: bold;
margin-top: 3px;
}

#navbar_home{
width: 100px;
height: 40px;
line-height: 40px;
background-color: #ffed00;
text-align: center;
margin-left: 10px;
font-family: Calibri;
font-weight: bolder;
font-size: 14px;
color: #212121;
}


Does anyone have a idea?

Answer

Your problem lies in this css class, you should remove

 margin-top: 3px; 

.navbar_item:hover{
 color: #1a1a1a;
 cursor: pointer;
 background-image: url("../images/navbar_hover.png");
 background-repeat: repeat-x;
 font-weight: bold;
! margin-top: 3px; ! //remove this line

}

now offcourse with every hover it will margin the text with 3px. If you remove this it will be solved