Sticky mobile menu

[clara.bergenfelz]

Hi!

Do you know if or how I can change the mobile menu to be sticky? (Stay on the top) 🙂

Kind regards,
Clara

• This topic was modified 4 years, 10 months ago by clara.bergenfelz.

[Zex]

Hello, Klara!

Next code should work for you:(insert it in Customising->General->Additional CSS)

@media screen and (max-width: 992px){
.sticky-header.sticky-header-shrink {
    position: fixed!important;
	
}
}
nav.mobile-menu >ul{
	width: 100%;
	margin-top: 200px;
	height: 200px;
	overflow: auto;
}

https://prnt.sc/jjxd7o

Maybe you will need to correct a margin-top and height values, to suit your needs.

If you give me your Website address I will give you the correct code.

Regards

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

[clara.bergenfelz]

Hi!

Thanks! With this code the menu gets sticky 🙂 But, I still need to scroll to the top to see the menu, do you have a fix about that? 🙂 The site lies on this address atm: http://webbred2.utb.hb.se/~s162584/wp/

Thanks in advance!
Regards, Clara

[Zex]

Hello, Clara!

Unfortunately, I can’t reach your site…The server at webbred2.utb.hb.se is taking too long to respond.
I’ll try later, in case the site is temporarily unavailable or too busy.

To solve your problem, try to increase a margin-top value from the above code.

https://prnt.sc/jkieox

Regards

[clara.bergenfelz]

This reply has been marked as private.

[Zex]

Hello, Clara!

I have slightly modified the code that I gave you earlier to fit your preferences on the theme.

In case someone else it needs too, I’ll write him here.

The code that I added in Customize -> General-> Additional CSS is:

@media (max-width:900px) and (min-width:480px) {
.sticky-header.sticky-header-shrink {
    position: fixed!important;
	
}
	nav.mobile-menu {
	position: fixed!important;
	width: 100%;
	top: 90px;
	height: 250px;
	overflow: auto;
	z-index:9999;
}
}

@media screen and (max-width: 479px){
nav.mobile-menu {
	position: fixed!important;
	width: 100%;
	top: 160px;
	height: 250px;
	overflow: auto;
	z-index:9999;
}
}

I hope it will satisfy your expectations.

Regards

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

[clara.bergenfelz]

Thank you so much Zex! Looks amazing! 😀

[Zex]

This reply has been marked as private.

[clara.bergenfelz]

Hi Zex, Im sorry can you pls help me. I was going to change some px in this code when everything got deleted and now I can’t get in back as it was from the begining when you helped me… 🙁 The site is due today for a school project so I would be so freakingly happy if you could fix it one more time. Im so sorry for wasting your time to do things twice 🙁

/Clara

[clara.bergenfelz]

Hi, sorry again, Ignore the above. My computer rebooted and kicked the old code back?! But anyhow, does it exist versions of this code somewhere? Seems to be a good thing to know for me…

[Zex]

This reply has been marked as private.

[clara.bergenfelz]

This reply has been marked as private.

[Author]

Posts