sticky menu on mobile

[Mark Roberts]

Hi there,

Is it possible to have the sticky menu for mobile devises.
At the moment this is not the case.

Thanks and kind regards,
Mark

[Zex]

Hello, Mark!

Try to insert the next codes into Customizing->General->Additional CSS:

@media screen and (max-width: 994px) {
div.sticky-header.sticky-header-shrink {
 position: fixed !important;
}
nav.mobile-menu {
position: fixed!important;
width: 100%;
z-index: 4;
}
}

Best Regards

• This reply was modified 4 years, 4 months ago by Zex.

[Mark Roberts]

Hi Zex,

thanks for the code, but doesn’t work as it should do. The menu folds out under the layer slider header image.
Tried changing the z-index layer order, but then the layer slider header image isn’t visible at all, with a white background where the menu will fold out as result.

Regards,
Mark

[Zex]

Hi, Mark!

Can you give me an address to your website?

Thanks.

[Mark Roberts]

Hi Zex,

Here is the website address: https://www.equisource.eu.
Your code is not active at the moment as the website is live and code was making the site un-navigable.
I cad add the code again for a short period for you to check, if you would like.

Regards,
Mark

[Zex]

Hello Mark!

Please, insert the next code instead the one I gave you in the previous post:

@media screen and (max-width: 994px) {
div.sticky-header.sticky-header-shrink {
 position: fixed !important;
}
nav.mobile-menu {
position: fixed!important;
top:86px;
width: 100%;
z-index:99;
}
}

Regards

[Mark Roberts]

Hi Zex, this already works better, but the dropdown symbol (4 horizontal bars) is not visible after the menu opens, so no way to close menu after its open.

Regards,
Mark

[Zex]

Please substitute the code with the next one:

@media screen and (max-width: 994px) {
div.sticky-header.sticky-header-shrink {
 position: fixed !important;
}
nav.mobile-menu {
position: fixed!important;
top:86px!important;
width: 100%;
z-index:99;
height: 300px;
overflow: auto;
}
}
@media screen and (max-width: 480px) {
nav.mobile-menu {
top:150px!important;
}
}

• This reply was modified 4 years, 4 months ago by Zex.
• This reply was modified 4 years, 4 months ago by Zex.

[Mark Roberts]

Hi again Zex,

Tried the new code with !important, but at 155px instead of 86px, otherwise menu was still over the menu bars.
Only problem now, is that you can’t scroll the menu dropdown list, because it won’t move over the logo or menu bars and you can’t scroll down beyond the screen size. i don’t know if what I’m saying makes any sense, but you can try the menu dropdown list and try and select the bottom item in the list.

Regards,
Mark

[Zex]

Please Check the code again… I edited the post in the meantime.

Change the “height” value per your needs.

• This reply was modified 4 years, 4 months ago by Zex.

[Mark Roberts]

Hi Zex,

Still doesn’t work. i can’t scroll through menu list, but can see the background (page content) scrolling.

regards,
mark

[Zex]

Use the next one:

@media screen and (max-width: 994px) {
div.sticky-header.sticky-header-shrink {
 position: fixed !important;
}
nav.mobile-menu {
position: fixed!important;
top:86px!important;
width: 100%;
z-index:99;
height: 300px;
overflow: auto;
}
}
@media screen and (max-width: 480px) {
nav.mobile-menu {
top:150px!important;
}
}

Change the “height” value per your needs.

[Mark Roberts]

Hi Zex,

Doesn’t solve the problem as the open menu doesn’t scroll.
Maybe has to do with the fact that the menu is sticky (fixed), so when the dropdown opens (especially last menu item “meer info”) it can’t be scrolled to bottom as it is fixed at the top.
I either have to have smaller text, less menu items in the menu drop down list or remove the sticky menu.

Is it not possible to have the logo and menu bars fixed and the menu dropdown scroll together with the rest of the page under the logo and menu bars.
Here is an example website page that has this kind of menu on mobile: http://www.sallyscottages.co.uk

Sorry for all the trouble, but I have removed the code for the moment as it is not what I need.

Kind regards,
Mark

[Zex]

Hi Mark!

I apologize to you, obviously, I didn’t understand the problem well. I think now I understand what you wanted. Try the following code instead of the codes I gave you earlier:

@media screen and (max-width: 994px) {
div.sticky-header.sticky-header-shrink {
 position: fixed !important;
}
nav.mobile-menu {
top:86px!important;
}
}
@media screen and (max-width: 480px) {
nav.mobile-menu {
top:150px!important;
}
}

Best Regards

• This reply was modified 4 years, 4 months ago by Zex.

[Mark Roberts]

Hi Zex,

Nearly does it. But still have a problem when you open the nav menu hen you are half way down the page.
When you open menu half way down a page, it doesn’t jump to the top where the menu is, so you can’t see the dropdown.

regards,
Mark

[Author]

Posts