Create Your Header with GenerateBlocks 🤯 Say goodbye to the limitations of the customizer! 👋
ฝัง
- เผยแพร่เมื่อ 25 ก.ย. 2023
- This might be my favorite trick of the year: Creating your header with the full arsenal of the block editor (thanks to a little bit of code from my man Taylor!).
In this video I'm going to show you how you can insert your GeneratePress menu via a shortcode - and how that unlocks endless possibilities when it comes to designing and developing totally unique headers.
Get Taylor's code here: snippets.tdrayson.com/oskkjp/
Checkout the Snippet Club here: snippetclub.com/
[ 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 - บันเทิง
YES!! thank you for sharing this shortcode and the video. I designed my menu with no outside buttons or text. I did it right inside the menu and added CSS and it works great. This way it keeps my style on responsive.
For those that do not know, since the new GP update you will need to disable the primary menu. Under primary menu you should see Navigation Location. Click the dropdown and choose No Navigation. Be sure to have GP premium and activate the Menu Plus (Set up a mobile header, sticky navigation or off-canvas panel.). Then under menus you need to manually add a menu to the Off Canvas Menu. This will allow the menu to work on responsive views. Hope this helps :)
Well, you just took everything to another level. Working with the GP header is a PITA - this provides absolute control over everything, offers the ability for custom headers based on location rules and dynamic content changes when linked with ACF. Going to be interesting in implementing a custom header with sticky nav... That's another GP feature that is full of difficulties especially when using a mega menu. Great Stuff Kyle - many thanks!!!
I thank you for sharing this super video.
You are simply a great expert in Generateblocks and a super teacher.
A hug from southern Spain.
Like the other comments, this is a truly game changing video - there are SO many nuggets in here. The standard nav block is basically unusable ...I'm so happy to have seen this video. I recently found your channel and I have learned so much in the last few days (super grateful). You really know your stuff, your method of presenting makes everything nice and clear... but most importantly you know your audience well and your subject choice is absolutely spot on... thanks!
Great video! I also hate working with the core menu block. You solved another one of my problems 😉
+1
Awesome! Always a treat to watch your videos.
Thanks so much - I'm glad you enjoyed it!
Wow, this is cool! Man, I never even explored building the header out this way....opens up a lot of possibilities!
Yeah, certainly makes it more flexible, huh?
You are the man Kyle, thank you
Glad you enjoyed!
Always Great value. Thank Kyle.
Glad you enjoyed it!
Great video, just been struggling with these issues on my site so cant wait to apply this!
I'd love to know how it goes for you!
Thanks Kyle, great video (as always). Is the shortcode limited to the Primary menu? Is there a way to call a different menu?
Great video and tutorial, I have found one issue regarding Primary menu inside header, and that was the shortcode [gp_nav] not implemented and the menu looks disappeared, is that have any solution.
Thank you
Another great tutorial Kyle! but seriously I'm trying to finish this big site and you keep giving all these ways that would make it even better🤣
😂 I'll stop!
Great video! What is the colour picker you have set up on you Mac bar? That's so handy!
Hey Kyle, awesome tutorial, thanks! I have a question about the code snippet. Do I have to use the code snippet plugin to add the code, or can I use the element (hook) instead? If so, under the hook section, what location do I choose? I guess I have to check the boxes to execute shortcode and PHP. What about the priority setting? Do I leave at 10? Thanks.
Game changer 🙌🏻
Pretty epic, eh??
Hey Kyle, great GP content as always. Do you know how this approach to Nav might stack up to the default in terms of accessibility?
Nice, thanks for the tut!! Have you tried switching the order of the menu toggle with the CTA, after it becomes a hamburger, so the hamburger can be the last item and Log in and button in the middle. I think the hamburger being in the middle on smaller screen makes it less visible, while the CTA is always visible with that big bright button.
Good thinking - I'll give it a shot. Should be easy with flexbox!
Hi Kyle. I’ve completed a header based on the tut. Awesome thanks! I do have a question tho. When I was looking at the mobile view the menu wasn’t breaking into a hamburger menu. Are there settings in customizer that need to be turned on in order for this to happen? Use nav as menu on mobile?
great video, i recently did this with one of my client's project, but i used the default wordpress nav block and it was working okay as well, why didnt you used that kyle?
I've found the nav block SUPER difficult to work with. Might just be limitations in my skills.. but it felt like I had to write a TON of CSS to get it to look the way I wanted.
Hallo, Why is it that when I try to change the hook header element, there is no change in the appearance of my website?
Appreciate the video! Is there a way to make this custom header sticky?
Sure, with CSS :) Give it a class, add position:sticky;
The shortcut doesn't work, please can you explain the pre-settings needed to make it work and integrate the menu?
I was using a Site ibrary theme and I got odd behavior. But disabling Use Navigation as Header ( Customizing ▸ Layout▸ Header ) fixed this oddity. Works Great! Have you talked creating a Mega Menu using blocks?
nice video. Could U help me to made vertical menu , plz
?? .
Another great tutorial. Thank you.
Oh and the # symbol is called a ‘hash’. This is a pound sign: £ 😝
Nice tutorial as always Kyle. I wonder how you define the font for the navigation as you can't style the short code block? As far as I understand from your other video about your new starter site, you only define the body-font and headline-font in the customizer and then create a bunch of CSS variables (brilliant btw!). But I can't see you create a variable for your nav menu!? But maybe a solution could be to add the class "gb-headline-body-s" to your "GP Nav" container block in order to get the same setting as the Log In in your example header?
I think you'd either do it through the customizer>typography (like most normal people 😂) or write CSS for it.
@@TheAdminBar Sure. I was just curious to hear how you do it :-) It could be that you've come up with something clever so that you only have to make corrections in one place (CSS instead of Customizer).
Good video. been searching for the snippet part. probably better idea to move the sale portion to a preheader. less confusing.
Design it however you'd like!
This is awesome. Thank you. Do you have any way to also create a mega menu (with pictures and everything) using GenerateBlocks, in combination with this header?
There's a tutorial on snippetclub(.)com
Thanks, I had indeed seen this link on another comment down below.
However when I do everything as described on snippet club (also subscribed to get access to the paid snippets), then insert the menu in [shortcode] section of the header (as you've done in this video), the mega menu visually doesn't cover 100% (width) of the screen. It only shows right below the "[shortcode]" block in a very small and cramped way.
Is it possible to get it larger (full screen and fitting) and do you perhaps have a fix for that? :/ @@TheAdminBar
Can you create a sticky navigation with this setup?
This is very huge, thanks Kyle! I hope Gp/Gb team in the future will implement these possibilities as basic options! Ps: snippet expired
The snippet link should be fixed
Sorry about that. Thankfully @tdrayson fixed it 😅
Hi please help create a video on load more button for loop elements
Thanks for the tutorial kyle. I want to switch to gp/gb from another theme, but i'm having difficulties adding custom font. I read the add local font article but struggling to add non google font, even taking css from fontsquirrel but still no go.
Can you make video about that please?
I would just use a plugin. The brainstorm force team has one that works fine.
@@TheAdminBar oh? I used that with my astra theme. I never really tried that since I thought it's exclusive for brainstorm. Thanks man!
@@TheAdminBar tried to install a generatepress theme and disable my current astra theme but leaving my font plugin active. Still can't see my futurapt in my typhography. With the brainstorm font plugin I should be able to see it withouth additional css right?
I'm new to trying to work with CSS and generatepress itself, but with the nav menu, I love how your demo works, but wondering how to set the background color of it. It's currently white on a site that I'm trying to work on to learn how to use all this. I'd like to set the color to a different color if possible.
Just use the color options in the Customizer.
@@TheAdminBar 🙈….. didn’t even think of that thanks. And thanks for all the great videos
I have another question. What is the tool you are using at 8:05 to pick the color? Obviously love the video, too ;-)
It's just the system color picker on Mac
@@TheAdminBar thanks. I am VERY new to MAC so I am a little lost. I only find "Digital Color Meter" on my mac which looks different and is not that little drop icon in the top bar. But I will figure it out and leave you to it.... Thanks again for the great videos.
Great video! 👌
Just a heads up though, the thumbnail is missing a 'T'. 😉
🙄 ugh, you're right 😭 Thank you, Nicholas!
Not sure if missing something but is the snippet needed? Can't you just build directly in GP Elements then use the header hook?
You can't insert the menu that GP produces without the snippet. You could use the nav block, but that leaves a lot to be desired.
Can i use this type of header for blogs
Sure! Just make sure the Element is set to display on your blogs!
Great video Kyle but it’s obvious that the no-ul snippet is a “no brained” to most, because I don’t see any questions about it, but I can’t get mine to work.
I gave my header text a class of no-text-ul
In the customizer, in Additional CSS I added:
.no-text-ul {
text-decoration: none;
}
But if I use: text-decoration: double underline hotpink;
The text displays the same as original except that it has the double underline and the bottom line is hotpink.
I can’t get the original underline to go away.
It's probably just not specific enough. Try targeting the "a" after the no-text-ul
BOOM! 👍🏼👍🏼
Thanks Kyle!
Is this how you created the mega menu on the TAB site?
No, that was done here: snippetclub.com/building-a-mega-menu-with-generatepress-blocks/
Gp Nav shortcode is not working
For me it's working in that it brings in the nav into the element - but is not disabling the primary nav - so now I have two nav bars at the top... Disabling the new nav that I'm trying to create until the original nav can actually be hidden
@@mitchmartinez1031 go to customizer - header and disable header as nav
Why not just avoid the snippit and use the WP navigation block with this method? Then you can choose the menu you want instead of being limited to one.
well that's certainly not simple. 😂
What are you finding difficult?
this thing is not working anymore i think
Snippet has expired buddy
add_shortcode ( 'gp_nav', 'tct_gp_nav' );
function tct_gp_nav( $atts ) {
ob_start();
generate_navigation_position();
return ob_get_clean();
}
The snippet link should be fixed
Sorry about that. Thankfully @tdrayson fixed it 😅