Need to change menu colors on some slider pages

I have multiple pages using full page sliders with custom photos.
While your default font color of white for the menus works on some of the photos, on some I need to reverse the menu color to be black.

For example, Slide 1 and 2, white menu color
Slide 3 and 4 need black

How can I accomplish this?
I do have the CSS plugin.

Thanks in advance!


I thought its better if you add a dark (transparent) background to the text and keep the text with white color. So it will not too much effort in managing the text color for your slider.

Can you post the URL of your site here? I need to check it directly and hope I can help you further.


My website is

I looked in your theme and I could not find a way with the customizer to add a dark (transparent) background. How do you accomplish this?


I am using CSS code to add dark transparent background, something like this
And here is the CSS code:

.slide-inner:before {
    content: '';
    background-color: rgba(0,0,0,0.5);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;

Unfortunately that covers my graphics. The menus I’m trying to keep visible are on the very top.
So your background would do that. However, it then messes up my logo.

If I can use your fix at the very top of the header to cover my menus “Products”, “About Us”, “Our Partners”, that will fix my initial problem. How do I adjust the code to highlight just the top few rows?
Then how can I move my logo downwards to not be affected by black transparent background?

Thanks for the help!

Ah I am sorry… you request it for the menu not for the slider title?

Well, please try these code instead:

.mainnav {
    background-color: rgba(0,0,0,0.5);

Then your menu should be displayed like this

Thanks Awan! That was exactly what I needed!!!