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, 9 months ago.

Viewing 15 posts - 1 through 15 (of 38 total)
  • Author
    Posts
  • #15833

    daniel123
    Participant
    Post count: 52

    I found this guide showing me how to add social media icons to the navigation menu. You create the css selectors in the style.css file and make the background your social image (like facebook).

    The problem is, if I specify a class such as .twitter-menu, it WILL add it to the twitter menu item, however it adds all these other classes which I don’t want.

    So how do I go about removing these unnecessary classes? Right now the “twitter”  icon appears as a page, which I DON’T want.

    Thanks, blog: http://UberBlogging.com

    • This topic was modified 1 year, 9 months ago by  daniel123.
    • This topic was modified 1 year, 9 months ago by  SoZo. Reason: Making the multiverse more easily navigable for end users everywhere
    • This topic was modified 1 year, 9 months ago by  daniel123.
    • This topic was modified 1 year, 9 months ago by  SoZo. Reason: Making the multiverse more easily navigable for end users everywhere
    #15837

    SoZo
    Moderator
    Post count: 1573

    You override any styles you don’t want by adding them to the .twitter-menu rule


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

    #15839

    daniel123
    Participant
    Post count: 52

    I’m confused by that. Can you give an example? Thanks.

    #15842

    SoZo
    Moderator
    Post count: 1573

    What do you want to override?


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

    #15852

    daniel123
    Participant
    Post count: 52

    This is the CSS for the twitter icon I want to add as a link

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

     

    Then I added the CSS Class menu-twitter to the link. It doesn’t work, the attribute I want is menu-twitter but it adds the following to it - menu-twitter menu-item menu-item-type-custom menu-item-object-custom menu-item-189 . Why does it do this?

     

     

    #15855

    SoZo
    Moderator
    Post count: 1573

    The selector needs to be .menu li.menu-twitter a


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

    #15857

    daniel123
    Participant
    Post count: 52

    I updated the css to that

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

    It doesn’t seem to work though.

    #15864

    SoZo
    Moderator
    Post count: 1573

    I’m not seeing that selector anywhere in your active style sheet


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

    #15877

    daniel123
    Participant
    Post count: 52

    Can you see it there now? If not, what am I doing wrong?

    #15889

    SoZo
    Moderator
    Post count: 1573

    No, there is no instance of “li.menu-twitter a” in your style sheet. Make sure you are editing the correct one.

    You’re style sheet actually looks pretty messed up. You’ve got a php function in there at the bottom “add_theme_support( ‘post-thumbnails’ );”

    I suggest reinstalling the style sheet


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

    #16611

    daniel123
    Participant
    Post count: 52

    My CSS is now cleaned up. I found out the issue with the li.meu-twitter a not showing up had to do with cloudflare so I disabled it for the time being.

    So for now, I added 2 icons, twitter and facebook but have some issues with them. I need them both to be lower in the menu and now hover effects.

    Thanks for the help.

    #16613

    daniel123
    Participant
    Post count: 52

    Sorry I meant no* hover effects

    #16616

    SoZo
    Moderator
    Post count: 1573

    I get a 404 when visiting your site now

    404. That’s an error.

    The requested URL / was not found on this server. That’s all we know.


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

    #16617

    daniel123
    Participant
    Post count: 52

    Did you clear your cache? Working fine with different browsers and devices here.

    #16620

    SoZo
    Moderator
    Post count: 1573

    Yes, I cleared my cache.

    We’re still talking about http://uberblogging.com/ correct?


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

Viewing 15 posts - 1 through 15 (of 38 total)

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