CODEWITHSUNDEEP
csswordpressmenuitem
edelwater
edelwater

Reputation: 2802

WordPress TwentyTwelve Custom Menu current-menu-item styling

  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?

Upvotes: 0

Views: 2309

Answers (2)

user2203618
user2203618

Reputation: 11

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.

Upvotes: 0

rafaelbiten
rafaelbiten

Reputation: 6240

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.

Upvotes: 1

Related Questions