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.

How to Change Menu Color and Menu Text Color on Home Page Only

Resolved 7 replies premiumthemetheme-vantage
hhcwc
10 years ago · Last reply by Andrew Misplon 10 years ago

Hello, We have been designing a new site and would like to be able to change the color of the menu and menu text on only the home page. We want to keep the menu color and text the same on all the other pages except the home page. Can anyone please guide us through this process?
Thank you!
Jason

URL: http://www.hhcwc.com

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

7
  1. Andrew Misplon Staff 10 years, 4 months ago

    Hi Hhcwc

    You can fix/change this with some custom CSS. If you navigate to Appearance > Custom CSS, you’ll get our custom CSS editor. Just add the following code.

    /* Home */
.home .main-navigation {
    background-color: #5e5e5e;
}
.home .main-navigation a {
    color: #ffffff;
}
.home .main-navigation ul li:hover > a, #search-icon #search-icon-icon:hover {
    background-color: #727272;
}
.home .main-navigation ul ul {
    background-color: #5e5e5e;
}

    Edit as required.

  2. hhcwc 10 years, 4 months ago

    Thank you Andrew! That worked great. Can you please help me customize two more aspects of the home page menu? 1. Now that I changed the menu text to gray I would like to be able to customize the submenu text on the home page to white #ffffff.

    2. What is the code to change the search icon background color and the font color?

    Thank you for your help!
    Jason

  3. Andrew Misplon Staff 10 years, 4 months ago

    Sure. Just shooting from the hip here, that’ll probably be:

    .home .main-navigation ul ul li a {
    color: #fff;
}

    Then for the search:

    .home #search-icon #search-icon-icon {
    background-color: #5e5e5e;
}
.home #search-icon #search-icon-icon:hover {
    background-color: #727272;
}
.home #search-icon #search-icon-icon .vantage-icon-search {
    color: #ffffff;
}
.home #search-icon #search-icon-icon:hover .vantage-icon-search {
    color: #ffffff;
}

    Remove this from the original snippet. Just this:

    , #search-icon #search-icon-icon:hover

    Including the comma. Make sense?

  4. hhcwc 10 years, 4 months ago

    Thank you, again, Andrew! With your advice we were able to change the home page menu and sub-menu. The one part I have not been able to change is the search icon background color and font on the home page. I have been trying to change the background to white and the font to the dark gray. I’ve entered in the code but can’t seem to get the menu to respond. Please advise.

    Thank you,
    Jason

  5. Andrew Misplon Staff 10 years, 4 months ago

    Try adding:

    .home #search-icon #search-icon-icon {
    background-color: #ffffff;
}
  6. hhcwc 10 years, 4 months ago

    Thank you! That worked great.

  7. Andrew Misplon Staff 10 years, 4 months ago

    For sure :) 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