Home>Support>Menu Font colour not changing in browser, but changes in live editor

Menu Font colour not changing in browser, but changes in live editor

By Pierre Roodman, 7 years ago. Last reply by Pierre Roodman, 7 years ago.

Hi
I am attempting to change the menu font colour of the north theme. (Consultant site pack)

I have changed the colour to white which displays in the live editor as well as the custom css plugin, but if I browse the site in a new window (all browsers and devices), the colour is black.

Please help me.

Regards
Pierre

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 7 years, 24 days ago Pierre Roodman

    I discovered that all the menu items display the “current” font colour, so the default and hover colours do not display. On a dropdown though the font works correctly.

  2. 7 years, 20 days ago Alex S
    Hi, I Work Here

    Hi Pierre Roodman

    The Consultant sitepack sets the font via CSS. Please navigate to WP AdminAppearanceCustom CSS and repalce:

    .main-navigation ul a {
    font-weight: 600;
    color: #fff !important;
}

    With:

    .main-navigation ul a {
	font-weight: 600;
	color: #0f0;
}

.main-navigation ul a:hover {
	color: #00f;
}

    Adjust it as desired.

    You might also need to install the SiteOrigin CSS Editor.

  3. 7 years, 20 days ago Pierre Roodman

    Thank you. Will try it and check.

  4. 7 years, 20 days ago Pierre Roodman

    No success, Still the same.

  5. 7 years, 20 days ago Pierre Roodman

    This is the code in custom after adjustment:

    .main-navigation ul a {
    font-weight: 600;
    color: #FFFFFF;
    }

    .main-navigation ul a:hover {
    color: #000000;
    }

    .lsow-odometers .lsow-odometer .lsow-number {
    color: #ffffff;
    }

    .lsow-odometers .lsow-odometer .lsow-stats-title {
    color: #fff;
    }

    .lsow-odometers .lsow-odometer .lsow-stats-title .lsow-icon-wrapper {
    color: #2995bc;
    }

    #colophon .widgets .widget-title {
    color: #fff;
    font-weight: 600;
    }

    .widget-area .widget ul.menu a {
    color: #595959;
    }

    #colophon .widget-area .widget_recent_entries ul li a {
    color: #595959;
    }

    #colophon .widget-area .widget_recent_entries ul li a:hover {
    text-decoration: underline;
    }

    #colophon .widget-area .widget_recent_entries ul li {
    padding-top: 10px;
    padding-bottom: 10px;
    }

    #colophon .tagcloud a {
    background: #595959;
    }

    #colophon .tagcloud a:hover {
    background: #2995bc;
    }

  6. 7 years, 20 days ago Alex S
    Hi, I Work Here

    Hi Pierre,

    Do you have a public URL where we can take a look at your setup?

  7. 7 years, 20 days ago Pierre Roodman

    Yes, http://www.zinhlegumede.co.za

  8. 7 years, 20 days ago Alex S
    Hi, I Work Here

    Hi Pierre,

    Thanks. Please replace:

    .main-navigation ul a {
font-weight: 600;
color: #FFFFFF;
}

    With:

    .main-navigation ul a {
	font-weight: 600;
	color: #0f0 !important;
}

.main-navigation ul a:hover {
	color: #00f !important;
}
  9. 7 years, 20 days ago Pierre Roodman

    Great that worked.

    Just a small problem still, the colour of the menu item selected should be black, but it remains white like as if it is not selected or hovered over.

  10. 7 years, 20 days ago Pierre Roodman

    Nevermind I got it working now. Thank you so much for your help Alex.

  11. 7 years, 20 days ago Pierre Roodman

    This is what I added by the way for anybody that wants the same thing.

    .main-navigation ul a:focus{
    color: #000000 !important;
    }

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