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. 2 months, 11 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. 2 months, 8 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. 2 months, 8 days ago Pierre Roodman

    Thank you. Will try it and check.

  4. 2 months, 8 days ago Pierre Roodman

    No success, Still the same.

  5. 2 months, 8 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. 2 months, 7 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. 2 months, 7 days ago Pierre Roodman

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

  8. 2 months, 7 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. 2 months, 7 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. 2 months, 7 days ago Pierre Roodman

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

  11. 2 months, 7 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