WordPress adds CSS to custom menu items?

Community Forums › Forums › Design Tips and Tricks › WordPress adds CSS to custom menu items?

This topic is: resolved

Tagged: ,

This topic contains 37 replies, has 5 voices, and was last updated by  susanlangenes 3 months, 1 week ago.

Viewing 8 posts - 31 through 38 (of 38 total)
1 2 3
  • Author
    Posts
  • February 7, 2013 at 12:56 am #18587

    susanlangenes
    Participant
    Post count: 28

    Hey Daniel,  like SoZo said your problem is in the hover.

    On line 375 in your stylesheet you have this stuff:

    .menu-primary li a:active, .menu-primary li a:hover, .menu-primary .current_page_item a, .menu-primary .current-cat a, .menu-primary .current-menu-item a, .menu-secondary li a:active, .menu-secondary li a:hover, .menu-secondary .current_page_item a, .menu-secondary .current-cat a, .menu-secondary .current-menu-item a, #header .menu li a:active, #header .menu li a:hover, #header .menu .current_page_item a, #header .menu .current-cat a, #header .menu .current-menu-item a {

    background: url(images/nav-link.png) top center no-repeat;
    color: white !important;

    So what you need to do is get rid of that background image for your twitter nav menu item.  I would start with something like this:

    .menu li.menu-twitter a:hover { background: none; }

    or similar.

    I noticed you have these things roughly at line 311:

    .menu li.menu-twitter a:hover,
    .menu li.menu-facebook a:hover {
    }

    If you try to apply style rules there, they’ll get overridden by the stuff at line 375.  So make sure you put the a:hover rules AFTER the stuff at line 375.

    Let us know how it goes.  :)

    February 7, 2013 at 4:31 pm #18765

    daniel123
    Participant
    Post count: 52

    Thanks alot everyone. I followed Joel’s steps and everything is looking good. One issue: how would I go about removing or overriding the default hover rule when hovering over the twitter/facebook icons?

    February 8, 2013 at 7:59 am #18919

    daniel123
    Participant
    Post count: 52

    Anyone ?

    February 8, 2013 at 1:40 pm #19020

    susanlangenes
    Participant
    Post count: 28

    Put

    .menu li.menu-twitter a:hover { background: none; }

    anywhere AFTER line 375 in your stylesheet.

     

    February 8, 2013 at 4:59 pm #19110

    daniel123
    Participant
    Post count: 52

    Thanks Susan, how do I go about removing the white triangle when I hover over the icons though?

    February 8, 2013 at 7:00 pm #19129

    susanlangenes
    Participant
    Post count: 28

    Daniel, if you put

    .menu li.menu-twitter a:hover { background: none; }

    anywhere AFTER line 375 in your stylesheet, that triangle will go away.  Seriously.

    You will likely also want to add the following:

    .menu li.menu-twitter a:active, .menu li.menu-facebook a:hover, .menu li.menu-facebook a:active {background:none; }

    February 8, 2013 at 8:52 pm #19144

    daniel123
    Participant
    Post count: 52

    Thanks TONS!

    February 8, 2013 at 8:58 pm #19145

    susanlangenes
    Participant
    Post count: 28

    No problem. Hey, you got the RSS icon on there too!  Nice work!  :)

  • Author
    Posts
Viewing 8 posts - 31 through 38 (of 38 total)
1 2 3

The topic ‘WordPress adds CSS to custom menu items?’ is closed to new replies.