How to add different colours to the Navigation Items in different pages

[Rama Devi]

Hello Bill, I want my Navigation items to be in Different colours in Different pages. How to do that? Currently I want to change the colour of the Navigation Items & Bar in only one page. But it will be useful if I get to know the way to add different colours in different pages.

Thanks,

[Bill Robbins]

You can do that. Every page/post/product on a WordPress site has a unique ID that you can use to style items on that page differently. To find the ID, edit the page and look in your browser’s navigation bar. The ID will be listed as part of the URL there. Once you have that you can use it to apply styling to just that page.

Go to the theme options page and select the Advanced tab. Scroll down to the Custom CSS box and add this there:

.page-id-29 nav#top-menu li a {
	color: #fff;
}

.page-id-29 nav#top-menu li a:hover {
	color: #000;
}

You’ll replace the “29” in the snippet above with the ID of your page. The top style sets the default color for links and the bottom the hover color. To change the navigation bar background, add this:

.page-id-29 #header.scroll-background,
body.standard.page-id-29 #header {
	background-color: #ccc;
}

Again change out the “29” to match your ID. That should do it. If you run into trouble, let me know.

Bill

[Rama Devi]

Thanks Bill. That did work for the Navigation Items. But the Navigation Drop down is still the same. What is the code to change the Navigation Dropdown Colour .

Thanks

[Bill Robbins]

If you’ll send over the URL to the page where you’re unable to make the change, I’ll take a look.

Bill

[Rama Devi]

Here is the link. The colour of the Main Menu items is changed. However, the drop is still in the same colour. Click on the iWatch

http://www.igoldd.com/iphone/

[Bill Robbins]

You can change the drop down colors on a per page basis with this:

.page-id-17 #header nav#top-menu li li a {
	color: #fcfcfc;
}

.page-id-17 #header nav#top-menu li li a:hover {
	color: #dbdbdb;
}

See how that works now.

[Rama Devi]

Thanks Bill, the Code works 🙂 Actually I am using Elite on an other website as well. I used the code you gave me yesterday & it did the Job. Both the Main menu & the drop down menu had the colours changed with one code. But I had a problem with the above website. I required 1 codes to get the Job done.

[Rama Devi]

* it required 2 codes to get the job done

[Bill Robbins]

Glad you’re set now. That’s one reason why it’s great to have the URL to a troublesome page. Often little things are different from site to site and even on pages within a site. It makes it easier to make sure that everything works like we’re hoping.

Have a great afternoon 🙂

[Author]

Posts