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

[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

[David]

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?

[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

[Elvin]

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. 🙂

[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 !.

[Ying]

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?

[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!

[Fernando]

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! 🙂

[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

[David]

Hi there,

add this CSS to align the menu hamburger to the left:

.site-header .mobile-menu-control-wrapper {
    margin-left: unset;
}

[Cristiano]

It worked! Thank you really much!!

[David]

Glad to hear that

[Author]

Posts