Docs

[tshores]

Please see this site:
https://not1more.org/

As you can see, I’ve modified the navbar background color with this CSS,
.x-navbar {
background-color: #EBF1D8;
}

However, the dropdown menu background color is still black. How can I modify those dropdowns?

Also, how do I change the color of other elements in the navbar, like the line separating navbar from body?

Thanks!

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> CSS :

ul.sub-menu {
    background-color: #EBF1D8 !important;
}
.x-navbar {
    border-bottom: 2px solid red;
}

Hope it helps.

[tshores]

That’s what I needed, thank you!

[tshores]

Hmmm however it has affected all submenus, please see the header menu. I tried creating another menu to place in the header, thinking perhaps this CSS only targed the “main menu”, but the color in the dropdown header is still affected.

How can I code this CSS to only affect the color of the navbar menu?

[Nabeel A]

Hi again,

The above code will change the background color of all submenus, can you please provide us a screenshot of what you’re trying to achieve?

Thanks!

[tshores]

Please see the screenshot of the current Header menu. The Header is expanded. The Main Menu has two links: The Story, and a submenu, Chapter 1. The background of Chapter 1 is green, and as you can see, that looks terrible … I want it to match the rest of the menu, which is currently the default Ethos header menu background.

The submenu background is green because of the CSS I put into Customizer earlier in this thread. I want the navbar to be green.

Please help me update CSS in Customizer so only the navbar submenus background is green, restoring the header submenu to its default background color.

[Lely]

Hi There,

Unfortunately, I am little confuse on what I have seen on your site compare to your screenshot. See attached screenshot. It’s different. To add green background to submenu only, please use this CSS:

.x-navbar .sub-menu {
    background-color: green !important;
}

If this doesn’t achieve what you want, please do clarify because you’re appearance is really different on your screenshot.

[tshores]

Please check my site again:
https://not1more.org

At the very top right corner, you’ll see a little + button. Click that + button and the WordPress header menu opens up, with WordPress widget areas. This is different from the X/Ethos navbar.

As you’ll see the submenu color CSS that controls the submenu background color in the X/Ethos navbar ALSO affects the submenu bg color in this separate header widget area.

I want to know the CSS to make my header submenus match my header bg color. I also want the CSS to modify my header bg color. Please help?

[Nabeel A]

Hi again,

Thank you for the clarification! To change the Widgetbar submenu color, try adding the following code in your Customizer:

.x-widgetbar .sub-menu {
    background-color: transparent !important;
}
.x-widgetbar .widget ul li a, .x-widgetbar .widget ol li a {
    color: #fff !important;
}

To change the color of Widgetbar, you can use this code:

.x-widgetbar {
    background-color: #FAEBD7 !important;
}

Change the colors as per your need to match the site. Hope this helps!

[tshores]

Ahhhhh yes that’s beautiful, thank you.

FYI I added a line to your code, to change link color when I hover:

.x-widgetbar .sub-menu {
background-color: transparent !important;
}
.x-widgetbar .widget ul li a, .x-widgetbar .widget ol li a {
color: #fff !important;
}
/* this is the line i added */
.x-widgetbar .widget ul li a:hover, .x-widgetbar .widget ol li a:hover {
color: #A9C84F !important;
}
.x-widgetbar {
background-color: #493226 !important;
}

[Nico]

Happy to hear that.

Feel free to ask us again. Thank so much for sharing us the code you used. It would help a lot to others.

Have a great day! 🙂

[Author]

Posts