Mobile menu and logo position

Hello there,
I have a problem with the mobile view header. There is a blank space above the home page slider which contains the site logo and the menu button. I wouldn’t even mind to keep it that way, but it behaves weird. When I scroll up, the space disappears for a moment and both logo and menu get in the right place (in front of the slider). Once I stop scrolling, the space appears again and since both logo and menu button are white on the home page, you can’t see them on the white background.
Sorry for confusing explanation, please see the screenshots attached and the link to my website.

Hi,

If I got it right, you’d add this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width: 1024px) {
      .site-header,
      .site-header.fixed {
        position: absolute !important;
      }
    }

Regards,
Kharis
aThemes Support

1 Like

Thank you! It worked!

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

1 Like

Hi again,
Another question on the same subject. What if my target is the opposite and I want to keep the white header on all pages? How do I solve the same issue of the header behavior (it comes and goes when I scroll)? I mean I open the page and I see no header, logo and menu overlap the slider/picture. And then I scroll down and the header appears. How can I achieve this?

Hi again,
Another question on the same subject. What if my target is the opposite and I want to keep the white header on all pages? How do I solve the same issue of the header behavior (it comes and goes when I scroll)? I mean I open the page and I see no header, logo and menu overlap the slider/picture. And then I scroll down and the header appears. How can I achieve this?

@kharisblank could you help with this please?

Hi,

Please accept my apologies for the delay.

If I got your correctly, you’d add this CSS code:

    @media only screen and (max-width: 1024px) {
      .site-header.fixed.float-header {
        position: fixed !important;
        background-color: #fff !important;
      } 
      .site-header.fixed.float-header .btn-menu {
        margin-top: 0;
      }
    }

I’d request giving it a try and let me know your views.

Regards,
Kharis
aThemes Support

Hi Kharis,
With your code the header becomes sticky which I do not need.

I am sorry. Seems likely I didn’t get you correctly. Can you share a screen recording that shows an example to clarify?

Regards,
Kharis
aThemes Support

Hi @kharisblank ,
Sorry for the late reply. Here is the video showing the header behavior:

My goal is to have a white header with logo and menu button on all pages.

Hi,

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

    @media only screen and (max-width: 1024px) {
      .site-header.fixed {
        position: static !important;
      }  
    }

Regards,
Kharis
aThemes Support

I added the code but unfortunately it didn’t solve the problem.
You can have a look at it yourself: https://2-the.com/

@kharisblank
I assume you cannot help with this?

Hi,

​Please accept my apologies for the delay in response. I really appreciate your patient.

Try this code:

    @media only screen and (max-width: 1024px) {
      #masthead.site-header,
      #masthead.site-header.fixed {
        position: static !important;
      }  
    }

Regards,
Kharis
aThemes Support

Looks like it finally worked! Thank you very much for your patience!

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