Placing header search box to right of menu which features in middle

Hi - as per recent messages, canvass menu set to left side not closing - pls see below.

Also, header logo is now barely clickable on desktop, may be tablet/mobile also.

Tks

What changes have you recently made that has added the black block on your page ?

What changes have you recently made that has added the black block on your page ?

The changes that were recommended on this thread. To align nav top left - this is what creates the black block.

Hi Robchanoi,

Can you try setting setting it to left temporarily once more, and I’ll see what’s occurring?

Kindly let us know once you’ve done so.

Hope to hear from you soon.

Hi - sorry, missed your last update - cld u kindly advise when you are ready to take a look and I will set to left.
Header logo no longer clickable also.

Thank you.

For the logo, can you go to Appearance > Customize > Additional CSS and look for this code:

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

Then, kindly replace it with this one:

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

Then, for your menu, you can change it back and I can take a look today whenever you’re ready as well.

Hope to hear from you soon!

Thanks Fernando on the logo being clickable again but the canvass menu is jutting out with it enabled left - pls see site.

It’s caused by a plugin conflict with Lightweight Grid Columns I think.

Can you try #1 here to be sure?: https://docs.generatepress.com/article/debugging-tips/

It would be good to take a backup of your site before doing so.

Kindly let us know how it goes!

Hi,

I don't have the time right now to go through that process so I will return it to nav right search left on desktop - to confirm I should erase the additional css and do something else? as I have tried this but no joy - here is what I have in add 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%;
}

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

Thanks

Yes, there’s a conflicting CSS coming from a third party plugin which seems to be causing the issue when you set the Off Canvas menu to left.

You may keep that CSS if you want your menu at the left, the logo in the middle and the search icon at the right.

You’re code is missing the z-index though which I mentioned recently.

This one:

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

Should be this:

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

Hope this clarifies.

Hi,

I have changed the add css as above but the left canvass menu still jutting out.
I will return it to - nav right search left on desktop – to confirm, which part of the add css should I remove pls?

To clarify, do you want to move the Menu button back to the right as well?

These CSS alter the look of your Header where the Menu Button, Logo and the Search Icon. If you prefer the menu button at the left, the logo at the middle, and the search icon at the left, you may keep all the code.

Kindly let us know.

Yes - I would like to return the "menu button back to the right and search to the left on desktop" please so the canvass menu opens and closes properly as I do not have time to go through the process you sent me a link to.

Are you saying this will not work either?

Thank you for clarifying. It will work. You can replace the code you have with this:

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%);
    z-index: 10000;
}

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

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

li.search-item.menu-item-align-right.active.close-search {
    float:unset;
    position: absolute;
    right:0
}

Kindly let us know how it goes.