Beaver Themer comes with a few preset options. You can make it transparent, have it fixed on scroll up and down, and shrink on scroll too. There isn’t is an option to have it appear on up scroll only, but it only needs a small snippet of JavaScript and CSS.
The JavaScript
I tried a few scripts that swapped CSS selectors depending on the direction of scroll, but could not get these working smoothly. The easiest approach I fond came from a W3 schools tutorial: “how to hide menu on scroll“. I slightly reformatted the JavaScript to allow more CSS to the header.
/* When the user scrolls down, hide the header. When the user scrolls up, show the header*/
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("header-scroll-up").style = "top:0px; background-color: #f0f0f0; ";
} else {
document.getElementById("header-scroll-up").style = "top:-80px; background-color: rgba(0, 0, 0, 0); ";
}
prevScrollpos = currentScrollPos;
};
Notes
- Rather that referencing a js file in your theme you can add this to you Beaver Builder global settings (Ctrl/Cmd +U) when in the page builder editor.
- This is using getElementById (“header-scroll-up”) so we need to add “header-scroll” to the ID field under the advanced tab of the row the header is in.
- The part that says “top:-80px” may need adjusting according to the height of your header. It is how far up the header needs to go to be hidden from view on scroll down.
- In this snippet I added CSS for “background-color”. This is used on a site where the homepage need a transparent header on load. On scroll to the top the transparent header is no longer seen with this.
The CSS
#header-scroll-up {
position: fixed; /* Makes it stick */
top: 0; /* Stay on top */
width: 100%; /* Full width */
transition: top 0.3s; /* Transition effect when sliding down (and up) */
z-index:20; /* added because the BB number counter module appeared over the header */
}
.admin-bar #header-scroll-up
{
margin-top: 32px; /* added so the WP bar did not obscure the header when logged in */
}
#fl-main-content
{
margin-top: 100px; /* The space need after the header and the main content */
}
.fl-builder-content[data-type="header"].fl-theme-builder-header-shrink IMG
{
max-height: 30px !important; /* shinks the logo image if using Beaver Themer's
shrink option. You could swap the IMG select for something else you want to make smaller */
}
.fl-theme-builder-header
{
background-color: #f0f0f0; /* Because the transition effect on the header you can see a flash
of the site's background color. This mask this by adding a matching header area background.*/
}
Final comment
This should work on any theme using a Beaver Themer replacement header.
I believe there is an built in option for this in Astra and the Page Builder Framework theme which you may prefer to use. The Beaver Builder and the Generate Press theme don’t have this.
I build websites at WP Corner Shop and travel. I also co-host a weekly WordPress podcast called WP Builds and make YouTube videos.
Hi David, many thanks for this, I may end up using it. To confirm, Astra does have this and many other options. I’ll usually use Astra’s options with their many powerful header options but having this option for Themer proper will open up a few alternatives when implementing a site header.
I do think this is something that should be native to Themer, I hope the BB devs add something like this in future.
As always, great info and much appreciated. Stay busy, stay safe during this time and all the best.
Thanks Athlone,
I hope all is OK where you are? I would be nice to have a few more header options.
I am always in two minds with these thing. I like Astra, but I feel there is a trade off for the extra options.
You have reminded me that I need to contact them about the WooCommerce account pages since Version 4. Have you noticed anything odd there?
You’re welcome David.
By God’s grace we don’t have too many Covid19 deaths here in South Africa, but from today the entire country is going into full lockdown for 21 days. The country has a huge population of HIV and TB positive people, thus the fear is there could be hundreds of thousands of deaths if they contract Covid19 and the resultant lockdown.
No theme is perfect, but Astra comes seems to be the best of the lot. I would like more fine tuning options for headers in Themer, currently I often need to use Astra’s options instead of themer and would like to use more of Themer.
What do you find as the trade off with Astra?
Are you having issues with Astra or Themer about the WC account pages?
That sounds similar to here in India. Lock-down but not to many cases.
I find Astra the best for quicker WooCommerce projects, but it is the only theme where I have had to keep adding and removing CSS to correct for display issues on updates.
On balance, for me it seems a fair trade off for the extras it brings, and it was a bargain, but quite a few friends who were fans have dropped it.
Update: Astra account page styling seemed to be be off with the WooCom V4 update, but it was not an Astra issue.
DAVID! THANK YOU!!!!!! I’ve been wanting this for YEARS. OMG I just love you to pieces! THANK YOU THANK YOU THANK YOU!!!
Well, you could have at least thanked me. You made my day :-)
Sorry. THANK YOU! :)
Ha ha Abby, I was completely joking. I don’t think I have had a nicer thank you than yours. I really appreciated it. I just get embarrassed by compliments so handle it by joking.