How to change sticky header to light mode.

How to change sticky header to light mode.

In Legalpower theme, sticky header(header that appears on top when you scroll the page) is in dark mode.



If you want to change it to light mode, there are 2 parts of the process. First lets change the background color to white. To do this, Please enter below css in Themeoptions/general/customcss box.


header.hdr.sticky-fixed {
    background: #FFFFFF;
}

Feel free to change the color code in above code as it suits you.

Next part is to change the default menu item colors to dark, otherwise they will not be visible on white background as they are also white.

To do this, Please enter below css in Themeoptions/general/customcss box.

header.sticky-fixed .mainmenu .nav-holder > ul > li > a {
    color: #242424;
}

Pasting both above css will make the sticky header like below image.


    • Related Articles

    • Change images in Homepage header and Page headers.

      If you are looking to change below images in Airtech. Please watch below video that explains how to change the images in Header section of homepage top area and page headers. https://share.getcloudapp.com/v1ueBlA0

    • Edit / remove / style header button

      Howello WP theme contains a button in the header https://share.getcloudapp.com/DOuv91rm To change its text or its link, please go to themeoptions/Layouts. If you want to change its background or hover color, Please enter below css in ...

    • Changing color of the line in the header

      In logiscargo, there is a border in the header in default header type.  Please note the black arrows in below image. To change its color, please put following style in themeoptions/customcss box. #header:before { border-bottom: 1px solid #000000; } ...

    • Change color of hamburger menu on mobile

      https://share.getcloudapp.com/4gux57bx To change hamburger menu on mobile, Please enter below css in wp-admin/appearance/customise/additionalCSS box. @media (max-width: 991px) { .navbar-light .navbar-toggler.collapsed span { background: #000; } ...

    • How to remove logo from Sticky menu

      In Cakecious, the logo appears in sticky menu when you scroll down... https://cl.ly/b5a54e44bd1c If you do not want logo in sticky menu to save space of available screen. Please enter below css in Themeoptions/general/customcss box. .navbar_fixed ...