[Support request] How To Place Search Box Below The Logo?

[Jaime]

Hey, GeneratePress Team!

How can I place the search box below the logo in mobile view and front of the logo?

Please see this screenshot, this is how I want: https://ibb.co/LtwSzRn

Thanks for the help in advance!

[Leo]

Hi there,

Any chance you can link us to the site in question so I can see your current layout?

You can use the private information field.

Let me know 🙂

[Jaime]

I have shared both the sites URL.

I want to create exact same primary navigation, for both mobiles as well as the desktop view… As this site is having

[Leo]

Can you disable LiteSpeed cache so I can inspect the code better?

[Jaime]

Disabled the LiteSpeed cache.

[Leo]

So first you want to modify the header padding with the mobile toggle activated so the content is centered:
https://www.screencast.com/t/e2PfqWDdZGL
https://docs.generatepress.com/article/header-padding/

Then we can use this CSS to reverse the order of logo and search field:

@media (max-width: 768px) {
    .inside-header {
        display: flex;
        flex-direction: column-reverse;
    }
}

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

[Jaime]

I did that, change the padding in header and also applied the CSS you shared above.

How can I place the menus https://prnt.sc/uvb2tu in one line as in the example site? And also how can I move menus only to right side, beside the cart button?

[David]

Hi there,

to make those menu items all fit on one row – you would have to reduce the Typography > Primary Navigation to around 10px and the menu item width to around 5px for to fit on the smallest mobile devices.

The problem with that is those links become difficult to click and google will flag that as a UI/UX issue.

[Jaime]

Okay! Got you!

And how can I move them to the right side, only menus?

[Leo]

So we are going to use a toggle instead now right?

If so can you change the mobile navigation breakpoint back to the default 768px?
https://docs.generatepress.com/article/mobile-navigation/#initiating-the-mobile-navigation-at-a-different-width

[Jaime]

No, I want to move the menus on right for pc view only.

[Leo]

Have you tried the alignment option?
https://docs.generatepress.com/article/navigation-layout/#navigation-alignment

[Author]

Posts