Sticky Menu overlap header slider and picutre on mobile devices (phone/tablet)

Hi,

on my website www.weltenbummler-unterwegs.de i use in the sydney theme a Sticky menu on all devices.

After i change the menu to sticky i have an issue with the overlap in the header.
I use the Customizer Option Slider mobile behavior: “Responsive”.

.site-header.fixed {
    position: fixed !important;
}

@media (max-width: 767px) {
   .site-logo {
       display: none;
   }

   .btn-menu {
       margin-top: -20px;
   }
}

The Menu is overlapping the pictures of my slider (header) on the mobile view (on phones and tablets).
It’s new after adding the sticky menu option via css.

How can i deactivate that the menu is overlapping the picutre /slider below?
(It overlap more than 25% of my slider).

I try to activate the checkbox “Deactivate overlapping?” in the Customizer Options in Header Media.
But nothing happens.

How can i stopp the overlapping (via css?) for the mobile (phone+tablet) version?

Hi,

Use this CSS code to change the header color to transparent when in mobile screen:

@media only screen and (max-width: 1024px){
   .site-header {
    background-color: transparent;
  }
}

Put the code into: customize > additional CSS.

Regards,
Awan

Hi,

thank you for your reply. I want not change the color. That is already great. The css doesn’t solve the problem. I try to explain it better.

I have on mobil and tablet devices all content objects behind my menu banner. So it is behind the banner and not under(below) the banner.

So the menu hide parts of the image slider of the startpage and also the header images of subpages and also text field of posts.

All objects start at the top of the display and not below the menu banner on tablets and phones(mobil).

Here are 4 examples:
Example 1
Example 2
Example 3
Example 4

Has it something to do with the .overlay class? Or can be the problem solve with editing other css or change options? It looks really strange.

Hi,
i do some tests. I think these is an issue of the sticky menu option.

I add your code for the sticky menu for mobile + tablet

#masthead.site-header.fixed {
    position: fixed !important;
    background-color: rgba(0,0,0,0.9);

So the position is fixed all the time and the other objects like slider,text or images are overlapped by the menu all the time. If i scroll through the page that is ok. But at the beginning (at the top of all main and subpages) the first element should be below the menu and not overlapped by the menu.

So i try to change the position option. I think it work now and i correct or?

#masthead.site-header.float-header.fixed {
    position: fixed !important;
    background-color: rgba(0,0,0,0.9);
}

Hi,
I see… so you just need to change the position rule of the site-header.
Great! looks like the issue is solved, I’ll mark it as resolved then.

Regards,
Awan