Archived topic
positioning Hamburger mobile menu icon
5 replies · Started by Stefan on March 28, 2021
Hi
First of All, i really enjoy your product !!
I am trying to achieve like this:
https://u.pcloud.link/publink/show?code=XZjrG2XZoOgl0llS90LBFAnersU69k76ssXX
Where Hamburger menu shows left side of logo just like the 2 right icons+text on the right side of the logo.
Right now i have set menu-toggle clasS, as position:absolute and it behaves strangely on different devices, so i would like to know if i somehow with a filter or custom coding can position the menu somewhere Else?
I do have a Child theme in place if custom PHP is needed.
Is this possible somehow, maybe even within a header widget HTML object as the other 2 on the right of logo ?
Thanks in Advance
Kind regards
Hi there,
Can you link us to the site in question? So we could check how best to approach this?
Let us know.
I have link in private box :)
Sorry for getting back to you late.
Instead of adding the word "menu" through a widget, you should add it through Appearance > Customize > Layout > Primary Navigation and set "Menu" to the Mobile Menu Label text field.
It will display in a row with the hamburger icon but we can easily make it display vertically by adding this CSS:
button.menu-toggle {
display: flex !important;
flex-direction: column !important;
padding: 0 !important;
}And to resize/change the font:
.menu-toggle .gp-icon+.mobile-menu {
padding-left: 0px;
font-weight: 100;
font-size: 0.6em;
line-height: 2;
}This will be its effect: https://share.getcloudapp.com/QwuERvNW
Hi Elvin
Thank you so much for the CSS, i thought that it could not be achieved with CSS only..
You proved me wrong, thank you :)
No problem. Glad to be of any help. :)
