Menu items with different colors

[WineDesignNL]

Hi Mohammad,

It seems to be resolved, but when I add more colors, nothing happens… Did you do this in the CSS file?

.nav li.menu-item-11632 a {background: #E85127!important; }
.nav li.menu-item-11632 a:hover {background: #F85127!important; }

.nav li.menu-item-11640 a {background: #F8B334!important; }
.nav li.menu-item-11640 a:hover {background: #F8B334!important; }

.nav li.menu-item-11647 a {background: #698C25!important; }
.nav li.menu-item-11647 a:hover {background: #698C25!important; }

.nav li.menu-item-11666 a {background: #E508E9D!important; }
.nav li.menu-item-11666 a:hover {background: #508E9D!important; }

.nav li.menu-item-11676 a {background: #459DD2!important; }
.nav li.menu-item-11676 a:hover {background: #459DD2!important; }

.nav li.menu-item-11682 a {background: #8875AF!important; }
.nav li.menu-item-11682 a:hover {background: #8875AF!important; }
#header-section{background:#ffffff !important;}


I want to change some other things within the menu, so it would be helpfull where you changed this!

Thanks.

[Mohammad – SUPPORT]

Hi,
I inserted the css code at Admin -> Theme Options -> Custom CSS.
Thanks
Mohammad

[WineDesignNL]

Alright! Works like a charm! Totally missed this part of your fantastic theme! Should I make a child theme for this custom CSS or doesn’t a theme update overwrite this?

Thanks!

[Mohammad – SUPPORT]

Hi,
You dont need to make any child theme for custom css code.
Thanks
Mohammad

[WineDesignNL]

Hi Mohammad,

Thanks, it is resolved!

Two more questions…

The menu-items in the submenu shoudn’t have a background. I tried this:


nav li.menu-item-11632 a {background: #E85127!important; }
nav li.menu-item-11632 a:hover {background: #F85127!important;}

nav .sub-menu li.menu-item-11632 a {background: #ffffff!important; }
nav .sub-menu li.menu-item-11632 a:hover {background: #ffffff!important;}

but it seems that’s not the right way/ class to fix this.

And also, I want the menu-item width to be the same (200px fixed). But I wonder if this will mess up the responsive lay-out/

Thanks again!

[David Martin – Support]

Hi,

If you want to remove the sub menu background color, please use this:

nav .menu ul.sub-menu {
    background-color: transparent!important;
}

– David.

[WineDesignNL]

Hi David,

Changed the code a little bit, but it worked!


nav .menu ul.sub-menu a {
background-color: transparent!important;
}


Ty!

[Mohammad – SUPPORT]

Hi,
Great thanks to David ?
Mohammad

[WineDesignNL]

Hi Mohammad,

Tought the ‘TY’ would be enough..? 😉

Big cheers to you both!

And while I’m here… Maybe one more menu lay-out question if that’s oke?

I’m trying to accomplish this (see image). Is this possible? If possible also responsive 🙂 I’m talking about the ‘top-menu’. Now it’s aligned to the right, I want it to be next to eachother, like a regular menu.

Thanks in advance!

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

You would need to use some custom CSS for this modification. A broad example is this:

ul#menu-top_menu {
    float: right;
}

#menu-top_menu li {
    float: left;
    margin: 0 15px;
}

– David.