Docs

[michaellanfield]

http://thevegansandwich.com

I have a question. For the drop down menu, for one of the menu pages/items I would like the entire menu item (not text) colour to be different, to stand out from the rest of the drop down menu items. How to do this? Thank you.

[Thai]

Hi There,

Please add the following CSS under Customizer > Custom > Edit Global CSS:

body .x-navbar .sub-menu {
    background-color: #f0f0f0 !important;
}

Hope it helps 🙂

[michaellanfield]

🙁 Doesn’t seem to work.

[Christian]

Hey Michael,

Can you give us a screenshot showing what menu item you would like to change the background?

Thanks.

[michaellanfield]

This reply has been marked as private.

[Zeshan]

Hi Michael,

Please use following CSS code instead:

.masthead-inline .x-navbar .desktop .menu-item-148 .sub-menu {
  background-color: #ff0000 !important;
}

Replace #ff0000 with your desired color (you can generate hex color codes from here).

Thank you!

[michaellanfield]

Doesn’t work.

[John Ezra]

Hi there,

Thanks for updating the thread! You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

.masthead-inline .x-navbar .desktop .menu-item-148 .sub-menu {
  background-color: #ff0000 !important;
}

li#menu-item-148 a {
    color: #ff0000;
}

.menu-item-148 .sub-menu a span {
  color:#ffffff;
}

Just change the color values as you see fit. I have tested this via your custom CSS area in the customizer and it works.

Hope this helps – thanks!

[michaellanfield]

The whole Media menu is red, including the media link. I just wanted Webinar to be red and not anything else. 🙂

[Paul R]

Hi,

You can try this code instead.

body .x-navbar .menu-item-3092 a {
   color:red;
}

Hope that helps.

[michaellanfield]

nope

[Darshana]

Hi there,

Please try the following CSS rule.

.x-nav-wrap.desktop .sub-menu .menu-item-3092 {
    background-color: #ff0000;
}

.x-nav-wrap.desktop .sub-menu .menu-item-3092 a {
    color: #fff;
}

Hope that helps.

[michaellanfield]

Almost exactly the way I like it, but is there a way to make it so the whole webinar row is red?

[Lely]

Hi Michael,

Please use this CSS:

li#menu-item-148 > ul {
    padding-left: 0;
    padding-right: 0;
}
li#menu-item-148 > ul > li {
    padding-left: 1.75em;
    padding-right: 1.75em;
}

Hope this helps.

[Author]

Posts