Mobile menu overlaps content

Support
#1

Hi there
I’m using the X Theme.
The mobile menu, when expanded,overlaps the content. But only until the content centers - then it’s pushed down where it’s supposed to be.
Is there a way to keep the content pushed down whenever the mobile menu is expanded?
The site is here:
www.sangundervisning-mettejuul.dk

My CSS is here:

.entry-wrap {background-color: rgba(255, 255, 255, 0.6) ;}

.x-navbar {
background-color: rgba(255,255,255,0.4);
}

@media (max-width: 660px) {
/hide the sliding background/
.backstretch {
display: none !important;
}
/show a single standard background-image for mobile/
body {
background-image: url(http://sangundervisning-mettejuul.dk/wp-content/uploads/35.jpg);
/background-position: 50% top !important;/
background-size: cover !important;
background-attachment: fixed;
background-repeat: no-repeat;
}
}
@media ( max-width: 530px ) {
.x-brand {
margin-top: 15px;
font-size: 16px;
font-weight: bold;
}
}

@media (max-width: 1200px) {
.x-nav-wrap.desktop {
display: none
}
.x-nav-wrap.mobile {
display: block;
}
.x-nav-wrap.mobile.x-collapsed {
display: none;
}
.masthead-inline .x-btn-navbar {
display: block;
float: right
}
.masthead-stacked .x-btn-navbar {
display: inline-block
}
.x-navbar-fixed-top-active .x-navbar-wrap {
height: auto
}
}

Best regards
Kasper

#2

Hey Kasper,

Thank you for reaching out to us. I checked your site in couple of mobile devices and it’s working as expected, when the mobile menu is expanded the content is pushed down simultaneously so there is no overlapping (see screenshot below). This is the default behavior as well in X.

Try clearing out your browser’s cache of your mobile device and see if this resolves the issue. If it doesn’t help then please let us know which mobile device and OS you’re testing in so we can try replicating the issue, a video recording of the issue would be helpful in this case too.

Thanks!

#3

Hi again
When the content centers there is no problem, as you’ve taken a screenshot of, and I wrote in my initial question.
But it is before the content centers, when the browser window is between 1200 and 980px the overlapping occurs.
Hope you can help.
thanks again.
Kasper

#4

Hi Kasper,

To fix it, please change this code.

@media (max-width: 1200px) {
.x-navbar-fixed-top-active .x-navbar-wrap {
    height: auto;
}
}

to this

@media (max-width: 1200px) {
.x-navbar-fixed-top-active .x-navbar-wrap {
    height: auto !important;
}
}

Hope that helps

#5

Thank you so much, you’ve been a big help.

#6

Hi Oelga,

if you want to read further about the resources related to the previous suggestions, you can check here:

Cheers!

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.