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.

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

Resolved 11 replies customizationthemetheme-north
Pierre Roodman
Started · Latest reply by Pierre Roodman

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.

Need fast email support? Get SiteOrigin Premium

Replies

11
  1. 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. Alex S Staff

    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. Pierre Roodman

    Thank you. Will try it and check.

  4. Pierre Roodman

    No success, Still the same.

  5. 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. Alex S Staff

    Hi Pierre,

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

  7. Pierre Roodman

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

  8. Alex S Staff

    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. 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. Pierre Roodman

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

  11. 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.

Have a different question or issue?

Start New Thread