More Flexible Header / Navigation Layouts with GeneratePress
HTML-код
- Опубликовано: 14 ноя 2022
- 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.
Speaking of CSS, you can grab all the code I used in this video here, from my agency website: ogalweb.com/modern-navigation...
Get GeneratePress: theadminbar.com/generatepress/ (affiliate)
Get GenerateBlocks: theadminbar.com/generateblocks/ (affiliate)
[ Video Created and Produced by Kyle Van Deusen ]
👏 COMMUNITY
Join our free community: theadminbar.com/group/
(voted best WordPress community!):
🔴 EVENTS
See past and upcoming live interviews & workshops: theadminbar.com/events/
🎁 PRODUCTS
Sell more care plans with The Website Owner's Manual: theadminbar.com/products/wom/
Write proposals in less than 15 minutes with this template: theadminbar.com/products/easy...
Fill your prospect pipeline in this 3-week challenge: theadminbar.com/products/pros...
5 Airtable templates I use to run my agency: theadminbar.com/products/agen...
📨 NEWSLETTER
Stay up-to-date with the best from in and around The Admin Bar: theadminbar.com/friday-chaser/
🤖 MISC
Visit our website: theadminbar.com
Product endorsements: theadminbar.com/products/#end...
Kyle on Twitter: / kylevandeusen
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.
I was thinking about this recently. You saved me some time in working this out. Thanks!!
Glad to hear it!
Easy to follow and very helpful. Thank you!
Thanks!
Amazing Content Kyle 👍
Thanks, Muhammad! Really glad you enjoyed it! 🙌
Very usefull. Thank you 🎉
Great! Thanks for watching!
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?
thanks so much. How do you make the button smaller?
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?
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
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.
Hi, I have worked out a solution using buttons - but I would love to know if there is a more elegant solutions.
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
Thanks, Syed. I actually don't build out headers using Elements because I really don't like the native WP "navigation" block (it's pretty limited). Hopefully one day that wont be the case, because if you could just use Elements, the possibilities would be endless!
You CAN do it now without the nav element, but you lose a LOT of accessibility just trying to build out your menus with divs and paragraphs.
@@TheAdminBar thank you sir.
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
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.
It needs this selector to keep from styling the last item of the submenu .main-navigation .main-nav>ul>li:last-child>a
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.
It's possible, but then you have to use the WP core "Navigation" block, which I don't care for.
cool stuff, give me more .-)
Trying my best to get something uploaded at least once a week ❤ Between the agency, the group, our masterminds, etc. it's tough!
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.
Just wrap these instructions in a media query that only targets desktop :)
how do you turn it into header with search button? I think every theme has it besides generatepress
It's built right into GP - has been since I started using it years and years ago. docs.generatepress.com/article/navigation-search/
@@TheAdminBar thank you
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