Customise the Sticky Mobile Menu Icon, Search Icon and logo Colour

Asked on June 23, 2016 in Customization.


Is it possible to have the header logo image change along with the
search icon and the mobile menu icon colours once the sticky header engages?

My header is transparent when scrolled to the top but changes to white
as the user scrolls, therefore the header logo, search icon and menu icon need to be
white at first to stand out from the background image, then change to black
to be seen on the white sticky header.

Is the above possible to achieve? All help appreciated.

Rickerby Layers User
  • Possible Answers to Your Question:

  • 1 Answer(s)
    Answered on June 28, 2016.

    Hi there,

    Layers uses an invert magic to decide the default color of the header elements. If your header color is white, the elements will be dark. If you need them to be a specific color in different states that is not the same, (ie using the menu cusotmization colors in Layers Pro isn’t enough) you need to use Custom CSS to target the sticky state and apply your styles.

    This tutorial gets into manual menu customization:
    How to Customize the Header Menu Style

    This one gets into the sticky header styles
    How to Fade the Header on Scroll

    And this one tells you everything you ever wanted to know about the header , the header elements and the classes used  to select them

    WOW! Thanks Vail Joy.  Appreciate the in-depth support.

    on June 28, 2016.