[Support request] How to recreate this type of header

[casey]

First of all, thanks for the amazing support. You guys are amazing.

Now here’s what I’m trying to figure out how to do… I’d like to recreate this header (https://imgur.com/a/J84iIj0) with the logo in the middle, search bar to the right, hamburger menu and text to the left (I’ll have Donate instead of Subscribe).

Then once it hits 767px, I’d like the search bar to only be the the search icon and swap spots with the “Donate” text (https://imgur.com/a/TUz1Qqb).

I hope this is not too much to ask for, thanks for the help.

[Ying]

Hi Casey,

Glad that you are happy with our support!

So in order to make the menu toggle to show on desktop, you’ll set a high value for mobile break point, for eg.5000px.
https://docs.generatepress.com/article/mobile-navigation/#initiating-the-mobile-navigation-at-a-different-width

For the Donate button, you can use a block element - hook, hook name would be generate_menu_bar_items.
https://docs.generatepress.com/article/block-element-overview/

Enable the search for primary navigation at Appearance > Customize > Layout > Primary Navigation.

Once these are done, there will be some CSS and PHP filter required. We can have a look and point you in the right direction then 🙂

[casey]

Hey, just wanted to do a few other things before doing the header.

But I’ve done the first step, I set it to 5000px. However, now I’m a little confused. For the donate button, once I click on “Add New Element”… do I chose hook or block? The only way I see the “generate_menu_bar_items” is when I choose hook but the thing is I have no clue what to put in that top section (I guess that’s where you type some code).

[casey]

I’ve done all the steps, what’s the CSS and PHP filter I need to use? Thanks.

[casey]

I’ve made it only show on one page (URL attached below) until everything is done.

[David]

Hi there,

try adding this CSS to create the 767px arrangement:

@media(max-width: 767px) {
    .menu-bar-items {
        flex: 1;
        justify-content: space-between;
    }
}

[casey]

Hey David,

I’ve put that in, but it’s moving the “Donate” button to the left and not the search icon.

[casey]

But on my other pages the search bar is right beside the hamburger icon (as it should be). It’s just when the Donate Button is added like on the URL I mentioned.

[David]

I can correct the CSS above to switch the order – but i need to know where the Donate button is being displayed – what are the Display Rules you’re using ?

[casey]

No problem, it’s the same URL I attached in the private information part. I’ve included it again (I’ll keep it on this URL until we figure everything out). Btw, thanks for your patience.

[casey]

The display rule is Post and then I chose the URL I attached.

[Ying]

Hi Casey,

Try this CSS:

#mobile-header .menu-toggle {
    margin-right: 0;
}
.menu-bar-items {
    flex: 1;
}
.main-navigation .menu-bar-items a.custom-button {
    margin-right: auto;
}

[Author]

Posts