Folded out menu is hidden from header slider/ picture on tablets

Hi,

i use the sydney theme and customize with your provided css a little bit the menu to a sticky menu. That works fine with your css. Thank you.

I saw only today, that the folded out menu is hidden from header slider/ picture only on tablets.

It happens only if i open a new page. So if i start scrolling the page only a little bit, the menu is working correctly. So only if the page is on the beginning/top, the menu is hidden (and only on tablets or small windows on desktops).

How can i bring the menu to the front?

Here my webpage: www.weltenbummler-unterwegs.de

I also attach a screenshot and the css code for the menu:

Image with the hidden menu

Code:

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

/*Tabletauflösung*/
@media only screen and (min-width:768px) and (max-width:1024px) {
   .header-wrap {
    height: 75px;
  }
  .btn-menu {
    margin-top: -13px;
  }
  .header-wrap .col-md-8 {
    margin-top: 37px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);    
  }
}

/*Tabletauflösung+Mobile*/
@media (max-width: 1024px) {
    .site-logo {
        max-height: 75px !important;
     }
}

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

    .btn-menu {
        margin-top: -20px;
    }
    .go-top.show {
	bottom : 43px !important; /*Original 11px*/
    }
   #cookie-notice {
	bottom : 43px !important;
}

    /*CSS für Landingpage Mobile*/
    body.home #masthead:not(.float-header) .site-logo {
        display: inline; 
    }
    body.home #masthead:not(.float-header) .btn-menu {
        margin-top: 0px; /*Original 15px*/
    }
}

@media (max-width: 767px) and (orientation : landscape) {
    body.home #masthead:not(.float-header) .site-logo {
        display: none !important;
    }
    body.home #masthead:not(.float-header) .btn-menu {
        margin-top: -20px !important;
    }
}

Hi,

You can fix the menu appearing below header-slider with this Custom CSS:

.header-slider {
    z-index: -1 !important;
}

Please add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also add the CSS to wp-admin -> Appearance -> Customizer -> Additional CSS so you won’t loose the changes after Theme or WordPress updates.

Please let me know how it works.

Best Regards,
Csaba

Hi,

thank you. It works fine.

I must correct my last post. That css code is not working correctly.

The menu is displayed correct BUT i get other errors.

If i use the css i can’t use (click) the call to action button “Hier geht’s los”

It’s static and scroll not to the main content of the page.

Hi,

Please add this Custom CSS too and let me know how it works then:

.roll-button.button-slider {
    z-index: 999999 !important;
}

In case it won’t work, please just add my previous Custom CSS which fix the menu issue and keep it active until I check, so I can check for a better fix for the call to action button.

Best Regards,
Csaba

Hi,

the new css doen’t work. So i will add the previos css. So you see that i can’t click on the button.

Could you check it? I need to change it soon back, because some user always wrote me now that the button doesn’t work.

Currently i have added your css and now the button (call to action) is not working.

Some additional information, but no of my tests work :wink:

I try also to use: z-index: 999999 !important;
for the menu instead of changing the z-index of the header-slide:
(#mainnav-mobi or #mainnav-mobi.mainnav)

But i see no effect.

Also change to another Z-Index of the Button doen’t work (-1,0,+1).

Also no effects.

So i read some articles in the web.

Some said, don’t use negativ z-index or the problem is cause of the position (maybe should assign again to a relative position).

So i try also following css with the main class. But it also doen’t work.

.roll-button {
   z-index: 999999 !important;
   position: relative !important;
}

So my button is not clickable after changing the z-index of the header-slider.

Hi,

Please remove all previous Custom CSS, try this one instead and let me know how it works:

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

Best Regards,
Csaba

And i test also :

.roll-button.button-slider {
   z-index: 999999 !important;
   position: relative !important;
}

#menu-hauptmenue-container.menu{
   z-index: 999998 !important;
}

But in these case is the button also not working.

The z-index statement deactivate the clickable call to action button.

Sorry i see now your answer. So i try it and give you feedback.

Hi,

thank you for the fix. I check it on desktops. Here it works with small resolutions. I test it also again tonight at an tablet.

But i think, that code fix it. Thank you.

Hi,

i checked it always on a tablet. Now it works. Thank you.

Hi,

Great! You’re most welcome! If you need help with anything else, please, feel free to open a new topic.

Have a nice day!

Best Regards,
Csaba