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
8 years ago · Last reply by Pierre Roodman 8 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.

Need fast email support? Get SiteOrigin Premium

Replies

11
  1. Pierre Roodman 8 years, 5 months ago

    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 8 years, 5 months ago

    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 8 years, 5 months ago

    Thank you. Will try it and check.

  4. Pierre Roodman 8 years, 5 months ago

    No success, Still the same.

  5. Pierre Roodman 8 years, 5 months ago

    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 8 years, 5 months ago

    Hi Pierre,

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

  7. Pierre Roodman 8 years, 5 months ago

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

  8. Alex S Staff 8 years, 5 months ago

    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 8 years, 5 months ago

    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 8 years, 5 months ago

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

  11. Pierre Roodman 8 years, 5 months ago

    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