Menu Dropdown Color

[s13s]

I’d like the change the color of the dropdown. Im using a mega menu on one, but not the others. I’d also like to increase the font size and adjust the color on the mobile menu. Thanks!

[ruenel]

Hello @s13s,

Thanks for writing in!

Regretfully there is no setting that you can change the font size and color for the submenu in the megamenu setup. You need to add CSS code into X > Theme Options > CSS . You need to use the Google Chrome Developer Toolbar to check the live HTML code and find which CSS selector you need to use.

You need to use this CSS code as an example:

.x-navbar .desktop .x-nav .x-megamenu > .sub-menu > li > a {
    font-size: 16px;
    color: red;
}

.x-navbar .desktop .x-nav .x-megamenu > .sub-menu > li > a:hover {
    color: blue;
}

.x-navbar .desktop .sub-menu li > a {
    font-size: 14px;
    color: green;
}

.x-navbar .desktop .sub-menu li > a:hover {
    color: yellow;
}

I have used distinct colors so that you can easily spot the changes. Feel free to make adjustment as you need. Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

• Intro to CSS - https://goo.gl/mFuWQT
• How to get CSS selectors - https://goo.gl/BmoH39
• Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa
• CSS Media Queries - https://goo.gl/L3ZHNg

Note: Please note that the code provided above serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.

Note: If you are unfamiliar with code and resolving potential conflicts, you may select our One or Care service for further assistance. We are unable to provide support for customizations under our Support Policy.

We would love to know if this has worked for you. Thank you.