[Support request] Placing header search box to right of menu which features in middle

[Fernando]

Hi! Sorry for the late response. Was out due to an illness. I can’t seem to locate the scrollbar. Are you still encountering this issue? If so, kindly let us know. 🙂

[robchanoi]

Hi – yes – it’s still featuring canvass menu.

[Fernando]

Can you try disabling the Label in your Search Block?

Example: https://share.getcloudapp.com/L1uX51WO

Kindly let us know how it goes.

[robchanoi]

Have unselected left align, still there, tried full,wide,center

[Fernando]

What version of WordPress are you using?

If you click on More Options, do you see an icon like this?: https://share.getcloudapp.com/d5uO44l5

If you do, can you disable/un-highlight it?

Can you take a screenshot as well of the More Options Icon(the 3 dots) opened?

Hope to hear from you soon!

[robchanoi]

5.5.9

I have deleted it now from the menu, sorry, wasnt working for me in mobile, previous search history obscuring mobile keypad plus maybe not best spot. I will place it top left if that’s doable, opposite to nav top right – researching now.

cheers Fernando

[Fernando]

I see. Glad you found a better spot to place it.

You can try enabling Navigation Search in Appearance > Customize > Layout > Primary Navigation.

Then we can try placing the Search Icon to the left with custom CSS if you prefer.

Kindly let us know if you’ll need assistance. Cheers!

[robchanoi]

Thank you.

I have enabled it. Yes, some css wld be great thank you.

[Fernando]

To clarify, do you want the same on all screen sizes?

If so, in Appearance > Customize > Layout > Primary Navigation, set the Mobile Menu Breakpoint to 0, then add this code in Appearance > Customize > Additional CSS:

ul#menu-menu-2 {
    display: flex;
    justify-content:space-between;
}

.inside-header.grid-container.grid-parent {
    position: relative;
}

.site-logo.page-hero-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

nav#site-navigation {
    width: 100%;
}

li.search-item {
    order: -1;
}

Otherwise, if you just want this to occur on Tablet and Desktop, kindly let us know.

[robchanoi]

Thanks. Yes was thinking opposite for tablet / pc if thats ok, thank you.

[Fernando]

To clarify, would you like the menu hamburger icon on the left, and the search icon on the right on Desktop/Tablet?

If so, replace the current code with this one:

ul#menu-menu-2 {
    display: flex;
    justify-content:space-between;
}

.inside-header.grid-container.grid-parent {
    position: relative;
}

.site-logo.page-hero-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

nav#site-navigation {
    width: 100%;
}

@media (max-width: 768px) {
       li.search-item {
        order: -1;
    }
}

Kindly let us know.

[robchanoi]

Hi – thats great – thank you, although when clicking the nav top left in pc it opens top right still. Also the search box stretches across whole screen, not sure if this is how it should appear.

[Fernando]

I see. To modify this, go to Appearance > Customize > Layout > Off Canvas Panel, the modify Side to left.

Reference: https://docs.generatepress.com/article/off-canvas-panel-overview/

Kindly let us know how it goes.

[robchanoi]

Doh. Thanks Fernando.

I have a question also which kind of relates but not to main topic title so will start new thread.

Thanks for all your help on this one.

[Fernando]

You’re welcome Robchanoi!

[Author]

Posts