Text indent on hover

[jknetdesign]

How can I keep the links hidden until you hover over the 5 icons on the upper left?

Here’s what I have:

#mainNav ul a {
  height: 60px;
  right: 0;
  text-indent: -9999px;
  width: 60px;
}

I tried to set the text-indent to initial on #mainNav ul a:hover

I need to be able to position the links under the icons.

[jknetdesign]

Yes, here’s the link http://fljconst.com/

[jknetdesign]

Bear with me I’m not used to CodePen but I added the HTML http://codepen.io/JKNetDesign/pen/KdMyMO

Since it’s WordPress there’s parent styles that don’t apply here.

I added absolute links to the sprites so they’ll display.

I added padding-top:60px to #mainNav li and they repeated even though I have no-repeat.

I want to try to help you help me.

[bearhead]

Is this the behavior looking for?

http://codepen.io/kvana/pen/qONxRB

This is the css I used to position the link text and make it show on hover:

.sf-menu li{
padding-bottom:1.5em;
}
.sf-menu li a{
  display:none;
  position:absolute;
}
.sf-menu li:hover a{
  display:block;
}

I also had to change your html structure a bit. The icon background is now applied to a div within the li, instead of the li itself. Then in your css, I had to change the hover selector to li:hover .icon-inf

[jknetdesign]

How do I change the HTML is this the PHP I have?

<div id="mainNav" class="clearfix">                         
<?php wp_nav_menu( array('menu_class' => 'sf-menu', 'theme_location' => 'main', 'fallback_cb' => 'default_nav' )); ?>           
</div>

[jknetdesign]

@bearhead

How do you suppose I change the HTML structure you have if I have this PHP snippet?

<div id="mainNav" class="clearfix">                         
<?php wp_nav_menu( array('menu_class' => 'sf-menu', 'theme_location' => 'main', 'fallback_cb' => 'default_nav' )); ?>           
</div>

[Author]

Posts