How to Create a Custom Fullscreen Global Header with Divi’s Theme Builder
HTML-код
- Опубликовано: 2 окт 2024
- If you’re looking for a way to create a global header for your website that doesn’t take up a lot of space, you’re going to love this tutorial. We’ll show you how to create a fullscreen global header using Divi’s Theme Builder. While scrolling down the page, the only two things additional you’ll notice on your post/page are 1) a clickable hamburger icon in the top left corner and 2) a logo in the top right corner. These two items will follow your visitors throughout their navigation process and once the hamburger icon is clicked, a custom fullscreen menu will open and allow visitors to go to other pages on your website. The outcome of this design is highly responsive and you’ll be able to download the JSON file for free as well!
Read more: www.elegantthe...
![[Step by step] How to create a custom global header with divi theme builder.](/img/1.gif)
If you are going to only make things without explaining why you are doing each step it is better to just provide us with the link to download the header. If you want us to actually learn something with this video, it is terribly made. It didn't work for me because I want to make a secondary menu for the hamburger. But as you are just telling me step by step what to do without explaining anything, I can't figure out what I'm doing wrong, so for me, this video was a huge waste of time because after hours looking at this I still having nothing from what I needed.
Edit: also why don't you delete the tutorials that don't work anymore after updates?
Excellent!!! How to make a mega menu with submenus to the right, for example Harvard University or Berklee University.
Just followed this tutorial and it doesnt work, after reading a few comments seems like something updated and it doesn't work anymore
That is brilliant, Mak. Please could you do a follow up video or blog which explains how the css and jquery code works.
hi! excellent but how can i changed the order of the items? i need the logo on the left and the menu on the right! any suggestions?
I was able to move the Menu Icon left or right, by going to the top Section, Design, Sizing, and adjust the percentage for Width/Max Width. For instance… 90% is pretty much full Left, 10% is full Right. I'm not sure about the logo without going back to the original file. I didn't need the logo and deleted it. If I remember correctly it was in a separate section at the bottom. That should be easier to re-align left or right than the menu icon was.
Maybe it already exists, but I would love to see a Full Width Menu dropdown header. Click on a menu Item, and and the dropdown is full width with icons and columns.
Man is divi like obsolete or something? All I want to do is make a full screen nav with a Lottie burger icon and it’s fully not possible. The easiest way I’ve thought of is through using a pop up to hold the nav which is triggered by clicking the Lottie. This is painnnnnnnnful
Bonjour, comment faire ça for mobile device avec un menu qui a plusieurs sous catégories please ? Merci.
did not work, I tried several times but no luck.
Sadly it is not working anymore.
how to add hamburger symbol
Thanks Mark. It would be nice if you could do a run through /overview before you start and explain what you will be doing with different sections, one containing the menu, transparency, etc. and when you click this and that happens with the code. Otherwise people just copy and paste but don't actually learn anything. Keep up your great tutorials!!
this is what I'm saying, I hope he reads this. I've noticed this in MOST if not ALL of his tutorials. He just does stuff and just tells you what he's doing, which is pretty much exactly what's on the blog. I wish he would explain first before just telling people, "now you want to do this....."
Is there a way to put the logo left and the menu icon on the right side ?
i have the same question!
Did you find a solution to this one? The way Mak teaches is really not so insightful. I am now regretting buying Divi because the CS also takes forever to respond and doesn't even resolve the issue.
did you ever figure this out?
I was able to move the Menu Icon left or right, by going to the top Section, Design, Sizing, adjust the percentage for Width/Max Width. For instance… 90% is pretty much full Left, 10% is full Right.
Great!! Now I know.
divi is not clean at all
Hi! Thanks Mark,
my menu works great
But what about i want to add a background the the whole navbar? and don't have it trasparent
please someone can help?
it doesnt work
The problem I'm having, is that the container the icon or button is in blocks any other links behind it. Not sure if it's the Section or Row. For instance, you can move the button to the upper left corner of a page ...and even though you're only seeing the hamburger or button (far left), any links or other buttons, across the page to the right are blocked by the menu itself. Basically no longer clickable. If you scroll the page up or down a bit, so that the link is no longer level with the menu button, you get your link back.
Hello, Wonderful menu! But I have a question: is it possible to add text next to the icon?
My menu stopped opening after a few months, any ideas?
yeah, something changed in Divi and this tutorial no longer works. If you change the visibility back to default, you can see it still function, but the menu is always visible, which defeats the purpose.
were you able to find a fix?
how can I do to fix the logo in the center?
The link to bog post is not working!!!
That looks really cool. Pity the menu items cannot be added as dynamic content so they update automatically when you add new items, or is that also possible?
it can, just click on "Use Dynamic Content" on the text field
how you added hamburger symbol in text module?
Hi Hassan! You can copy-paste this Hamburger Symbol: ☰
merci
You're welcome! 😄
Make a nav bar like godaddy navigation bar