Widget area in header font color not changing

  • Resolved brendas

    (@brendas)


    6 years, 7 months ago

    Hello,

    Maybe somebody can help me with this. I’ve enabled the widget area:
    Header Settings > Header Extras > Widget area

    In this widget aera I’ve added the Polylang languagechanger.
    Widget > Header Extra Widget Area > Languagechanger > display name of language + hide current language

    The font color of the name of the stays black. I’ve tried several things, but nothing works. I also have a transparent header only on the homepage + sticky on all pages.

    Is there a way to change the font color? It would like that the font is acting the same as the rest of the menu. White on homepage until scroll > sticky header orange.

    Kind regards, Brenda

    • This topic was modified 6 years, 7 months ago by brendas.

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter brendas

    (@brendas)

    My custom CSS:

    .sticky-wrapper.is-sticky .mobile-headerclass, .sticky-wrapper.is-sticky .headerclass {
    -webkit-box-shadow: 0px 3px 3px 0px rgba(50,50,50,0.2);
    -moz-box-shadow: 0px 3px 3px 0px rgba(50,50,50,0.2);
    box-shadow: 0px 3px 3px 0px rgba(50,50,50,0.2);
    }

    .kad-header-menu-inner .kt-header-extras ul.sf-menu ul {
    background: transparent;
    }

    hannah

    (@hannahritner)

    Hey Brenda,
    Sorry for the delay!
    This css should affect the color not on scroll:

    .sf-menu a {
    color: #fff;
}

    and this will affect it when scrolled:

    .sticky-wrapper.is-sticky .headerclass .sf-menu a {
    color: #333;
}

    Hope that helps!

    Hannah

    Thread Starter brendas

    (@brendas)

    Hi Hannah,

    Thanks for your reply. It almost works. But now the complete header is the same colour. I just want another color for the font of the extra widget. Not the rest of the menu. Is that possible?

    Brenda

    Thread Starter brendas

    (@brendas)

    Hi Hannah,

    Oh, I figured it out by adding to the CSS: .widget-inner

    One more thing; when not scrolled it works fine on the homepage. But on other pages the widget is white and the background is white too. Can this be changed to another colour, without changing it on the homepage?

    Brenda

    hannah

    (@hannahritner)

    This css should affect just your homepage:

    .home .sf-menu .widget-inner a {
    color: #fff !important;
}

    Hannah

    Thread Starter brendas

    (@brendas)

    I made some changes in the CSS to match the colours of the website theme:

    .sticky-wrapper.is-sticky .headerclass .sf-menu .widget-inner a {
    color: #ff7f00;
    }

    .sf-menu .widget-inner a {
    color: #ff7f00;
    }

    .home .sf-menu .widget-inner a {
    color: #fff !important;
    }

    .home .sticky-wrapper.is-sticky .headerclass .sf-menu .widget-inner a {
    color: #ff7f00 !important;
    }

    Thanks a lot for your help Hannah!

    hannah

    (@hannahritner)

    No problem! Glad that’s working for you.

    Hannah

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Widget area in header font color not changing’ is closed to new replies.