Stylizing navigation links

  • ggordon

    (@ggordon)


    15 years, 9 months ago

    Hi, having a bit of a problem giving links in the dynamic menus a better look. I’d like to give each link a background image, and a :hover with background position. Problem is that when I do that, I don’t know how to stylize only the text of the link. For example i would like to be able to move the link text into the center of an image keeping the image as the actual link. As of right now I am stylizing with ul li a, and giving it a display:block quality. This gets the image working as the link, but when I do this, the text I would like in the center, remains in the upper left corner of each navigation link. Is there any way to directly target the link text in wp_nav_menu if i do this?

    The site is not live, but wbgufm.com has a similar problem, in that I had to apply the style to the list instead, but by doing so the link only works if you scroll over the link text.

    Thanks and I hope I explained the problem well enough.

Viewing 1 replies (of 1 total)
  • Jeff Behnke

    (@topdown)

    15 years, 9 months ago

    Did you try chaining your CSS

    #nav li a {color: red;}
    #nav li a:hover {color: blue;}

    Start with the parent and make sure the CSS is all using the same parent so it is not over written elsewhere.

    If you need to add special id’s or classes to each item you will have to add a filter to the menus, do it manually in the Menu Admin, or use jQuery or other javascript to add them.

Viewing 1 replies (of 1 total)

The topic ‘Stylizing navigation links’ is closed to new replies.