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

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

Viewing 15 posts - 16 through 30 (of 38 total)
  • Author
    Posts
  • #16624

    daniel123
    Participant
    Post count: 52

    Yes we are. I just tried a proxy and it still works perfectly. Not sure what’s wrong..

    #16628

    SoZo
    Moderator
    Post count: 1573

    Ok, it’s back now.

    You need to define a hover rule and you can push them down with top margin.

    Wait, now I’m getting a 404 again.


    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

    #16642

    daniel123
    Participant
    Post count: 52

    I googled and couldn’t find anything on a hover rule, could you give me an example?

    Is it not working at all for you now?

    #16647

    SoZo
    Moderator
    Post count: 1573

    Hover is a pseudo class. You need to add a new rule for the hover state, e.g. .menu li.menu-twitter a:hover that overrides any of the properties from the default hover .menu-primary li a:hover that you don’t want. If you want both social items to have the same hover effect then you can group your selectors, e.g.

    .menu li.menu-twitter a:hover,
    .menu li.menu-facebook a:hover {
    padding: 10px;
    }

    And it seems to load if I stay away for awhile but if I refresh then I get a 404. It loaded the site when I checked just now to get the rule you are using but I refreshed and now get a 404.


    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

    #17360

    daniel123
    Participant
    Post count: 52

    Ok, I do not know how to fix this though. when hovering over it moves, how do I prevent this? I am confused. I’m pretty familiar with CSS just not sure about this.. Thanks.

    #17456

    daniel123
    Participant
    Post count: 52

    Any help?

    #17494

    daniel123
    Participant
    Post count: 52

    John, any help here? Thanks.

    #17617

    daniel123
    Participant
    Post count: 52

    I’ve tried and tried and cannot this to work.

    #18077

    daniel123
    Participant
    Post count: 52

    Can anyone help?

    #18117

    daniel123
    Participant
    Post count: 52

    Sozo would you mind checking my problem out?

    #18321

    daniel123
    Participant
    Post count: 52

    If anyone can help me with my blog: UberBlogging.com

    I am trying to keep these nav icons from moving everytime I hover over them and position them correctly. Don’t tell me what to do because I do not understand. Show me an example or even better, the code needed to fix this.

    #18343

    daniel123
    Participant
    Post count: 52

    Can anyone help me? Support is lacking..

    #18554

    daniel123
    Participant
    Post count: 52

    SOMEONE HELP ME!

    #18576

    Ozzy
    Participant
    Post count: 211

    hi daniel,

    in your css, find [css].menu-twitter a {[/css] and remove everything in that rule.

    find [css].menu li.facebook {[/css] and remove everything in that rule.

    add the following to your css:
    [css]
    .menu li.menu-twitter {
    background: url("http://uberblogging.com/wp-content/uploads/2013/01/social_twitter_box_blue_128-e1359321440170.png&quot ;) no-repeat left center transparent;
    margin-left: 70px;
    padding-right: 10px;
    text-indent: -9999px;
    width: 40px;
    }

    .menu li.menu-facebook {
    background: url("http://uberblogging.com/wp-content/uploads/2013/01/social_facebook_box_blue_128-e1359322484918.png&quot ;) no-repeat left center transparent;
    margin-left: -15px;
    text-indent: -9999px;
    width: 40px;
    }[/css]

    i think that should fix the issue you’re having.


    #18580

    joelmoney
    Participant
    Post count: 2

    Daniel-

    What is your goal for this?  Meaning..what should it look like when complete?

    Is the Facebook logo working as you want it?

    If so..add your background image positioning call the same way as you are for the Facebook one.

    Currently you are calling twitter via the anchor tag ( <a> ) and facebook on the <li>

    .menu-twitter a {
    text-indent: -9999px;
    background-image:url(http://uberblogging.com/wp-content/uploads/2013/01/social_twitter_box_blue_128-e1359321440170.png) !important;
    background-repeat: no-repeat !important;
    margin-left: 70px !important;
    width: 30px;

    }
    -VS-
    .menu li.menu-facebook {
    text-indent: -9999px;
    background-image:url(http://uberblogging.com/wp-content/uploads/2013/01/social_facebook_box_blue_128-e1359322484918.png) !important;
    background-repeat: no-repeat !important;
    margin-left: -15px !important;
    width: 30px;
    }

    IF so…you can try just removing the above twitter style and adding this:
    .menu li.menu-twitter {
    text-indent: -9999px;
    background-image:url(http://uberblogging.com/wp-content/uploads/2013/01/social_twitter_box_blue_128-e1359321440170.png) !important;
    background-repeat: no-repeat !important;
    margin-left: -15px !important;
    width: 30px;
    }
    and you should be pretty close to what you are looking for.

Viewing 15 posts - 16 through 30 (of 38 total)

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