This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Replies

18
  1. Support Assistants 10 years, 1 month ago

    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.

  2. Matthia 10 years, 1 month ago

    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!!

  3. Support Assistants 10 years, 1 month ago

    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.

  4. Matthia 10 years, 1 month ago

    Alpha Horse

    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

  5. Support Assistants 10 years, 1 month ago

    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.

  6. Matthia 10 years, 1 month ago

    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?

  7. Support Assistants 10 years, 1 month ago

    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.

  8. Matthia 10 years, 1 month ago

    Thank you so much, it works beautifully!!

  9. Matthia 10 years, 1 month ago

    Is there by any chance also custom CSS to get also a different mouse-over colour?

  10. Support Assistants 10 years, 1 month ago

    You might try:

    .menu-item-1709 a:hover {
	background: blue;
}
  11. Matthia 10 years, 1 month ago

    Perfect!

    Thank you so much!!

    Have a great Day,

  12. Matthia 10 years, 1 month ago

    all works great now!

    One last thing…. what would be the correct syntax to change the color of the footer also in certain pages?

  13. Matthia 10 years, 1 month ago

    Where can i find the .menu-item-ID?

  14. Support Assistants 10 years, 1 month ago

    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.

  15. Matthia 10 years, 1 month ago

    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;
    }

    Screen Shot 2016-01-07 at 12.17.32 PM

    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!!

  16. Support Assistants 10 years, 1 month ago

    Sure :)

    Untested, let’s try:

    .page-id-400 .main-navigation ul ul li a {
background: #7fb1e6;
}
  17. Matthia 10 years, 1 month ago

    Perfect!
    thank you!!

  18. Support Assistants 10 years, 1 month ago

    Glad we could help.

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread