How to recreate this type of header

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 :)

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

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

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

Hi there,

try adding this CSS to create the 767px arrangement:

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

Hey David,

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

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.

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 ?

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.

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

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;
}