Sticky mobile menu
- This topic has 11 replies, 2 voices, and was last updated 5 years ago by
clara.bergenfelz.
-
AuthorPosts
-
May 19, 2018 at 2:26 pm #9237
clara.bergenfelz
ParticipantHi!
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 5 years, 1 month ago by
clara.bergenfelz.
May 19, 2018 at 4:25 pm #9242Zex
ModeratorHello, 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; }
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
May 20, 2018 at 9:06 am #9251clara.bergenfelz
ParticipantHi!
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, ClaraMay 21, 2018 at 8:30 am #9256Zex
ModeratorHello, 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.
Regards
May 22, 2018 at 11:50 am #9287clara.bergenfelz
ParticipantThis reply has been marked as private.May 22, 2018 at 1:12 pm #9293Zex
ModeratorHello, 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 5 years, 1 month ago by
Zex.
May 22, 2018 at 4:33 pm #9296clara.bergenfelz
ParticipantThank you so much Zex! Looks amazing! 😀
May 22, 2018 at 4:35 pm #9297Zex
ModeratorThis reply has been marked as private.June 1, 2018 at 9:35 am #9407clara.bergenfelz
ParticipantHi 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
June 1, 2018 at 9:41 am #9408clara.bergenfelz
ParticipantHi, 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…
June 1, 2018 at 9:58 am #9409Zex
ModeratorThis reply has been marked as private.June 1, 2018 at 11:47 pm #9421clara.bergenfelz
ParticipantThis reply has been marked as private. -
This topic was modified 5 years, 1 month ago by
-
AuthorPosts
- You must be logged in to reply to this topic.