More Flexible Header / Navigation Layouts with GeneratePress

I'll admit, themes like Astra and Kadence give you a lot more flexibility and control over the layout of your header, logo, and navigation items.

But I ain't switching themes!

So here's a quick video on how to create a few different modern header layouts with just a few simple lines of CSS.

[ Video Created and Produced by Kyle Van Deusen ]

👏 COMMUNITY

(voted best WordPress community!):

🔴 EVENTS

🎁 PRODUCTS

📨 NEWSLETTER

🤖 MISC

[pringletech]

Kyle, Thanks as always for your video. I got a project to use this tip. It worked very well. But heads up to others, I did have to wrap the CSS in a media query so that the hamburger menu would be right justified to the logo and not centered a row below it.

[jhc]

I was thinking about this recently. You saved me some time in working this out. Thanks!!

[kirstencarbone]

Easy to follow and very helpful. Thank you!

[Melodymakerdk]

Thank you so much for this one, Kyle - really helpful! as always! 👏 However, as other has already adressed, it affects the submenu. How to fix that?

[armstronglazenby]

thanks so much. How do you make the button smaller?

[afterwork]

Hello Kyle, thank you so much for this tutorial. It worked smoothly on my site. The only problem is it also affects the sub menu navigation 😥 If you have time and don't mind, can you inform me what's the code the exclude the custom menu so it doesn't affect the sub menu part? Thank you again in advance

[syedwasiqbukhari]

thank you, i was waiting for this video. one request, please also plan a video on how can we design our headers using elements block, so that we can have more things to do in our headers and in a more convenient way to design them. thank you

[darrellvanzyl]

Hello Kyle, Is it possible to build a footer in GP with a horizontal menu? I understand I could use a footer widget, but that gives you a vertical list, which won't suit the rather large number of admin-type pages I would like to relegate to the footer rather than the header.l

[darrellvanzyl]

Hi, I have worked out a solution using buttons - but I would love to know if there is a more elegant solutions.

[davidsonzed]

Hey, can you make a video on how to make sticky transparent shrink menu with GeneratePress? does it have a built-in feature like this? or can you make a custom css for that?

[techguidesgr]

Great video! One problem for me is that if you have any sub-categories in your menu, the CSS code provided will make every signle last sub-category a button.

[ErinHewett]

This works great on a simple menu with no submenu items. But with a submenu, it keeps styling the last item of the submenu like the last item button link on the main menu. I can't figure out how to keep the last submenu item from taking on the styling. Any ideas would be appreciated.

[creativicial]

What about the position of the mobile view? I've tried it like the one in this video, but the toggle menu moves to the middle position.

[hello-leadway]

Hi Kyle, just for my understanding, this was all created with the standard Header inside GeneratePress customizer settings.
Am i correct to assume that it would be easier to achieve such a header by using GenerateBLOCKS and creating a Header element from scratch which would then replace the standard GeneratePress header? I am new to GP & GB and I'm actually wondering if it's possible or even easier to achieve the header layouts you are showing with GenerateBlocks instead of GeneratePress. Thank you.

[aijokker]

how do you turn it into header with search button? I think every theme has it besides generatepress

[armstronglazenby]

I figured it out, resize the button try margin: 5px; in the static and hover settings, and on a new line try
.main-navigation .main-nav ul li a
{ line-height: 45px;}
i got generate press free version so i cant resize much