Archived topic
Having the menu centered in the middle and the magnifying glass at the right
10 replies · Started by Mathieu on November 17, 2020
There's one last thing that used to work and that still works with Flexbox but the option doesn't seem to be available anymore.
On one site, I can change the navigation logo in "Primary navigation" instead of "Sticky navigation".
With that legacy feature, the result is the Menu Hamburger in the middle and the magnifying glass on the right.
This is on flexbox but I can't reproduce it.
Is there a trick? Either by triggering the right code with the right hook in PHP or purely CSS.
I would really like my menu to be that way like it used to be.
Regards,
Hi there,
Are you referring to the sticky navigation only or both static and sticky?
The sticky one :)
Any idea?
Hi,
Try adding this CSS:
@media (max-width:768px){
nav#sticky-navigation button.menu-toggle {
flex-grow: 1;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
nav#sticky-navigation .menu-bar-items {
order: 3;
}
}Oh it's pretty ! I really like this Elvin.
Thank you so much.
Have a nice evening.
Oh it’s pretty ! I really like this Elvin.
Thank you so much.
Have a nice evening.
Awesome. No problem. :D
Hi Elvin,
Sorry to reinstate that ticket but I just discovered that while it is super pretty on Android, it goes on two line on every iPhone device :
This needs a real Safari device as the Chrome device emulation doesn't do it. That's why I missed it.
Regards,
Hi there,
looks like you switched to the Off Canvas Panel for the mobile menu - has this resolved the issue ?
I didn't change anything... The menu gets sticky once you scroll down the page.
But with the code Elvin give me, when there's two word in the menu it goes on two line in Safari even if there's plenty of place. Looks like a wordbreak thing or something.
It's okay... I'll just shorten it and write menu. Gonna be simpler.
Regards.
