[Resolved] How to right justify navigation search icon

[Keith]

I have enabled the navigation search icon.

It is positioned correctly for mobile and desktop (right-justified in menu bar). However in tablet, if the menu items overflow to a second row, then the search icon jumps down to form the third row and is left justified.

This doesn’t happen with a second site I have, and I cannot understand why this is happening just on this site.

This is the site with the problem https://www.friendsofarandabushland.org.au/

This is the other site I have with no problem https://test.walkinginfrance.info/

Thanks

[Leo]

Hi there,

That’s weird. This is what I’m seeing using the iPad simulator from Chrome:
https://www.screencast.com/t/NWBPtsJApXQ

Is that not what you are seeing?

[Keith]

Hi Leo,

Thanks, but no. I am using an Android tablet, and I am seeing what I described.

Is it possible for me to send you a screen shot?

Thanks

[Elvin]

Hi,

You can use Loom or CloudApp to record your screen and share the link here. 🙂

[Keith]

Hello Elvin,

Here is a screenshot https://share.getcloudapp.com/llunBe0R

of the incorrectly left-justified navigation search icon

And now a correctly right-justified search icon

https://share.getcloudapp.com/jkuYzjR2

Why are the two search icons behaving so differently?

Thanks

Keith

[Elvin]

Why are the two search icons behaving so differently?

The first one was inserted as a menu-bar item while the second search icon is added as a sibling to the menu items.

This occurrence is the difference between flexbox and floats.

The first site is set to flexbox while the second one is using floats on its Appearance > Customize > General settings.

[Keith]

Dear Elvin,

That’s brilliant, and so simple!

Cheers

Keith

[Elvin]

No problem. Glad to be of any help. 😀

[Author]

Posts