Support » Themes and Templates » Nav Help: image for first level, text for second level

  • I have been trying several ways to have a first level of navigation using images (with rollovers using CSS) and a second level of dropdown menus using the text.

    Currently I have the first level nav with the images hiding the text with a span class that is set to display: none; in the css.

    Can anyone help with this?

    View site here:
    http://pennsylvaniacrafts.com

    The second level is showing up with the first level’s image, confusing me even me further.

Viewing 4 replies - 1 through 4 (of 4 total)
  • esmi

    (@esmi)


    Forum Moderator


    Don’t hide navigation link text using display:none. You’re effectively hiding your top level navigation from a whole range of non-graphical user agents – including Google. Use a negative text indent or negative absolute positioning instead.

    You’ll may then need to reset the styling for the second level links.

    Good point. I read that this way allowed the search engines to find it, but it didn’t make sense to me either.

    The child page is still showing the parent page image as it’s hover state.

    esmi

    (@esmi)


    Forum Moderator


    You need to reset the styling for the second level :hover status.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Nav Help: image for first level, text for second level’ is closed to new replies.