WordPress adds CSS to custom menu items?

[daniel123]

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

[SoZo]

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

[daniel123]

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

[SoZo]

What do you want to override?

---

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

[daniel123]

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?

 

 

[SoZo]

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

---

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

[daniel123]

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.

[SoZo]

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

---

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

[daniel123]

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

[SoZo]

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

[daniel123]

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.

[daniel123]

Sorry I meant no* hover effects

[SoZo]

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

[daniel123]

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

[SoZo]

Yes, I cleared my cache.

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

---

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

[daniel123]

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

[SoZo]

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

[daniel123]

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?

[SoZo]

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

[daniel123]

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.

[Author]

Posts