How to can I have a header with logo/menu/search right-align and left 2 menu?

This topic has 11 replies, 5 voices, and was last updated 4 years, 1 month ago by David.

Viewing 12 posts - 1 through 12 (of 12 total)

Author

Posts
September 27, 2021 at 6:28 pm #1944993

Cristiano

Hello everyone!

How to can I have a header with logo/menu/search right-align and left 2 menu?

as the image below:

Could you help me get a header similar to this site:

I sent inspiration site in the sensitive area.

thank you very much for your attention

September 28, 2021 at 3:50 am #1945363

David
Staff
Customer Support

Hi there,

tricky one that.
What will the ‘categories’ item be in your menu ? Is it just a link or does it also have a sub menu?

September 28, 2021 at 5:46 pm #1946232

Cristiano

Hi David, thank you so much for your attention!

I think the way the image below would be more suitable for this project of mine.

Logo > search box > Primary Menu

September 28, 2021 at 11:00 pm #1946358

Elvin
Staff
Customer Support

Hi Cristiano,

Are you going to use a custom Search bar from a third-party plugin for this one?

IF yes, I believe you can hook in your custom search bar using generate_after_logo hook so the search icon appears between the logo and the menu items. 😀

We then do the rest of the layout with CSS.

If not, can you link us to the page in question? To observe the page and see what the site already has to have an idea which way to point you to. 🙂

April 14, 2022 at 1:00 pm #2189099
Cristiano
Hello, I suppose I’ve been gone for a while, sorry about that, but I’m back now.

I followed your advice and used “generate after logo” to construct a custom search bar.

I attempted to make it work using some code I saw on the forum, but it didn’t function very well, particularly in the mobile version.
```
.menu-bar-items {
    order: -1;
}
nav#site-navigation {
    width: 100%;
}
.inside-navigation.grid-container {
    width: 100%;
    justify-content: space-between;
}

.inside-header .wp-block-search{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 101;
}
```
I’m sending you my test site in the Private section so you can check it out because the results I’ve gotten so far haven’t been good.

Thank you for your attention !.
April 14, 2022 at 3:22 pm #2189170

Ying
Staff
Customer Support

Hi there,

It seems your site is already using the layout you are trying to achieve on desktop.

Can you tell me what layout you are after on mobile?

April 14, 2022 at 4:39 pm #2189208

Cristiano

I’d want to know how to adjust the size and border of the search box.

The mobile version is broken, as shown here:

https://i.imgur.com/9yvzGu8.png

I envisioned the mobile summer like follows:

https://i.imgur.com/wvP35KD.png

logo in the center. Text box below the logo with a menu on the edge

Thanks!

April 14, 2022 at 6:08 pm #2189236
Fernando
Customer Support
Hi Cristiano,

To modify the border of the search box, try adding this CSS in Appearance > Customize > Additional CSS:
```
.site-header form.wp-block-search .wp-block-search__inside-wrapper {
    border: solid 3px black;
}
```
To modify its width on Desktop:
```
@media (min-width: 1025px) {
    /* CSS in here for desktop only */
    .site-header form.wp-block-search {
        width: 360px;
    }
}
```
Now, with regards to the look you’re aiming for on mobile, maybe we can apply this on tablet as well because the space gets cramped on this view as well. Basically, we need to unset the position you set on the search box, and and then set the site branding to absolute instead. Here is a code you may build off from:
```
@media (max-width: 1024px) {
    .site-header form.wp-block-search {
        position:unset;
        left: unset;
        transform: unset;
    }
    .site-header .inside-header {
        flex-wrap:wrap;
        position: relative;
    }

    .site-header .site-branding {
        position:absolute;
        left: 50%;
        top: 20px;
        z-index:10000;
        transform:translate(-50%, 30%);
    }
    .site-header form.wp-block-search {
        width: 100%;
    }

}
```
Kindly modify the values to your preference. Hope this helps! 🙂
April 15, 2022 at 3:01 am #2189483

Cristiano

Thank you for your help.

1 – I only need to relocate the hamburger menu on the tablet/mobile to the same side as the hamburger on the desktop canvas.

2 – I tried using the code below to disable the secondary menu in ablet/mobile, but it didn’t work:

https://docs.generatepress.com/article/disable-secondary-navigation-mobile-menu/

Thanks

April 15, 2022 at 4:44 am #2189562
David
Staff
Customer Support
Hi there,

add this CSS to align the menu hamburger to the left:
```
.site-header .mobile-menu-control-wrapper {
    margin-left: unset;
}
```
April 16, 2022 at 5:25 pm #2190991

Cristiano

It worked! Thank you really much!!

April 17, 2022 at 3:20 am #2191179

David
Staff
Customer Support

Glad to hear that
Author

Posts