CODEWITHSUNDEEP
htmlcsshyperlinkmenuicons
Illus1on
Illus1on

Reputation: 11

Icons next to menu link CSS

Hey i'm having a bit or trouble with having icons next to a link So first of all I can't find where I can move the text so that the icon is show properly and not being under the text. Second is that when you hover the text, the icon disapears.

I made a script so you can look at it https://jsfiddle.net/8nxrwbog/

Thanks for the help !

Upvotes: 0

Views: 2562

Answers (6)

Farrukh Afzaal Kurd
Farrukh Afzaal Kurd

Reputation: 44

Use the following code for css

#menu-bar {
  width: 100%;
  line-height: 40px;
  position:relative;
  z-index:999;
}
#menu-bar li {
  background-color:black;
  float: left;
  position: relative;
  list-style: none;
  /*padding-left:5px;
  padding-right:5px;*/
}
#menu-bar a {
  font-weight: bold;
  font-family: arial;
  font-style: normal;
  font-size: 12px;
  color: #E7E5E5;
  text-decoration: none;
  display: block;
  padding: 6px 10px 4px 25px;
  margin: 0;
}
#menu-bar li ul li a {
  margin: 0;
}
#menu-bar li:hover > a {
    background-color: #0083c2;
    transition-delay: .1s;
    transition-duration: .8s;
}
#menu-bar .nav-button-home a { 
background:url("http://overnine.servergamers.net/3/images/icons/home20x20.png") no-repeat 0 13px; 
}

Use this code for your html

<ul id="menu-bar">
 <li class="nav-button-home"><a href="#">Home</a></li>
 <li class="nav-button-home"><a href="#">Teams</a>
 <li class="nav-button-home"><a href="#">Sponsors</a></li>
 <li class="nav-button-home"><a href="#">WebTV</a></li>
 <li class="nav-button-home"><a href="#">Contact</a></li>
</ul>

Upvotes: 0

miftari0
miftari0

Reputation: 3

You added icon as a background try adding it by tag

it should work:

<ul id="menu-bar">
                 <li class="nav-button-home"><a href="#"><img class="img" src="http://overnine.servergamers.net/3/images/icons/home20x20.png" /><em class="test">Home</em></a></li>
                 <li class="nav-button-home"><a href="#">Teams</a>
                 <li class="nav-button-home"><a href="#">Sponsors</a></li>
                 <li class="nav-button-home"><a href="#">WebTV</a></li>
                 <li class="nav-button-home"><a href="#">Contact</a></li>
                </ul>

and CSS:

#menu-bar {
  width: 100%;
  line-height: 40px;
  position:relative;
  z-index:999;
}
#menu-bar li {
  background-color:black;
  float: left;
  position: relative;
  list-style: none;
}
#menu-bar a {
  font-weight: bold;
  font-family: arial;
  font-style: normal;
  font-size: 12px;
  color: #E7E5E5;
  text-decoration: none;
  display: block;
  padding: 6px 10px 4px 10px;
  margin: 0;
}
#menu-bar li ul li a {
  margin: 0;
}
#menu-bar li:hover .img {
  visibility: hidden;
}
#menu-bar .nav-button-home a { 
  padding: 10px;

}
.test {
  padding: 5px 10px;

}

You can adjust padding ;)

Upvotes: 0

NR-NL
NR-NL

Reputation: 31

#menu-bar {
  width: 100%;
  line-height: 40px;
  position:relative;
  z-index:999;
}
#menu-bar li {
  background-color:black;
  float: left;
  position: relative;
  list-style: none;
}
#menu-bar a {
  font-weight: bold;
  font-family: arial;
  font-style: normal;
  font-size: 12px;
  color: #E7E5E5;
  text-decoration: none;
  display: block;
  padding: 6px 10px 4px 10px;
  margin: 0;
}
#menu-bar li ul li a {
  margin: 0;
}
#menu-bar li:hover > a {
	background-color: #0083c2;
    transition-delay: .1s;
	transition-duration: .8s;
}
#menu-bar .nav-button-home a { 
background:url("http://overnine.servergamers.net/3/images/icons/home20x20.png") no-repeat 0 13px;  padding-left: 22px
}
<ul id="menu-bar">
   <li class="nav-button-home"><a href="#">Home</a></li>
   <li class="nav-button-home"><a href="#">Teams</a>
   <li class="nav-button-home"><a href="#">Sponsors</a></li>
   <li class="nav-button-home"><a href="#">WebTV</a></li>
   <li class="nav-button-home"><a href="#">Contact</a></li>
</ul>

For moving the text next to your icon, you can set a padding-left for #menu-bar .nav-button-home a

For example: padding-left: 22px;

The icon disappears because you change the complete background to a color. To only change the color of your background you must change 'background' into 'background-color' in #menu-bar li:hover > a.-c

Upvotes: 2

Lunafairy783
Lunafairy783

Reputation: 3

If you increase the padding left that should fix the visibility problem when the list item is not hovered over. A suggestion I give out is using Font Awesome instead of images, you can manipulate it like text however it is an icon. To check it out go here and it gives you all the information you need: http://fontawesome.io/.

Upvotes: 0

Johann Kratzik
Johann Kratzik

Reputation: 794

You need to increase the left padding for the links and for :hover only define the background-color: Fiddle.

Also I added more spacing on both sides of the links, maybe looks better for you.

#menu-bar a {
   font-weight: bold;
   font-family: arial;
   font-style: normal;
   font-size: 12px;
   color: #E7E5E5;
   text-decoration: none;
   display: block;
   padding: 6px 20px 4px 35px;
   margin: 0;
}
#menu-bar li:hover > a {
    background-color: #0083c2;
    transition-delay: .1s;
    transition-duration: .8s;
}

Upvotes: 0

sol
sol

Reputation: 22919

You need to add padding to your links, something like this:

#menu-bar .nav-button-home a { 
    background:url("http://overnine.servergamers.net/3/images/icons/home20x20.png") no-repeat 0 13px;
    padding: 0 40px 0 25px;
    }

Your hover effect is overriding the background image. You can ensure the image stays there by adding it to the hover effect, like this:

#menu-bar li:hover > a {
    background-color: #0083c2;
    background-image:url("http://overnine.servergamers.net/3/images/icons/home20x20.png") no-repeat 0 13px;
    transition-delay: .1s;
    transition-duration: .8s;
}

Fiddle: https://jsfiddle.net/xxx90hva

Upvotes: 0

Related Questions