WordPress TwentyTwelve Custom Menu current-menu-item styling

0
votes
  1. I'm trying to style a custom menu in the sidebar of a child theme of WordPress' TwentyTwelve theme.
  2. I'm trying to give a current menu item a grey background.
  3. Unfortunately the "parent" menu item somehow gives the background-color to an area much wider than only the current li menu item.

I'm now using this css code:

.current-menu-item {background-color:#666!important;color:#ff0000!important;font-weight:bold;}
.menu li:not(.current-menu-item) {color:#fff!important;background-color:#333!important;}

To give an example/show what I mean: I'm trying to accomplish it on http://populair.eu, you see on the front page that the menu item "populair" also give a grey background around the image above. The sub menu items are ok.

the weird thing is that it runs ok on my localhost.

I have the feeling that if there would be a < br /> between the < asides> it would be solved but somehow im probably missing something.

Has anyone experience with this? / How it should be styled?

2
csswordpressmenuitem
You have to use ".current-menu-item a" to give the background to the anchor link, not to the list item. - rafaelbiten
@7th ach.. yes that was it! (need to wait 6 minutes to accept answer) - edelwater
Ok, you could also make some "clean up" on your code... Just inside your ".menu li a" you have two or three rules that you're not really using: "align: right" is one of them. "list-style-type: none;" shouldn't even be there, since it's an anchor link, not a "list". - rafaelbiten
You might also consider adding a hover rule current-menu-item a:hover so the text is not lost when the mouse hovers on top of the selected item. - gSaenz

2 Answers

1
votes

You have to use ".current-menu-item a" to give the background to the anchor link, not to the list item. Also, on your ".menu li a" you may have to "display: block" and "clear: both;". The bigger area is a floating problem.

0
votes

The best thing for you to do is use either Google Chrome's inspect element software or use Firefox's firebug and select the item, while using either of these you can change the CSS code live. This means that while you are looking at the bit you want to change you can change the code and it will reflect in a way you can see it, you will however need to make these changes in your style.css file on your child theme.

Take a look at the menu that is currently on my website www.driftedmass.co.uk, if that is the kind of thing you are looking for then get in touch with me via the contact form on my site.

If you are wanting to bring down the size of the menu you might need to do something like this (were the <<<< that is the bit you need):

.main-navigation ul.nav-menu,
    .main-navigation div.nav-menu > ul {
        border-bottom: 1px solid #ededed;
        border-top: 1px solid #ededed;
    >>>>    display: inline !important;           <<<<<<<<
        text-align: center;
        width: 100%;
                background: transparent;
                border-color: #ff0000;
    }
    .main-navigation ul {
        margin: 0;
        text-indent: 0;
        background-color: #ffffff;
    }
        .main-navigation li a,
    .main-navigation li {
        display: inline-block;
        text-decoration: none;
    }

The bit with the arrows would have originally looked like this:

display: inline-block !important;

I hope this sort of helped you out a little bit.