Archived topic
Top menu (mobil version)
10 replies · Started by afuente26 on February 16, 2022
Hello,
I need your help. I´m making a new website and I´m trying to set up the mobil menu in a specific way.
I send you an image how it is now and how it has to be.
1. the three menu lines have to be on the left site.
2. the logo has to be in the center.
3. finally, the menu (with the black background), the three lines(left) and the logo (center) has to be above the slider, so that, when you scroll down, the menu disappears, and appears only when you scroll to the top of the website. You can see what I meen in the website skibase.es
All this only in the mobil version!!!
Thank a lot
Angel
foto now: https://multiinformatica.es/mobil-menu-now.jpg
foto how it has to be: https://multiinformatica.es/mobil-menu-new.jpg
Hi there,
Can you link us to your site?
sorry, sure.
Hi Afuente26,
To 1 and 2, here is a CSS you can try:
.mobile-header-navigation .inside-navigation.grid-container.grid-parent {
flex-direction:row-reverse;
}
.site-logo.mobile-header-logo img{
transform:translateX(-15%)
}
#mobile-header button.menu-toggle {
z-index:20
}With regards to the menu being under the admin menu bar, you’ll need to check your custom CSS. It seems that there are a couple of CSS rules in your website setting the menu to fixed and its parent div to absolute. Maybe you can remove all of these first and any other settings that modify the menu, and make it position:sticky instead with a top:0 value;
Hope this helps! :)
Hello,
thanks for the code, it works well ;-)
With regarding to the top menu, which has to be fixed a the top, I´m not able to do this. Even if I delete the existen css rules...
When you write position:sticky and top:0, do you mean in the generatepress settings or with css code?
Thanks again
Angel
hello again,
now I got it with this code
.mobile-header-navigation {
position: sticky !important;
}
thanks a lot.
You’re welcome Afuente! Glad it works as it should now! Feel free to reach out anytime if you’ll need assistance with anything else. :)
hello fernando again,
your code worked very well. Just a littel problem. In some movils, the top menu (just in the mobil version) is not displayed like wanted.
I give you a snapshot.
https://www.multiinformatica.es/no_good.jpeg
https://www.multiinformatica.es/ok.jpeg
Try this CSS:
.mobile-header-logo.site-logo {
max-width: calc(100% - 90px);
}it worked great. thank you ;-)
No problem :)
