Start a new topic

Sticky Menu Bar?

This should be simple, but I'm not able to find the CSS to make the menu bar stick at the top when scrolling on a mobile device. The following worked on the browser developer tool but did not work when actually applied to my website:


@media only screen and (max-width: 999px){

body .frontApp .Page.hasLeftMenu .MainMenu{

position: fixed; 

}

}


Does anyone know what I'm doing wrong? Thanks!


Hello,


I have added a CSS code to make the menu fixed. The id or class of the menu sometimes change depending on the size of the device it is viewed at. Please refresh your browser and check again. 


Arvin (Forum Moderator)

Thank you, Arvin!


This worked perfectly on the phones I was able to test it on. Is there a way to make the menu bar stay at the top even when the menu is open (currently everything but the hamburger disappears) or am I pushing my luck?


Hello,


Sorry, I didn't fully understand. I tested it on my end and it is working. Can you send me a screenshot so I can understand the problem much better? Thanks! 



Arvin (Forum Moderator)



Sure, I'm attaching a brief screen recording. You can see the menu bar, except for the hamburger icon, disappears when the menu is open.

Thanks for your help!

mov

Hello,


Thank you for providing a screen recording, it's more helpful. However, I'm sorry but I can't fix it with CSS. The moment you open the menu, it's a different element or container that takes over. I can't add a new element using CSS to create a header and pb4 only allows us to edit CSS and not add HTML code. 


I hope you understand.



Arvin (Forum Moderator)

I understand, I guessed the same thing. Thanks for looking into it!

Hello,


You're most welcome and thank you for your understanding! Enjoy your weekend! 



Arvin (Forum Moderator)

Login to post a comment