Menu jumps to mobile Problem

[L-A-R-S]

HI there,

Luxuriöse Ferienwohnungen „R6-Tegernsee“ - Bad Wiessee am Tegernsee

I made the background in my top menu gradient within css:

.x-navbar {
 margin-top: 0px; 
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.5+0,0.2+44,0.1+60,0.03+73,0.02+83,0.01+89,0+95,0+100 */
background: -moz-linear-gradient(top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 54%, rgba(0,0,0,0.1) 70%, rgba(0,0,0,0.03) 83%, rgba(0,0,0,0.02) 86%, rgba(0,0,0,0.01) 89%, rgba(0,0,0,0) 95%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.3) 54%,rgba(0,0,0,0.1) 70%,rgba(0,0,0,0.03) 83%,rgba(0,0,0,0.02) 86%,rgba(0,0,0,0.01) 89%,rgba(0,0,0,0) 95%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.3) 54%,rgba(0,0,0,0.1) 70%,rgba(0,0,0,0.03) 83%,rgba(0,0,0,0.02) 86%,rgba(0,0,0,0.01) 89%,rgba(0,0,0,0) 95%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */

}

But when I scale down the browser window and the menu jumps to mobile or tablet version and I scroll down, then the gradient fills have of the page, so that everything seems to be dark.
How can the hight of the gradient stay the same in the mobile menu?

THanks for help,
Lars

[thai]

Hi There,

Please try adding this custom CSS under X > Theme Options > CSS:

@media (max-width: 979px){
    .x-navbar {
        background: none;
    }
}

Hope it helps

[L-A-R-S]

hmm the problem still exists. As soon as I scroll down, the black transparent gradient jumps over half of the site when the menu is in mobile version.
More suggestions?

Thanks,
Lars

[L-A-R-S]

I also have this code:
@media (max-width: 979px){
.x-navbar-fixed-top,
.x-navbar-fixed-left,
.x-navbar-fixed-right {
position: fixed;
overflow-y: scroll;
height: 100vh;
}
}
might this cause the problem?

[L-A-R-S]

ah if i remove : “height: 100vh;” this solves the problem but then the mobile drop down menu is not scrollable anymymore, because some points go out of the screen.

[L-A-R-S]

OK i solved the problem. I just added !important to the first code.

I removed “heigt: 100vh;” agin now everything is clickable but as before the menu in mobile version is not scrolable anymore.

1. How can I get the menu in mobile scrollable again but the site should be still clickable?

2. And there is another issue, on big screen on the right side appears for a short moment a scroll-bar, as everybody know from the right side of the browser. Then it dissapears and leaves a gap. (see screenshot)
   

Im so greatful for help. Im a bit under pressure…
Thanks!

[ruenel]

Hey There,

I have checked the site and in smaller screens, the mobile menu is scrollable while the content behind is fixed. It is not clickable because of course the menu items is over the content of the site.

It will only clickable it you decrease the height or width of the mobile menu which is on top of the layer.

I do not see any scrollbars on my end. This could just be a caching issue. Please clear your caches including your browser cache and use private browsing mode and test your site again.

Hope this helps. Kindly let us know.