WordPress adds CSS to custom menu items?

[daniel123]

Any help?

[daniel123]

John, any help here? Thanks.

[daniel123]

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

[daniel123]

Can anyone help?

[daniel123]

Sozo would you mind checking my problem out?

[daniel123]

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.

[daniel123]

Can anyone help me? Support is lacking..

[daniel123]

SOMEONE HELP ME!

[Ozzy]

hi daniel,

in your css, find

.menu-twitter a {

and remove everything in that rule.

find

.menu li.facebook {

and remove everything in that rule.

add the following to your css:

.menu li.menu-twitter {
	background: url("http://uberblogging.com/wp-content/uploads/2013/01/social_twitter_box_blue_128-e1359321440170.png") 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") no-repeat left center transparent;
	margin-left: -15px;
	text-indent: -9999px;
	width: 40px;
}

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

---

Ozzy Rodriguez | Twitter | Google+

[joelmoney]

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.

[susanlangenes]

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.  🙂

[daniel123]

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?

[daniel123]

Anyone ?

[susanlangenes]

Put

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

anywhere AFTER line 375 in your stylesheet.

 

[daniel123]

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

[susanlangenes]

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; }

[daniel123]

Thanks TONS!

[susanlangenes]

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

[Author]

Posts