Create Your Header with GenerateBlocks 🤯 Say goodbye to the limitations of the customizer! 👋

Рет қаралды 10,846

Күн бұрын

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.tdray...
Checkout the Snippet Club here: snippetclub.com/
[ Video Created and Produced by Kyle Van Deusen ]
👏 COMMUNITY
Join our free community: theadminbar.co...
(voted best WordPress community!):
🔴 EVENTS
See past and upcoming live interviews & workshops: theadminbar.co...
🎁 PRODUCTS
Sell more care plans with The Website Owner's Manual: theadminbar.co...
Write proposals in less than 15 minutes with this template: theadminbar.co...
Fill your prospect pipeline in this 3-week challenge: theadminbar.co...
5 Airtable templates I use to run my agency: theadminbar.co...
📨 NEWSLETTER
Stay up-to-date with the best from in and around The Admin Bar: theadminbar.co...
🤖 MISC
Visit our website: theadminbar.com
Product endorsements: theadminbar.co...
Kyle on Twitter: / kylevandeusen

Пікірлер: 86

@NittyGrittyTechy 3 ай бұрын

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

@upstatenyrider8413 7 ай бұрын

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!!!

@anarosiris 6 ай бұрын

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.

@JulianStark 10 ай бұрын

Great video! I also hate working with the core menu block. You solved another one of my problems 😉

@torbenheikelvinther4535 10 ай бұрын

@IainMace 6 ай бұрын

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!

@landonporter77 11 ай бұрын

You are the man Kyle, thank you

@TheAdminBar 11 ай бұрын

Glad you enjoyed!

@hamid-n9 11 ай бұрын

Awesome! Always a treat to watch your videos.

@TheAdminBar 11 ай бұрын

Thanks so much - I'm glad you enjoyed it!

@adamwrightdesign 10 ай бұрын

Wow, this is cool! Man, I never even explored building the header out this way....opens up a lot of possibilities!

@TheAdminBar 10 ай бұрын

Yeah, certainly makes it more flexible, huh?

@user-ix7oi1mf3r 11 ай бұрын

Always Great value. Thank Kyle.

@TheAdminBar 10 ай бұрын

Glad you enjoyed it!

@jamesgedney-higham456 11 ай бұрын

Great video, just been struggling with these issues on my site so cant wait to apply this!

@TheAdminBar 10 ай бұрын

I'd love to know how it goes for you!

@EdHallPhotoFL 11 ай бұрын

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🤣

@TheAdminBar 11 ай бұрын

😂 I'll stop!

@markatgraf1x 11 ай бұрын

Game changer 🙌🏻

@TheAdminBar 10 ай бұрын

Pretty epic, eh??

@dmdesign 10 ай бұрын

Thanks Kyle, great video (as always). Is the shortcode limited to the Primary menu? Is there a way to call a different menu?

@yGrumpyStegosaurus 11 ай бұрын

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.

@TheAdminBar 11 ай бұрын

Good thinking - I'll give it a shot. Should be easy with flexbox!

@ProudPupDigital 10 ай бұрын

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?

@Simulacra001 4 ай бұрын

Another great tutorial. Thank you. Oh and the # symbol is called a ‘hash’. This is a pound sign: £ 😝

@jeffbarnhart6441 10 ай бұрын

Good video. been searching for the snippet part. probably better idea to move the sale portion to a preheader. less confusing.

@TheAdminBar 10 ай бұрын

Design it however you'd like!

@bradenrooke2349 5 ай бұрын

Great video! What is the colour picker you have set up on you Mac bar? That's so handy!

@Glow_Machine 3 ай бұрын

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?

@leonardo_iann 11 ай бұрын

This is very huge, thanks Kyle! I hope Gp/Gb team in the future will implement these possibilities as basic options! Ps: snippet expired

@tdrayson 11 ай бұрын

The snippet link should be fixed

@TheAdminBar 11 ай бұрын

Sorry about that. Thankfully @tdrayson fixed it 😅

@TedBream 9 ай бұрын

Appreciate the video! Is there a way to make this custom header sticky?

@TheAdminBar 9 ай бұрын

Sure, with CSS :) Give it a class, add position:sticky;

@torbenheikelvinther4535 9 ай бұрын

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?

@TheAdminBar 9 ай бұрын

I think you'd either do it through the customizer>typography (like most normal people 😂) or write CSS for it.

@torbenheikelvinther4535 9 ай бұрын

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

@SoniaZannoni Ай бұрын

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.

@BradWarren 5 ай бұрын

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?

@NicholasZein 11 ай бұрын

Great video! 👌 Just a heads up though, the thumbnail is missing a 'T'. 😉

@TheAdminBar 10 ай бұрын

🙄 ugh, you're right 😭 Thank you, Nicholas!

@user-nu8xl3mn5w 6 ай бұрын

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?

@TheAdminBar 6 ай бұрын

There's a tutorial on snippetclub(.)com

@user-nu8xl3mn5w 6 ай бұрын

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

@strikerd8821 2 күн бұрын

do I need a plugin to be able to ad Elements to Appearance menu? Cause in current version of WP with a GeneratePress Child- theme I dont have such "Elements" option. thx in advance.

@strikerd8821 2 күн бұрын

Looks like Elements is only available in premium version of GP. Is there another way how I can do it without to pay for premium?

@troyphillips6820 5 ай бұрын

Can you create a sticky navigation with this setup?

@CGInnovation-js6rk 2 ай бұрын

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.

@TheAdminBar 2 ай бұрын

It's probably just not specific enough. Try targeting the "a" after the no-text-ul

@CGInnovation-js6rk 2 ай бұрын

BOOM! 👍🏼👍🏼 Thanks Kyle!

@syedwasiqbukhari 11 ай бұрын

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?

@TheAdminBar 10 ай бұрын

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.

@angelhernandezbiz Ай бұрын

The shortcut doesn't work, please can you explain the pre-settings needed to make it work and integrate the menu?

@user-tw5cu1ug9b 7 ай бұрын

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

@Presstwood 2 ай бұрын

Not sure if missing something but is the snippet needed? Can't you just build directly in GP Elements then use the header hook?

@TheAdminBar 2 ай бұрын

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.

@dynurha Ай бұрын

Hallo, Why is it that when I try to change the hook header element, there is no change in the appearance of my website?

@webdev.vidyutpal 9 ай бұрын

Gp Nav shortcode is not working

@mitchmartinez1031 9 ай бұрын

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

@webdev.vidyutpal 9 ай бұрын

@@mitchmartinez1031 go to customizer - header and disable header as nav

@evanbaker6375 8 ай бұрын

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.

@TheAdminBar 8 ай бұрын

Just use the color options in the Customizer.

@evanbaker6375 8 ай бұрын

@@TheAdminBar 🙈….. didn’t even think of that thanks. And thanks for all the great videos

@anjak.8583 10 ай бұрын

I have another question. What is the tool you are using at 8:05 to pick the color? Obviously love the video, too ;-)

@TheAdminBar 10 ай бұрын

It's just the system color picker on Mac

@anjak.8583 10 ай бұрын

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

@thantran3051 10 ай бұрын

nice video. Could U help me to made vertical menu , plz ?? .

@JoeMendel 9 ай бұрын

Is this how you created the mega menu on the TAB site?

@TheAdminBar 9 ай бұрын

No, that was done here: snippetclub.com/building-a-mega-menu-with-generatepress-blocks/

@APRR123 10 ай бұрын

Hi please help create a video on load more button for loop elements

@user-nw7js1tc1b 8 ай бұрын

Can i use this type of header for blogs

@TheAdminBar 8 ай бұрын

Sure! Just make sure the Element is set to display on your blogs!

@aditmb 10 ай бұрын

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?

@TheAdminBar 10 ай бұрын

I would just use a plugin. The brainstorm force team has one that works fine.

@aditmb 10 ай бұрын

@@TheAdminBar oh? I used that with my astra theme. I never really tried that since I thought it's exclusive for brainstorm. Thanks man!

@aditmb 10 ай бұрын

@@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?

@thedoctor16 9 ай бұрын

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.