Background color sticky header on mobile/tablet when scrolling

Airi
#1

How do i configure the background color i want for the header at the top position and another background color when scrolling down?

#2

Hi,

We can suggest you with custom CSS code for those two scenarios. But I need direct checking to your website to know your current header setting.

Can you share a link to your website here, please?

Regards,
Kharis
aThemes Support

#3

Hi @kharisblank,

Site is https://ailytics.ai/ Thanks

Regards,
Lenard

#4

Hi Lenard,

Thank you for sharing the link.

First of all, ensure your menu settings in Customizer look like this:

Screen Shot 2021-01-13 at 08.46.53

Then try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (min-width: 768px) {
      .site-content {
        margin-top: 174px;
      }
      .site-header {
        background-color: #fff000 !important;
      }
      .is-sticky .site-header {
        background-color: #ff0000 !important;
      }  
    }

Regards,
Kharis
aThemes Support

#5

This works now, thanks alot!

#6

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis
aThemes Support