Hi,
Is it possible to change colour on the navigation bar only for certain pages (buttons),
I have tried some codes (CSS) i found around but nothing really work.
Thank you for your time,
Matthia
Navigation bar color
This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.
Hi Matthia
Thanks for your question.
Vantage Premium has a Menu section at AppearanceCustomizeTheme Design. Unfortunately, there aren’t any options to change the menu for certain pages. How many pages do you need to make this change for? Send us an example link and we’ll try demonstrate how it might be done using custom CSS.
Hi!
I am building a web site offline you can see the screenshot below.
Two section in the web site will have 2 distinctive colours. i would like to have these colours represented in the main menu bar.
It will be only for 2 buttons: Corporate and Family…. the rest will have the main nav bar color.
Any CSS code idea would be great!!
Thanks for your feedback. Unfortunately, email attachments don’t currently upload to your thread. Please, login to the forum directly and use the Add Media button. Or, upload your screenshots to any cloud storage type environement and send us the links.
Hi, as you see in the middle of the page i will have 2 links (square boxes) which will have different colours,
i would love to take this 2 colour up to the nav bar button (and possibly any sub content).
Let me know if with some CSS it can be done,
Thank you!
Matthia
Hi Matthia
You can fix/change this with some custom CSS. If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Just add the following code.
.page-id-xx .main-navigation { background: #343538; }You might also need to install the SiteOrigin CSS Editor.
Replace xx with the page ID in question. You can find the page ID by going to Pages in WordPress. Click on the page in question and check the URL, the ID will be listed there. Replace #343538 with the color you’d like to use for the menu background for the page in question.
Hi,
Thanks it works beautifully but this CSS makes the whole nav bar the same custom colour.
Is it possible to make only the “corporate” link on the bar of a different colour thought the whole site?
You can use the following:
.menu-item-1709 a { background: red; }1709 would need to be replaced with the menu item ID. To get the menu item ID you’d need to inspect the page using your browser’s web developer tool and check the code of the menu item.
Thank you so much, it works beautifully!!
Is there by any chance also custom CSS to get also a different mouse-over colour?
You might try:
.menu-item-1709 a:hover { background: blue; }Perfect!
Thank you so much!!
Have a great Day,
all works great now!
One last thing…. what would be the correct syntax to change the color of the footer also in certain pages?
Where can i find the .menu-item-ID?
The menu item ID can be found by inspecting the page source, specifically the menu item. The ID is contained in the list item class. If you use your browser’s developer tool and inspect the menu item element you’ll see it.
https://developer.chrome.com/devtools/docs/dom-and-styles
See Inspecting Elements.
You can set the footer background color using:
.page-id-xx #colophon { background: #2f3033; }Replace xx with the page ID. You can get the page ID by editing the page in WordPress and checking the URL, the ID will be the only number in the URL.
Ok, now everything looks like it should except for one thing. I cannot get the sub-menu to another color.
My CSS is as follow:
/*Corporate Page Menu & Footer Color*/
.page-id-400 .main-navigation {
background: #7fb1e6;
}
.page-id-400 .main-navigation ul li a {
background: #7fb1e6;
}
.page-id-400 .main-navigation ul li:hover > a {
background: #d4e5f7;
}
.page-id-400 #colophon {
background: #7fb1e6;
}
As you see the sub-menu has the color of the menu, any chance to be able to customise it?
Thank you for your time!!
Sure :)
Untested, let’s try:
.page-id-400 .main-navigation ul ul li a { background: #7fb1e6; }Perfect!
thank you!!
Glad we could help.