How to Reveal Your Global Header While Scrolling Up & Hide While Scrolling Down with Divi - Best Webhosting

ULTRAFAST, CHEAP, SCALABLE AND RELIABLE! WE STRONGLY RECOMMEND ACCU WEB HOSTING COMPANY

Watch Wordpress Elegant Themes Video: How to Reveal Your Global Header While Scrolling Up & Hide While Scrolling Down with Divi.
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:
https://www.elegantthemes.com/gallery/divi/

Want to give back to the community? Share your empowering knowledge, skills, experience, and creativity on the Elegant Themes blog by contributing:
https://www.elegantthemes.com/blog/community/elegant-themes-blog-submissions

Go to the blog post:
https://www.elegantthemes.com/blog/divi-resources/how-to-reveal-your-global-header-while-scrolling-up-hide-while-scrolling-down-with-divi

Published: Friday, December 13, 2019 12:49 AM
Category: Wordpress Elegant Themes

79 Views

Related Videos

How to Shrink Your Global Header’s Size When Scrolling with Divi’s Theme Builder

by Best Webhosting Added 4 years ago 72 Views / 0 Likes

When you’re designing a fixed global header, you might want to shrink the header’s height when your visitors are scrolling. It helps reduce the space the global header takes up in your visitors’ viewport height. In this tutorial, we’ll guide you through that process. We’ll start by building the menu, and then we’ll add some JQuery and CSS code to trigger the effect. You’ll be able to download the JSON file for free as well! Read the article here: http
Parallax Scrolling | Easily add stunning scrolling effects to your Wix website

by Best Webhosting Added 4 years ago 94 Views / 0 Likes

Find out how to add parallax scrolling to your website. It’s easy. Learn how to add parallax, zoom in, reveal and fade in effects to your website, to give it more depth and movement. Parallax creates an amazing 3D effect as you scroll, by moving the background more slowly than the foreground. About Wix Wix.com lets everyone create a professional website for free. Choose a template, customize anything, and get online today! It’s that easy to start stun
Stunning Parallax Scrolling Effects | How to Make Creative Parallax Scrolling Website

by Best Webhosting Added 3 years ago 34 Views / 0 Likes

Enroll My Course : Next Level CSS Animation and Hover Effects https://www.udemy.com/course/css-hover-animation-effects-from-beginners-to-expert/?referralCode=90A9FFA7990A4491CF8D Another Course : Build Complete Real World Responsive Websites from Scratch https://www.udemy.com/course/complete-responsive-website-design-from-scratch/?referralCode=F1DFAF1715AF6CE5780E ------------------ Join Our Channel Membership And Get Source Code of My New Video's Eve
Infinite Page Scrolling Example Using Html CSS and Javascript - Javascript Scrolling Effect Tutorial

by Best Webhosting Added 4 years ago 75 Views / 0 Likes

Please LIKE our Facebook page for daily updates... https://www.facebook.com/Online-Tutorial-Html-Css-JQuery-Photoshop-1807958766120070/ Track: Skylike - Dawn Link: https://youtu.be/Jg9nDEtqWV0
Pure CSS Sticky Header - Navbar Fixed Top After Scrolling - No Javascript

by Best Webhosting Added 4 years ago 75 Views / 0 Likes

Please LIKE our Facebook page for daily updates... https://www.facebook.com/Online-Tutorial-Html-Css-JQuery-Photoshop-1807958766120070/ Music Name : Spring In My Step by Silent Partner from YouTube Audio Library Music URL : https://www.youtube.com/watch?v=siCmqvfw_1g
How to Create a Scrolling Fashion Catalogue with Divi

by Best Webhosting Added 4 years ago 82 Views / 0 Likes

In this post, we’ll be showing you how you can create a scrolling fashion catalogue. Using this method will help you connect with your audience as you would by handing them a paper catalogue. Creating an online scrolling fashion catalogue may help increase the results you get from the catalogue. By including direct links to shop items, for example, the buying process will be enhanced as well. Read article: https://www.elegantthemes.com/blog/divi-resou
Divi Quick Tip 10: How to Trigger Animations When Scrolling Both Up & Down

by Best Webhosting Added 4 years ago 91 Views / 0 Likes

In this edition of Divi Quick Tip we show you how to use a small jquery script to trigger page element animations on both the up and down scroll--whereas by default they would only trigger on the down scroll. Get the code here: http://goo.gl/dgXpNF Subscribe to our YouTube Channel: https://goo.gl/oxCa4h Subscribe to Divi Nation on iTunes: https://goo.gl/w8fccT Subscribe to Divi Nation via RSS: http://goo.gl/vz04Vc Get Divi Nation on Facebook: https://
Divi Quick Tip 03: How to Stop Logo & Menu Shrink When Scrolling

by Best Webhosting Added 4 years ago 84 Views / 0 Likes

In this Divi Quick Tip we show you how to stop the logo and menu area from shrinking when you scroll. The slight shrinking animation is a default feature of the Divi theme by Elegant Themes. However, for some users, something that stays the same size at all times is preferable. Here's how to achieve it. Read the accompanying blog post: http://goo.gl/Ai8chP Watch full episode: https://youtu.be/Ls-BIdlk7Es Subscribe to our YouTube Channel: https://goo.g
How to Automatically Scroll Horizontally When Scrolling Vertically with Divi & GSAP

by Best Webhosting Added 3 years ago 14 Views / 0 Likes

Learn more: https://www.elegantthemes.com/blog/divi-resources/how-to-automatically-scroll-horizontally-when-scrolling-vertically-with-divi-gsap The more you explore websites on the web, the more you come across some really customized on-page experiences. You might have been wondering how to achieve certain advanced functionality and the answer is often this: by using an animation JavaScript library. A popular animation library nowadays is GSAP. But ju
How to Make Your Divi Navigation Start at the Bottom, Then Stay Fixed at Top When Scrolling

by Best Webhosting Added 4 years ago 98 Views / 0 Likes

In today’s Divi tutorial we’ll show you, step by step, how to make a fixed navigation on your website when scrolling and after you’ve passed the height of your full screen. If you follow the steps in this post and recreate the fixed navigation, you’ll see that the navigation will bring a nice interacting effect to your primary menu and to your website in general. Read post: https://goo.gl/p1SN65
How to Float Elements within a Section to Create a Dynamic Scrolling Effect in Divi

by Best Webhosting Added 3 years ago 43 Views / 0 Likes

Floating elements within a section can provide an effective and unique way to reveal content as the user scrolls down the page. With Divi, you can float elements simply by giving them a fixed position using the built-in position options available. And when you combine the fixed elements with static elements, animation, and parallax, your content will come alive! In this tutorial, we will show you how to float elements (images and a blurb module) withi
Download a FREE Horizontal Self Scrolling List Made with Divi’s Scroll Effects

by Best Webhosting Added 3 years ago 30 Views / 0 Likes

Divi’s scroll effects bring tons of new design possibilities to websites you create. With every new feature, we try to share cool Divi techniques you can use to make your pages stand out from the crowd. This tutorial is no different, today, we’ll show you how to create a horizontal self-scrolling list. As visitors vertically scroll down your page, the horizontal items scroll along horizontally. This removes the need for a separate horizontal scrollbar