Change menu background color under 1025px width

Instead of black I want another background color around the hamburger button for tablet and mobile.

Hello there,

You can change the header bar color on mobile only with this simple CSS code.

    @media only screen and (max-width: 1024px) {
      .site-header,
      .site-header.float-header {
        background-color: #28ac0c !important;
      }  
    }

Add this code to Appearance > Customize > Additional CSS from dashboard.

Regards,
Kharis
aThemes Support

The above css is working. Thank you!

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

This post was flagged by the community and is temporarily hidden.

Hello there,

Please share a link to your website,so I can check and get the exact CSS code to suggest.

Regards,
Kharis
aThemes Support

dev.parkerstergis .com

Thank you for your time!

Hello there,

Thank you for sharing the link. Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width: 1024px) {
      #masthead.site-header,
      #masthead.site-header.float-header {
        background-color: #fff000 !important;
      }
    }

and adjust the hex color code as needed.

Regards,
Kharis
aThemes Support

The problem is that for exactly 1025width this white gap appears.
It is some kind of bug. Is there anything else that you can suggest?

Hello there,

Try adding this CSS code:

    @media only screen and (min-width: 992px) and (max-width: 1025px) {
      .header-slider .slide-item {
        height: 100% !important;
      }
      .header-slider .slide-item img {
        object-fit: cover;
        height: 100%;
      }  
    }

Let me know how it goes.

Regards,
Kharis
aThemes Support

The problem is solved.
Thank you for your assistance!

1 Like

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