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 15 posts - 1 through 15 (of 38 total)
1 2 3
  • Author
    Posts
  • January 28, 2013 at 7:04 pm #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 3 months, 3 weeks ago by  daniel123.
    • This topic was modified 3 months, 3 weeks ago by  SoZo. Reason: Making the multiverse more easily navigable for end users everywhere
    • This topic was modified 3 months, 3 weeks ago by  daniel123.
    • This topic was modified 3 months, 3 weeks ago by  SoZo. Reason: Making the multiverse more easily navigable for end users everywhere
    January 28, 2013 at 7:10 pm #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

    January 28, 2013 at 7:14 pm #15839

    daniel123
    Participant
    Post count: 52

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

    January 28, 2013 at 7:18 pm #15842

    SoZo
    Moderator
    Post count: 1573

    What do you want to override?

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

    January 28, 2013 at 7:59 pm #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?

     

     

    January 28, 2013 at 8:09 pm #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

    January 28, 2013 at 8:17 pm #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.

    January 28, 2013 at 8:57 pm #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

    January 28, 2013 at 9:38 pm #15877

    daniel123
    Participant
    Post count: 52

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

    January 28, 2013 at 10:25 pm #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

    January 30, 2013 at 7:49 pm #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.

    January 30, 2013 at 8:00 pm #16613

    daniel123
    Participant
    Post count: 52

    Sorry I meant no* hover effects

    January 30, 2013 at 8:08 pm #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

    January 30, 2013 at 8:10 pm #16617

    daniel123
    Participant
    Post count: 52

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

    January 30, 2013 at 8:12 pm #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

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

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