0

I'm trying to fix the following bug on my blog https://blog.teiltonung.de when it's visited by mobile device:

If you open the mobile navigation which is a nav-element inside the css-class ".et-mobile-navigation" which is part of body-element then the nav-element is scrollable but the whole page content behind the nav-element is scrollable too, so this is really buggy.

Is there any other solution than to rewrite the html to place the nav-element outside the body-element to be able to do overflow: hidden on the body? My Problem is, that I'm using the Extra-Theme from elegantthemes so I'm not able to do heavy html-edits on the basic structure of the theme. :(

Community
  • 1
  • 1
Henning Bü
  • 1
  • 1

2 Answers2

0

You need to provide a fix height for #et-mobile-navigation nav, for example:

#et-mobile-navigation nav{
  height:300px;
}

So that the inner scroll will take affect and prevent scrolling from the body level.

Vincent1989
  • 1,593
  • 2
  • 13
  • 25
  • with a fixed height I've got the problem to set is responsive, because I can't use a "%"-value because of the parenting element from the nav-element it would have the same height like the primary-navigation-bar and with a "vh"-value it doesn't work :( do you know how to keep it responsive? – Henning Bü Nov 24 '17 at 02:22
  • What you can do is using CSS media query to create breakpoints, for example when you are at \@media only screen and (max-width: 500px) { #et-mobile-navigation nav{ height:400px; } } and when you are at \@media only screen and (max-width: 350px) { #et-mobile-navigation nav{ height:300px; } }..... – Vincent1989 Nov 24 '17 at 02:25
  • Ok that looks like a temporary solution but it isn't really responsive :/ Do you really don't know a true responsive solution? Beside of that I'm already really thankful for your latenight-help, send some love to you! :) <3 – Henning Bü Nov 24 '17 at 02:42
  • There is an issue with how the navigation is being set up, by right height 100% should do the trick but because the html is being nested within the mobile logo, and thus the height 100% will not work. Another solution would be using javascript to monitor the screen height and append to the navigation or you can even use js to disable the parent scrollbar when your navigation is active – Vincent1989 Nov 24 '17 at 03:15
  • Yes that's the big problem, 'cause the 100% of height would be defined by the parent element and to edit the html so heavy that it is configured right for this one purpose I don't have the skills. But the use of javascript to detect the screensize and put this value in height: seems to be a nice solution. Do u know the code to do this? I would look for it on google right now but maybe you know something which would help :) – Henning Bü Nov 24 '17 at 03:24
  • Perhaps you can take a look at this? https://stackoverflow.com/questions/25125560/prevent-parent-scroll-when-in-child-div – Vincent1989 Nov 24 '17 at 03:33
0

You can make menu sticky. Or un sticky, watch your theme settings. In mobile-theme settings there should be some kind of switcher. Also, you can play with:

<nav style="display: block;">

css:

#et-mobile-navigation nav {
    overflow: scroll !important;

dude, change height:300px; to height: 20%;

Space Spice
  • 13
  • 1
  • 6