Sub Menu Background colour set to #FFFFFF !important - cannot overwrite

[Webb]

Hi There,
I am using renew.
I have changed the background colour of my menu but cannot get the sub menu to change.
I have tried using css to alter the sub menu background colour but it doesn’t work - presumably because of this existing line of CSS:
.sub-menu {background-color: rgb(255,255,255) !important;}
This is not found in the custom css section - so I have no idea how to remedy this!
Help would be greatly appreciated!
Thanks in advance,
Ash

[ruenel]

Hello Ash,

Thanks for writing in! In changing your Navbar background color, you have added this CSS code:

.x-navbar-inner {
    background-color: #1B4A6B;
}

Please remove this CSS and then go to X > Theme Options > Renew > Navbar Background. There should be color picker for your to change the background color of your navbar.

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

[Webb]

Hi,
That has the sub menu acting as I wish but then the main menu is all white.
If I add:
.x-navbar-inner {
background-color: #1B4A6B;
}
then the menu goes to the corerct color (& sub menu) but the links are also the same color too!
D’oh!

[ruenel]

Hello Ashley,

The menu and submenu items color can be change in X > Theme Options > Renew > Header > Link - Text. This is where you can set the font family and the link color and link hover color of your menu items.

Please keep in mind that We are unable to provide CSS code for any customization as it is outside of our support scope. The points above will be a good starting point and if you are interested you can learn more about CSS & selectors and details here.

Hope this helps.

[Webb]

Hi,
I am not looking for anybody to write CSS for me.
I was trying to say that the advise contained in your first reply didn’t work.
Adjusting the color where you say does not appear to address my issue.
I wish for the background to be #1B4A6B and link text to be #ffffff
The link text is fine but without using x-navbar-inner {
background-color: #1B4A6B;
}
the navbar background colour is not changing according to my selction. You can see this in attached picture.
Thanks,
Ash

[ruenel]

Hello Ash,

The Theme Option settings were overridden because you have added this custom css in Theme Options > Custom CSS. You have to remove this code.

.x-navbar {
  background-color:#fffff
}

• 

Kindly provide us access to your site so that we can check your settings and fixed your issue instead. Please create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
​
To know how to create a secure note, please check this out: https://theme.co/docs/getting-support

Regards.

[Webb]

Hi there,
I have checked and that line of css is definately not in custom CSS.
Sorry for the bother!
Thanks.
Ash

[friech]

Hi Ash,

The X > Theme Options > Renew > Navbar Background apply to both the Navbar and the submenu dropdown. If it’s not, then it means something is overwriting it. Please do this:

Navigation to Theme Options > CSS and do a find (ctrl+f or cmd+f), look for this selector .x-navbar

If you see a .x-navbar selector with a background-color property applied on it, then you need to remove that rule, you don’t want that custom CSS background-color to be applied on your .x-navbar.

• 
  
  
  

Let us know how it goes,
Cheers!

[Webb]

this is x>theme options>renew>Navbar Background

this is Appearance>Customize>Additinal CSS

I can not find any refernce to a white navbar anywhere in either of those places.

Is there somewhere else this may be?

[lely]

Hi Ashley,

You can find both on X > Theme Options > Global CSS:

Please remove it there.
Hope this helps.

[Webb]

Hi Lely,
That’s amazing! Thankyou!
Can you tell me the difference between using that ‘global css’ tab and ‘additonal css’ - I don’t remember ever using the global css section but I’m guessing I must have!
What is best practice please?
Thanks you very much!
Ash

[ruenel]

Hello Ash,

This is the hierarchical order of the styling being loaded in the theme.

• Theme’s stack style
• Child theme’s style.css
• WP Additional CSS in Appearance > Customize > Additional CSS
• Theme Options
• Theme Option’s Custom CSS
• Cornerstone’s page Custom CSS

You can place your custom css in the Additional CSS only if it cannot be overridden by the theme options. If your custom css needs to override the theme option settings, then it is best that you place your custom css in the Theme Options custom css.

Hope this explain it briefly.