Change background colour on Icon flyout menus

[paulcarpenterfilms]

Hi,

A site I am currently working on uses the Ethos stack. How can I change the background colour of the flyout menus please? The main menu is currently fine - a green background with white text, however when a flyout menu appears, its background is currently also white, making its text elements invisible.

Thanks in advance.

[ruenel]

Hello @paulcarpenterfilms,

Thanks for writing in!

You are having this issue because you have added this custom CSS:

.x-navbar {
    border-color: transparent;
    background-color: #37898c;
}

Please have it removed and change the background color in the Theme Options. Simply go to Cornerstone > Theme Options > Stack and select the desired shade of green color in the color picker of the Navbar Background.

Best Regards.

[paulcarpenterfilms]

Hi,

Thanks but that didn’t quite work. I made a mistake in saying I was on Ethos - I’m actually using Icon. Where are the settings for that?

In Theme Options > Stack (Icon) there are no colour options available for the topbar.

Thanks

[prakash_s]

Hello, @paulcarpenterfilms,

Regretfully there is no option to change the Topbar background color but you can use custom CSS code to change it. You can use this custom CSS code under Theme option —>CSS.

.x-topbar {
background-color: #37898c;
border-bottom: 1px solid #37898c;
}

Please feel free to change the color code as per your design.

The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector or you can subscribe to One to get further assistance.

Hope it helps.
Thanks