ไม่สามารถเล่นวิดีโอนี้
ขออภัยในความไม่สะดวก
How to Reveal Your Global Header While Scrolling Up & Hide While Scrolling Down with Divi
ฝัง
- เผยแพร่เมื่อ 2 ส.ค. 2024
- When you’re creating your global header, there are many things you need to take into account. The elements you place in your header need to help your visitors navigate easily. To reduce the time people spend navigating, many web designers opt for a fixed top header, allowing visitors to go to other pages or posts right away. That’s really convenient, but when creating a fixed header, a big part of your visitors’ viewport height is taken up, allowing less content to show up at once. If you’re not willing to make that sacrifice, know that you don’t have to. You can have the benefits of a fixed header by allowing your global header to reveal when your visitors are scrolling up, and hide it when they’re scrolling down. Today, we’ll guide you through hiding and revealing your global header using Divi’s Theme Builder. You’ll be able to download the JSON file for free as well!
If you don't have Divi yet, you can learn more about this powerful theme on our website using the link below:
www.elegantthemes.com/gallery...
Want to give back to the community? Share your empowering knowledge, skills, experience, and creativity on the Elegant Themes blog by contributing:
www.elegantthemes.com/blog/co...
Go to the blog post:
www.elegantthemes.com/blog/di...
![บุษบา - เมนทอล [Official MV]](http://i.ytimg.com/vi/IGnWPokSEis/mqdefault.jpg)
AWESOME! Exactly what I've been looking for - THANK YOU!!!
I am completely new on wordpress, I have been trying to build up a website from scratch for 3 days, I just arrived to to the menu on three days! It seems so easy when you do it though. Thank you for sharing your knoledge.
Awesome!! Thanks for the tutorial :D
Worked. Well done! :)
Thanks Donjetë, great tutorial!
You're always welcome!
Perfect Tutorial
Finally a good solution. :D
Great tutorial!!!
Awesome! I'm glad we could help! 😄
hey no-wo, there's some brown on the tip of your nose.
Thank You beautiful. Just loved it. you r superb mam
Great job as usual! It seems the logon does not want to show a SVG file, any thoughts?
Is there any way to have the logo resize (or change to a different version) on scroll like the previous version of DiVi?
Thanks. Great....
Hi, and thank you for your amazing tips! I have a little problem, when i reload page in transition of header i see white stripe and on my web site i have black background, so i see this white stripe when reload! How can i fix it? I try all the way, i setup all background color on black too. Hope you can help me because i really want to use this effect! Thank you so much again!
Thank you for your Video a great example Thank you and truly Beautiful
Greetings from Italy. and sorry for the English
If you don't whant to re make your header, You can just put the code provided on the footer of your child theme (changing the id according to your navbar)
Is there a way to show it just at the top and hide it when scrolling (either up or down)?
how we show header on just scroll?
Hi! I've tried this out on a site and it works fine using Chrome. When I view the site on Safari, the header just goes up and down on scroll or no scroll. Any ideas on how to fix this for Safari please?
Why just not to add one more menu type to menu module, in addition to center, inline and left aligned? Why all is so complicated?
I understand the need to make these tutorials fast. I imagine that most folks would rather lazily wander over to your blog post, grab the theme, and 'work smart, not hard.' However, there a few, like me, who don't mind working a little extra so we can learn how to do this. The problem, however, is that there are not enough details in your instructions. For example, a number of times, I had to watch what you were doing several times over because you never mention the values that you are assigning to the properties created or altered. A specific example is the Icon Hover color. You never mentioned it, nor showed it. But you do a great job in explaining the reasoning behind your actions. And I think overall your delivery is awesome! Thank you.
It's kinda funny. For me the code didn't work at all on an already built main header. I had to create a new one in order to make it work. Any thoughts? I mean I can think in a dozen of things that might have created conflict between the logic of the code and the specs of my original main header.
my header just stays on the same place, anyone can help me?
Tutorial works fine but I'm seeing a gap between header and a section.
Where is the code? I cannot find it
How to make it transparent when it goes to the top of the page
Awesome, thank you. I have a video background on the top section. When I add this menu effect, some random still image stays still on the top (like the part behind the menu background). See here resort.zaha.in/
Is there something I can do to fix it?
I just added a small CSS piece and it fixed it;
Thank you again
Looks terrible on mobile, it jumps up and down with no scrolling and you can't scroll on the drop down menu (the whole header disappears)
I have the same experience but I imagine it should be possible to disable the effect on mobile, let's see the the answer of some experts...
same here, on mobile it jumps up and down
I have the same issue on mobile. Can you please get us a fix for this?
when i enter the stagger effect library in the code module its all greyed out. Does this mean it no longer exists. Because that part of the function didnt work for me.
Hi Craig! 👋
Have you tried to download the layout from this article and import it to your website?
www.elegantthemes.com/blog/divi-resources/how-to-reveal-your-global-header-while-scrolling-up-hide-while-scrolling-down-with-divi
If you still have any questions, feel free to open a ticket with our Support Team in the Members Area:
www.elegantthemes.com/members-area/
@@elegantthemes thanks. Yeh i did. It depends who i get on the other end of support. Some seem like code experts and can give me a quick snippet. Others dont want to give any coding advice. Coding really is the only way to customise some things. Especially when its this type of effect. I will keep trying and looking. In a lot of these tuts or demos. The functionality is there just not nice clean designs. The hamburger icons are often HUGE and i cant find ways to make them more appropriate. The spacing between line heights and the overall size. When its comes to code sometimes the module controls dont effect it. They told me I cant make the lines closer together in the hamburger menu or change its size
As far as I see, your queries are solved by the Support Team 👍
@@elegantthemes yeh I got some great help this morning . I guess everyone has different skill sets. It was frustrating that some told me it couldn’t be done , then the next day the support person solved it instantly . But I’m happy that it got solved . :)
te dili mudagan imong header ano na?
ive spent 4 days doing all the tutorials. None of them work correctly. This one the menu actually disappears above as if its got negative margin. You end up seeing the very bottom of the logo and menu. Divi also stacks the menu instead of going to the hamburger icon for a lot of browser sizes. If you change just one part of these tutorials.. ie the menu not centered but logo left and menu far right. Then nothing will work as it does here. Exteremly frustrating that to do sometihng as simple as centre content in a menu that literally everyone needs. You will need to do that with custom css.. pretty bad for a visual builder. The terrible wix is now looking more useful than Divi