Having the menu centered in the middle and the magnifying glass at the right

This topic has 10 replies, 4 voices, and was last updated 5 years, 4 months ago by Mathieu.

Viewing 11 posts - 1 through 11 (of 11 total)

Author

Posts
November 17, 2020 at 6:12 pm #1535484

Mathieu

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,

November 17, 2020 at 7:22 pm #1535512

Leo
Staff
Customer Support

Hi there,

Are you referring to the sticky navigation only or both static and sticky?

November 17, 2020 at 7:44 pm #1535518

Mathieu

The sticky one 🙂

November 19, 2020 at 12:34 pm #1538087

Mathieu

Any idea?

November 19, 2020 at 4:03 pm #1538245
Elvin
Staff
Customer Support
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;
}
}
```
November 19, 2020 at 5:06 pm #1538277

Mathieu

Oh it’s pretty ! I really like this Elvin.

Thank you so much.

Have a nice evening.

November 19, 2020 at 5:07 pm #1538279

Elvin
Staff
Customer Support

Oh it’s pretty ! I really like this Elvin.

Thank you so much.

Have a nice evening.

Awesome. No problem. 😀

December 2, 2020 at 2:31 pm #1564634

Mathieu

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,

December 3, 2020 at 3:42 am #1565406

David
Staff
Customer Support

Hi there,

looks like you switched to the Off Canvas Panel for the mobile menu – has this resolved the issue ?

December 3, 2020 at 7:19 am #1565904

Mathieu

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.

December 3, 2020 at 7:22 am #1565910

Mathieu

It’s okay… I’ll just shorten it and write menu. Gonna be simpler.

Regards.
Author

Posts