Headers getting cut off by menu bar on mobile/tablet views

Support
#1

Hi, please see:

The headers seam to be too high up on mobile views, they are getting cut off:

Also, please check out the menu on mobiles/tablets, there is a sub-menu for ABOUT US, a drop down menu, when you click it, the menu disappears, instead of showing the sub-menu items.

Thanks.

#2

Hello @logoglo,

Thanks for writing in!

I have inspected your site and I found out that you added this:

.x-container>.offset{
    margin:100px auto;
}

Please be advised that this will only affect some of the pages. It will not include those pages using Blank - No Container page templates. You may need to update your code and use this instead:

.x-container>.offset{
    margin:100px auto;
}

.x-main.full{
    margin:100px auto;
}

We would love to know if this has worked for you. Thank you.

#3

If I add that extra code, this happens:

So the gap is too big now, and adds a white gap on the homepage.

The entire site uses blank no container. Only page that is different is the portfolio page, which uses the portfolio template.

I even tried taking out the top code and it doesn’t have an effect.

#4

I found the culparate, it was this :slight_smile:

}
@media only screen and (max-width: 768px) {
.button-align {
float: none;
}
}
header.masthead {
height: auto !important;
}

Now, what about the menu issue I mentioned?

Thanks.

#5

Hi @logoglo,

Glad you sorted out the header issue, but I can’t replicate the mobile menu issue on my end, works fine for me (see screencast below)

Try clearing your phone’s browser’s cache.

Thanks,

#6

Strange, I cleared the cache, and opened them in incognito windows, ipad and huawei phone and its still doing it…see the vids:

also the other issue has come back, so please view on an ipad vertically, there is a white gap above the header, below the menu bar, only on the ipad, on a mobile, that gap doesnt appear. I was given this code previously: (https://theme.co/apex/forum/t/site-has-a-large-white-gap-on-a-tablet-device/57834)

@media only screen and (max-width:768px) {
    .button-align {
        float: none
    }
} 

    header.masthead {
        height: auto !important;
    }

But then this adds the issue I was having before on all the pages, how can I make this ONLY for the home page?

Thanks.

#7

The white gap seams to be caused by this code:

element.style {
height: 150px;
}

So I just added that to the custom css and changed it to 0px.

But its still appearing as 150px even after I clear all caches.

Please note this appears only on the 1st visit of the site, an uncached version, so please make sure you are viewing it in an incognito window.

I think its coming form this header.masthead, but if I add the previous code:

header.masthead {
height: auto !important;
}

It gives me the same issue as before, I just need that gap removing from the homepage, not all pages.

#8

Hello @logoglo,

The code:

element.style {
height: 150px;
}

is coming from your custom JS code:

function stop_jumps() {
	jQuery('header.masthead.masthead-inline').css('height', jQuery('.x-topbar').height() + jQuery('.x-navbar').height());
}
jQuery(document).ready(function(){
	stop_jumps();
});
jQuery(window).resize(function(){
	stop_jumps();
});

If you remove this code block, it should resolve the gap issue.

Please let us know how it goes.

#9

Nailed it! thanks!

Now about the mobile menu issue I am having, that remains, did you have chance to look over it?

#10

Hello @logoglo,

You mobile menu issue is also cause by another custom JS code:

!function(n){n(".x-one-page-navigation-active .x-navbar .mobile .x-nav .menu-item").on("click touchend",function(){n(".x-btn-navbar").trigger("click")})}(jQuery);

Please remove this and you mobile menu will work as expected.

#11

Ahh, yes it is, BUT, if I take that code out, when you click on say prices, one page nav, the menu stays there, and covers the page, this code makes it disappear once you click on the menu item…

Any work around, so it still does this, but doesnt disappear on the submenu?

#12

Hello @logoglo,

If that code is needed, you may need to update it and use this:

!function(n){n(".x-one-page-navigation-active .x-navbar .mobile .x-nav > .menu-item:not(menu-item-has-children)").on("click touchend",function(){n(".x-btn-navbar").trigger("click")})}(jQuery);

Hope this helps. Please let us know how it goes.

#13

I changed the code to the one you provided, cleared out all the caches, but the issue is still there, sorry.

#14

Hello @logoglo,

Sorry there was a typographic error in the code. Missing the .
Use this instead:

!function(n){n(".x-one-page-navigation-active .x-navbar .mobile .x-nav > .menu-item:not(.menu-item-has-children)").on("click touchend",function(){n(".x-btn-navbar").trigger("click")})}(jQuery);

Hope this helps.

#15

That worked, but, and im sorry to keep saying its fixed, and then its not…so, if you look at the order, web design, portfolio pages etc, the headline is still getting cut off by the nav bar…, so I added this code as suggested:

.x-main.full{
margin:50px auto;
}

This fixes that issue, but adds a gap on the home page, :frowning: how do I have the pages look good on a mobile using the code, but not have the white gap on the homepage?

Thanks for your help.

#16

Fixed it

.masthead.masthead{
height: 0px;
}

This sorts out that gap on the homepage, I think.

#17

We are just glad that you have figured it out a way to correct the said issue.
Thanks for letting us know!

#18

Thanks for all of your help with these issue, you guys ROCK!

#19

You are most welcome!

#20

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