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

#7

Hi, How can I change the header color of my website? Thanks

#8

Hello @MAIRAARBOLEDA,

First thanks for using our theme!

There’s options for this in the theme through Appearance > Customize > Colors > Header. If by some reason these options are not working, please share your website link with us, so we can do a inspection see what’s happening and send the best solution for you.

Kind Regards,

Rodrigo.

aThemes Support