[nicolainicelyParticipant]

Hi when I view my website http://eaglerockstudiosatl.com/ on mobile the menu goes out of view of the screen and it can’t be scrolled back into place, see attached image. I would like the Menu with the logo and evrything to start at the top of the screen and all of the items to come after it and the whole page be scrollable in case later menu items are below the screen. How can I fix this?

Thanks,
Nick

[Rue NelModerator]

Hello Nick,

Thanks for writing in! The mentioned issue is because you have added padded to the x-container which have affected the container of the navbar. To resolve this, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-navbar .mobile .x-nav {
    padding-left: 25px;
}

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

[nicolainicelyParticipant]

So I still have the problem that I can’t scroll at all once the menu is open. The hamburger button and the menu item “Home” is off screen. There should be a menu item called “Home” above Stages but you cant see it because it is off screen and you can’t scroll at all so it is impossible to get to.

Thanks,
Nick

[RadModerator]

Hi there,

Thanks for posting in.

The main reason why menu fixed positioning is not implemented on mobile is because of this. The menu simply follows the view while you’re scrolling.

div.x-slider-container.above ~ header.masthead.masthead-inline {
    position: fixed;
    width: 100%;
    bottom: -90px;
}

And your home page has the full-screen slider with no content, you can’t scroll that. You can only scroll pages that have content larger than the screen height. Unless I misunderstood the issue, would you mind providing more details on how I can reproduce the issue?

Thanks!

[nicolainicelyParticipant]

I am viewing this website on a iphone 5s in safari. The above code didn’t help :/. How do I make it so I can at least scroll the menu when it is open so I can bring the hamburger menu icon back into view and any menu items I want? Like it is right now if I had 20 pages most of their menu items would be off screen and no one could ever visit those parts of my site on mobile because they can’t scroll the menu.

Thanks for helping with this,
Nick

[RupokMember]

Hi Nick,

Thanks for updating. You don’t even have any content on your page that’s why the issue is causing. You need to add more content on your page to be able to scroll.

However you can try this code under Custom > CSS in the Customizer.

.x-nav-wrap.mobile.collapse.in {
  height: 400px;
  overflow: auto;
}

Hope this helps.

Cheers!

[nicolainicelyParticipant]

I completely understand what you mean but I can’t add content due to my clients wishes. This fix is exactly what I needed, thank you so much, you guys rock :).

[nicolainicelyParticipant]

This fix is great for the majority of phones but is there an easy way to make the height adjust to be responsive?

Thanks,
Nick

[RupokMember]

Hi Nick,

Thanks for updating. Do you wish to change the height for some screens? In that case you could use media query for some screen range :

@media only screen and (max-width: 360px) {
.x-nav-wrap.mobile.collapse.in {
  height: 300px;
  overflow: auto;
}
}

Hope this helps.

Cheers!

[nicolainicelyParticipant]

Had no internet to reply, thank you this will work 🙂

[Prasant RaiModerator]

You are most welcome. 🙂

[Author]

Posts