Shrink Header in Divi Theme Builder - NO CODING
If you have created a awesome header in your theme builder and you don't know how to shrink it? This is the way - without any coding!
👇🏻👇🏻👇🏻 Start here 👇🏻👇🏻👇🏻
Do you want to support my channel? Leave a like or buy Divi / Elementor Pro with 10% discount via the link below. That will help me enormously to create these free videos for you and keep going!
⇒ Software that I recommend:
✅ Divi 10% discount ⇒ https://wp.discount/divi-discount/
✅ Elementor Pro ⇒ https://wp.discount/elementor-pro-dis...
✅ SiteGround 70% discount ⇒ https://wp.discount/siteground-discount/
✅ WP Rocket 10% discount ⇒ https://wp.discount/wp-rocket-discount/
I want you to succeed with your website, so lets get started.
⏱️Timestamps⏱️
0:00 Intro
0:30 Shrinking your header
✅For tips and tricks on getting the most out of Divi and WordPress, don't forget to subscribe: https://wpressdoctor.com/sub
📖Transscript📖
Hey guys what's up, its the WordPress doctor here, and maybe you have been searching the entire internet to find how to shrink your header with no coding within your Divi Theme Builder. It is pretty easy if you know how. So we're going to create this. If you scroll down your header, just goes into wide and it just gets smaller. You can change it also that it doesn't go full width or 90% that we've changed it, but I will show you exactly in this very short video. Alright, let's have some fun. I have created this header for my website. This is actually my website tutorial header which I used in "How to create a pro website 2021". So, if you didn't see that already, go watch it, you will learn a ton of cool stuff and how to create a professional website how I create them for my clients. What I created - let me show you in the wireframe view - is pretty easy just a section, a row, a menu and a social media follow. This is all there is for this module. Now, how are we going to create it that when you slide down, things get a little bit more smaller? Well, I'm going to show you right now, just go into the 'Section Settings', right here and we go to 'Advanced', and then we go to 'Scroll effects', right there, and what you need to do is you need to change the 'Sticky position' to 'Stick to top'. This way, your section will always stay on top when you scroll, that is the basis. Just press the 'Save changes' button right there. And now I'm going to show you a little trick. If you go to your 'Menu settings' of your module. You go to 'Design', and you go to 'Sizing'. And here you see, you have a 'Logo max height'. But when I hover my mouse over it you will see one its called 'Sticky'. If you press it, you can now go to 'Sticky' right there, and we can change the 'Logo max height' to the sticky size of, well let's say 75 pixels? No it's too big. Let's make it 50 pixels. Remember you have to try out for your website what works perfectly. I'm going with 40 pixels, right there. So, if I also want to change the size of my font. It's also possible. Just go to.... just go to 'Menu text' right here, and you go to your 'Menu text size' and there is an another button, the sticky button. Use it, and then we go with 15 pixels, or maybe even 13 pixels, it's a bit small but I think it's nice. Press 'Save Changes'. Then you go to the 'Row Settings' right there. You go to 'Design', you go to 'Spacing', and then we go to also to the 'Padding', when you are in sticky modus, right there. I'll have to go with zero padding. And then we go to 'Sizing', and then you go to your width. When you're in sticky mode, I want this to be, well, let's say, 90%. And then you go to 'Max Width', that also want this in sticky mode to be 100% right there. So now it just slides, also to the sides. If you don't like it just remove this one like this and then it just stays there. But in this example, we're going to use the sticky modus to also make it more wider. That is awesome. And we're going to save this header right here. And then we're gonna look at the front end, how it looks. And then when we have our beautiful header on the front end, when you just scroll down it will just easily just shrink. That is amazing. So now you know how to create a shrinking header right here with your website. So guys that's basically it. I hope you like this solution for your Divi Theme Builder, it's pretty easy to make a shrinking header, you know how to do it right now. If you have any questions, drop them down in the comments and I'll be glad to answer all of them. If this video is helpful for you, hit that like button and I will see you in the next video. Have a awesome day!
📖 Read the rest of the transcript at https://wpressdoctor.com/
#Divi #Shrink #Header #WordPress
