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

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 a free community support forum. Replies are not guaranteed. If you need professional email support, please purchase a SiteOrigin Premium license.

  1. 14 days, 22 hours 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. 11 days, 18 minutes 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. 10 days, 23 hours ago Pierre Roodman

    Thank you. Will try it and check.

  4. 10 days, 23 hours ago Pierre Roodman

    No success, Still the same.

  5. 10 days, 23 hours 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. 10 days, 21 hours 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. 10 days, 21 hours ago Pierre Roodman

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

  8. 10 days, 18 hours 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. 10 days, 18 hours 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. 10 days, 18 hours ago Pierre Roodman

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

  11. 10 days, 18 hours 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