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

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

By hhcwc, 9 years ago. Last reply by Andrew Misplon, 9 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. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 4 days ago Andrew Misplon
    Hi, I Work Here

    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. 9 years, 4 days ago hhcwc

    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. 9 years, 4 days ago Andrew Misplon
    Hi, I Work Here

    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. 9 years, 4 days ago hhcwc

    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. 9 years, 4 days ago Andrew Misplon
    Hi, I Work Here

    Try adding:

    .home #search-icon #search-icon-icon {
    background-color: #ffffff;
}
  6. 9 years, 2 days ago hhcwc

    Thank you! That worked great.

  7. 9 years, 2 days ago Andrew Misplon
    Hi, I Work Here

    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.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More