How to Create a Responsive Transparent Menu Header with Divi Builder - Step by Step Tutorial

[@dasboot1820]

Finally someone has the brains to make this complex process simple - thank you.

[@divicoaching]

Thank you. I'm so glad you found this useful. Some things in Divi are amazing but often not super-intuitive when it comes to actually building them.

[@glenwoodfin]

You have such a command of all of the Divi options on the fly. So helpful!

[@divicoaching]

Thanks Glen. That's the beauty of editing and practicing that demo quite a few times! Glad you found it useful.

[@seematalwar9440]

Fabulous tutorial! Appreciate the step-by-step explanations! Thank you

[@divicoaching]

Glad it was helpful!

[@kimboosan]

Another knockout! As I update a couple of older sites I was looking for a way to make some of these adjustments to the header menus and you hit every point. Great vid, thank you so much!

[@divicoaching]

Thank you. More to come soon...

[@digitalworldasean]

Wonderful Tutorial! i need to give credit for this tutorial. Great result!

[@divicoaching]

Thank you. Glad it was helpful!

[@lensboi1229]

just stumble on your amazing channel, your videos really helped a beginner like me

[@divicoaching]

Well thank you. More soon hopefully...

[@Drayken]

Honestly my problem with this is that there's no minimum width to the navbar content, so it begins resizing immediately and its width really doesn't follow that of a page's content which generally doesn't start resizing until quite a while into the window getting smaller. As for anyone wondering the same, I essentially just removed the % padding on the row and instead added a max-width equal to my page content on the menu widget then centered it. That way it doesn't resize with the window until it actually needs to and mirrors the content width of the page. You can re-add some padding to the row to set hard limits which match your content limits once the window is small enough.

[@divicoaching]

Yes, great tip. It is always hard to know whether to put a hard "max-width" limit on both the page content and nav. Typically now I will go with a max-width of 1366px on both. Sometimes I stick with the 80% and you then need to set a preset to apply this to your content rows too for it all to work.

[@MMATricks514]

Thank you sir, very helpful. I don't comment often but I felt compelled to do so. I would definitely buy a complete course on Divi from you.

[@divicoaching]

That is very kind and it is always good to have feedback when you have put time into making a video. I plan to make a full course but it will take a long time!

[@darndarn99]

Great to see you are back , we missed you

[@divicoaching]

Well that's very kind. Hopefully able to get lots more out over the Winter!

[@TheEvilEyeMaster]

This is a great tutorial, really clear and precise, excellent!

[@divicoaching]

Great. Thank you. Really pleased you found it useful.

[@ManuelStuder]

Great tutorial, thank you. Finally one that's easy to follow step by step.

[@divicoaching]

Thank you.

[@mandirasolutions3788]

Thank you so much for taking the time to show us step by step

[@divicoaching]

Thank you. I enjoyed making this one!

[@Lau-squirrelzz]

You really explain better than others, thanks a lot from Italy! All your instructions worked smoothly, but now I'm facing a small issue: I have a code in the footer, a button for a popup privacy policy, which displays partially underneath the sticky menu. Do I need some CSS to solve?

[@divicoaching]

Are you able to share a screen shot of the issue or maybe DM me a link to the site?

[@johnleggett5054]

Many thanks! Your presenting style is excellent, thorough and personable.

[@divicoaching]

Thanks John! I can't ask for a better review than that. Just need to find time to make more.

[@ChantelleVenter]

Thank you so much for this video. Finally I know how to set the mobile properties correctly 😊

[@divicoaching]

Thank you. I need to make one on the mobile menu in general... It's on the list!

[@ChantelleVenter]

​@@divicoachingthat would be great. It's something I struggle with a lot

[@swissgameartist5447]

Absolutely fantastic! Thank you very much for this great support. Always a pleasure.

[@divicoaching]

Thank you for the great feedback. Hoping to get another out in the next couple of weeks.

[@codingisforall]

Great tutorial. It can be hard getting Divi to work fully responsivly and this is really helpful!

[@divicoaching]

Glad it was helpful!

[@toyinehinmowo3649]

Thank you

[@divicoaching]

Welcome!

[@zabiulhassan]

finally found the solution after wasting a full week

[@divicoaching]

Sorry about your wasted week but glad you got there!

[@acs2777]

Amazing 🤩 thanks

[@divicoaching]

Thank you. It's always great to hear that people have found my vids useful 👍

[@TylerMassey]

Learned a lot; thanks for the great, concise lesson with no messing about

[@divicoaching]

Thank you. Glad you found this useful ☺️

[@user-ft9tb9gm1f]

Thank you for very informative and easy to understand tutorial video. One thing I have a problem with is when I set backgound image in Fullwidth Header Settings, background color does work. But I set the image in Section Settings and set a background color in Fullwidth Header Settings, the color overlays the image and opacity setting works. Am I doing something wrong?

[@user-ft9tb9gm1f]

Sorry, It has been solved :)

[@eatdrinkblockchain-yl6us]

Love you work DiviCoach very intuitive and fun!

[@divicoaching]

Thank you. I've not had "fun" in the comments before 😂

[@pixelboomer]

Thank you for the sensational tutorial. The video is super done and was a great help to me. Thank you.

[@divicoaching]

🙏 thank you for you kind words.

[@redroman7758]

Absolute genius, thanks for your time!

[@divicoaching]

Thank you. I'm glad you found this useful!

[@darndarn99]

Watched this again 😂😂 absolutely superb 👍

[@divicoaching]

Oh good. That makes me happy!

[@realJohnJohn]

Thank you for the explanation and work for this.

[@divicoaching]

Welcome! I am glad you found this helpful.

[@westchesterwebsites7168]

Your tutorial are spot on! The best out there! Thank You!

[@divicoaching]

Many thanks! I am pleased you find them useful.

[@Jaydawg1250]

This is an amazing tutorial. Looking forward to so much more. Thank you so much!!

[@divicoaching]

Well thank you sir!

[@vinukm2005]

Amazing work. Really helpful.

[@divicoaching]

🙏 thank you. I am pleased you found this helpful.

[@Clippingrrpp]

Wow! This video is fantastic. Thank you so much

[@divicoaching]

You're very welcome!

[@cheeryvalley5981]

Every of your video is so helpful. Thank you so much!

[@divicoaching]

Glad you like them!

[@countait]

BEAUTIFUL.

[@divicoaching]

Thank you!

[@krystofdostal1413]

amazing tutorial made my day

[@divicoaching]

I am glad you enjoyed it. Thank you.

[@archiefatcacky9440]

Thanks for a great tutorial. At around the 23.30 mark you mention a link to get hold of the blurb row in the description but I can't see it. Is it still available anywhere? Thanks

[@divicoaching]

Once I find a backup! Unfortunately I re-built the server and forgot about these links 🙄 Will try to get it back up this weekend.

[@divicoaching]

Ok I found the assets. Blurb row to import and images. Unzip first. header.divicoaching.com/wp-content/uploads/2024/02/Header.zip

[@ojoro77]

Thanks so much for this video. Best wishes.

[@divicoaching]

Thank you. I hope you find it useful.

[@user-xo5dp9ud9c]

Sticky pin icon no longer showing up for a lot of people even after they've enabled "stick to top" in advanced options.

[@divicoaching]

Is that a recent thing? I made another tutorial on Monday with a sticky header. Latest Divi update. No issues. In which module do you not see the pin?

[@alexandrelibretti]

Great Tuto !

[@divicoaching]

Thank you! Glad you found it useful.

[@copi2k]

Great tutorial :) .. I still have a problem left: my header section is on sticky position.. when I go into my row-settings, there is no pin there to adopt the sticky position design options.. what did I do wrong?

[@divicoaching]

When you say in your row settings are you, for example, looking at something like padding? There should be a sticky option there. If in doubt then just run through once more checking each step. It is not super-intuitive and even making this tutorial I had to redo things a few times to get it working properly. Can have more of a look tomorrow if you are still stuck.

[@dakotadudney6971]

Title content (re: menu) starts minute 15:41

[@divicoaching]

Yes. But I always try to build everything in my tutorials as people really appreciate this. The "chapters" do reflect this and viewers can always skip to the menu build if they want. Did you think this was a bad thing?

[@vinaly]

Just passing by to say thank you again! Your videos have been so useful since I started on divi last year. This is just what I was ask last weekend to do!! Do you do this videos just to help people like me or is this part of a training course? and if it is part of a course where can I buy it?

[@divicoaching]

Thank you so much for this feedback. At the moment I do this to build my teaching and video skills alongside a full time career in a completely different field. My plan is to move full time to coaching and producing courses over the next year starting with a full Divi course. I will make plenty of noise when I am ready to release it!!

[@roohandeh]

Very thanks!

[@divicoaching]

You're welcome!

[@darndarn99]

I have done this a few times now and works perfectly. I noticed that divi doesn’t have an option to change the logo on scroll. I have a friend who loves this style I did for him and has asked if I could change the logo when scrolling is activated. On the transparent view the logo is white but the on scroll he wants his coloured logo version. I know I can use the hue and saturation but that doesn’t match his coloured logo. Have looked for a workaround but so far all are a bit clunky. Do you have any advice or some article you might know that could help ?

[@divicoaching]

Scroll near the bottom of this and it explains it pretty well. www.elegantthemes.com/blog/divi-resources/how-to-change-your-sticky-logo-on-scroll-with-divi

[@darndarn99]

@@divicoaching Hi, thankyou that works perfectly.

[@DevilyIsa]

This was very helpfull, thank you! But what if I have a logo that is multi-colored, and I want to change the whole Image to another version of the logo (on scroll)?

[@divicoaching]

Glad you found this useful. You need a little bit of CSS to change the logo on sticky. See this post from Elegant Themes www.elegantthemes.com/blog/divi-resources/how-to-change-your-sticky-logo-on-scroll-with-divi#:~:text=To%20change%20the%20logo%20in,That's%20it!

[@DevilyIsa]

@@divicoaching Thank you so much! I was looking for this :D

[@jimr6463]

Hi Paul, Thanks for this tutorial. I have built a homepage using this system which is fine on the desktop but I get the old background jumping on scroll issue on tablet and mobile. Can this be fixed? Jim R

[@divicoaching]

Hi Jim. I am sure it can be fixed! It may being a caching issue with old cached items. I would turn off all of the Divi performance options (turn on again when you finish building), go to builder>advanced in options and clear the static cache. Also clear any hosting caching. Do you have a link I can look at?

[@tyleronyoutube]

Great video - I am having a problem with alignment when I scale the page (in desktop view) the logo doesn't stay in alignment with the website content, even though the padding for both is set to 15% - any idea how to fix this?

[@divicoaching]

Hi Tyler. Are you able to send me a link? You can mail me if you don't want to put in the comments [e-mail]

[@Fujivik]

Hoy can I solve the Logo size in mobile and pinned? It looks so small and I dont see the option

[@divicoaching]

In need a bit more info. Do you have a link?

[@tonymcguire6004]

Very nice

[@divicoaching]

Thanks Tony. Pleased you found this useful.

[@dr.trentreker]

i am sure this was brilliant when there was a sticky icon in the settings.

[@divicoaching]

It's only there when the option is available. If you haven't set the item to stick in "scroll effects" you won't see it and then it will only show on properties that you can set a sticky option.

[@dr.trentreker]

i'll check on this tomorrow, man, and let you know if i figured it out. thanks for the info.

[@buildyear86]

At the 22nd minute, you go to advanced and set it to relative. Then in row settings you set position on absolute and center. Why? You explain a bit but i am.a beginner and dont understand any of what is going on there. Why set to relative? Wgy set to absolute? What does this do? What problem does it solve?

[@divicoaching]

Hi and thanks for your question. Positioning in CSS is quite a big subject but have a read here to understand better. www.w3schools.com/css/css_positioning.asp. I have used position absolute to make the menu sit on top of the background. Without this you would have the menu row sitting at the top as usual. I hope this makes sense. You can easily see what this is doing by omitting this step and seeing what happens.

[@buildyear86]

Fearful, anxious, but above all: thankful for your video and message. I will try and see what happens! On another note. If one would like to set a member login/signup button to the right of these menu items, would it be adviseable to use a row with two columns instead of a row with only one column you did incthe video? The login/signup button wpuld then be added to the right column. Is that a legit way of going about adding a login/signup button in a header that has a menu in it? Learning! Thank you. Your videos are amazing, really.

[@divicoaching]

You'll be fine! On the button issue have a look at this and I am sure you can adapt it to work. kzbin.info/www/bejne/opqWmHl9n6iGf9U

[@buildyear86]

Wonderful. Exactly what I needed! Subscribed!

[@buildyear86]

Only thing missing is a search bar to be added. Would you have a vid that by any chance also includes that? So that way i would have a site logo | menu items | search bar | two ccs styled CTA buttons. If you dint have this sort of video, no worries. You are just such a good teacher. Enjoying your channel anyhow!

[@webmetaverso]

Doesnt work for me, Menu keep white while i setup the section row like in this video.

[@divicoaching]

Hi. Sorry you are having problems with this. It definitely works. Maybe try working through it again? Do you have a link for me to take a look?

[@webmetaverso]

I find out the problem.... in the row seting, go to advance, and change the position to absolute.

[@nikolam5362]

I followed instruction in video, but problem is my menu is always in sticky position, what I mean by that is when I refresh page and when scroll is on top of the windows it's already in sticky position which means my sticky background is always showing... don't know what to do pretty stuck after 1hour trying to fix it. No solution on google.

[@divicoaching]

Hi Nikola. I suggest you work slowly through the tutorial again to find where you went wrong. Maybe you set some of the sticky settings in the 'non-sticky' tab by mistake?

[@nikolam5362]

@@divicoaching Thanks for replying, to be honest I was losing my mind little bit but I figured out that section margin was -1px and when I corrected that to 0px everything was fine. :D

[@MDAbdullahRawha]

Can you do this with the logo in the middle? Because it's not working.

[@divicoaching]

Sure. See here header.divicoaching.com/test/. All I have changed is menu position to "Center" for this page.

[@ChadDiaz-qk4fb]

Hi. I'm really interested in learning more building custom headers but when I try to add a menu, it doesn't create it as navigation like in your video, it creates an unordered list with bullet points. Where am I messing up?

[@divicoaching]

Hi Chad. A menu *is* just an unordered list and the styling is added in Divi. Are you saying that if you add a MENU Divi module and select a menu from the Menu dropdown in the content tab of menu settings it just appears as bullets? Have you created menus before successfully on this installation? Are you seeing the bullets in the builder or on the front end of the site (or both)?

[@pwhiteheadnj]

Hello! Why do you use the page builder rather then the template builder to make the body & header?

[@divicoaching]

Not quite sure what you mean. I am building a global header in the theme builder and then the page as the homepage. The header will work on all pages, but you would probably build a slightly different one for pages where you don't need a transparent header. Not sure if that answers your question?

[@pwhiteheadnj]

@@divicoaching Thanks for responding! I've been making my pages as normal place holders, and then I build them in the theme builder. I got confused because you built your header in the theme builder, but the page was done using the divi builder on the page (visual builder front end) rather then inside the theme builder. Is there a difference? Should I change my workflow to better things? Thanks!

[@divicoaching]

You need to view the theme builder items as templates as anything you add here (including copy etc) will appear on every page that you apply that template to. I almost never use the "body" part of the theme builder. I build as many different headers and footers as I need for the site in the theme builder and assign them to the relevant pages. Each page is then built using the page builder on the front end. This is the "normal" Divi workflow. The exception is "posts" where it is normal to build a "body" template which drives the styling and then individual posts are built using the block editor. All very confusing to start! See Maks vid here kzbin.info/www/bejne/noSnpZ-FabR_hpo

[@pwhiteheadnj]

@@divicoaching Thanks for the advise, I like this. Just to clarify...? Make all of my header, footer and dynamic templates for (WooCommerce, Blog Posts & Post types) in the theme builder? All of the body stuff should be built on the front end using the page builder, right? FYI, this would make for a great KZbin video to clear up the confusion. Thanks!

[@divicoaching]

Yes that's the way Divi is designed. Header and Footers in the theme builder + templates only for body content which can be populated from Guttenburg. Or you can just make pages in the page builder with no template. A vid is a good idea 💡

[@jcturkeyruben]

I don't seee the sticky option. Did it move?

[@divicoaching]

On the row?

[@zahrazaidi9091]

same did u find any solution?

[@divicoaching]

You have to be really careful that you follow every step and set the correct options. I have checked and this all definitely works. Where are you not seeing a sticky option?

[@divicoaching]

You need to be sure that in the header>section>advanced>scroll effects you have enabled "stick to top". Otherwise you won't see the sticky option icon.

[@terezaklementova7195]

@@divicoaching hi there, I also have an issue, I did set sticky to top exactly like you say here, but its not sticky at all when I scroll and I cannot set different background, colors for this option as the sticky option for editing also doesnt show...