Different menu background & Hover color from page to page

[ArcaneE]

Hello,

My website is http://jgq.24c.myftpupload.com/

I’m trying to get a different color on the other pages of my site.

I am using

.services .x-navbar, .blog .x-navbar, .error404 .x-navbar, .contact .x-navbar, .boutique .x-navbar {
background-color: Black;
}

But it only changes on the blog page. I would like to also change the navbar hover color.

Thanks for your help!

Nathalie

[Prasant]

Hello @ArcaneE,

Thanks for asking.

You ca take a look at the solution mentioned in following post to have page specific navbar background and hover color:

Set the menu bars in different colors from one page to another

Thanks.

[ArcaneE]

Hi,

Thank you for your answer. However, I had read this thread before and tried that method. Unfortunately, it refers to post, pages, articles and so on. I simply want to change the colour of the navbar, not the entire page.

Also it does not cover the hover color. I must say it was helpful for some other items I had to customize but not for the questions at hand.

I have posted a CSS way that worked for one page (the blog) and was wondering if it could be replicated for the other pages as well.

Thank you!

Nathalie

[ruenel]

Hello There,

Only this code will be recognize by Wordpress:

.blog .x-navbar, 
.search  .x-navbar, 
.archive .x-navbar, 
.author  .x-navbar, 
.error404 .x-navbar {
   background-color: Black;
}

If you want to add something custom, you will need to edit each of your pages and insert a custom body class.
Please see the image below as an example:

Once the custom body class is in place like in screenshot, I can have something like this:

.about-me .x-navbar {
   background-color: yellow;
}

Hope this explains it briefly.

[ArcaneE]

Yes, thank you!

One more thing - How do I change the hover color for those pages as well?

Thank you!

Nathalie

[jade]

Hi Nathalie,

You could add this block of code:

.about-me .x-navbar a:hover,
.about-me a:hover {
   background-color: red;
}

Hope this helps.