[Resolved] The X of the search box in a sticky logo with a menu

[Mathieu]

Hi Tom,

I have a bit of an issue with the search box in mobile. As soon as it gets sticky and only if there’s a logo in the sticky navigation, the search magnifying glass moves. That’s okay but then the search X ends up in the middle of the search area and it’s worst if you increase font size.

I believe the X should be at the extreme-right of the navbar in any case.

Do you have a trick for that? Here’s a screenshot.

Still not sure if I am proud of my screenshot animation or not, lol.

Have a nice weekend.

[Leo]

Hi there,

I’m seeing a different mobile layout when using the Chrome simulation:
https://www.screencast.com/t/TwRq5R36G

Can you confirm?

Can you also make sure this is done?
https://www.screencast.com/t/etzzs9gs0Ir

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Mathieu]

This is not a caching matter, your screenshot is true but it changes once you scroll down and it gets sticky… Just scroll down

[Leo]

I’m not saying that the caching plugin is causing the issue – Disabling the caching plugin allows us to inspect the code better so we can determine the issue which is why we always ask for it.

Can you please do that first?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Mathieu]

I sent you a test version with no caching.

[Leo]

Give this CSS a shot:

@media (max-width: 768px) {
    .search-item.close-search a {
        position: fixed;
        right: 0;
        top: 0;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Mathieu]

And that was super super quick and efficient.

Thanks Leo

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts