Show a Beaver Themer header on scroll up

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.

Posted in
DWcircle

I build websites at WP Corner Shop and travel. I also co-host a weekly WordPress podcast called WP Builds and make YouTube videos.

20 Comments

  1. Athlone Harris-Compton on 25th March 2020 at 7:37 am

    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.

    • David Waumsley on 25th March 2020 at 3:10 pm

      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?

      • Athlone Harris-Compton on 26th March 2020 at 9:12 am

        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?

        • David Waumsley on 26th March 2020 at 7:48 pm

          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.

  2. Abby Buzon on 24th June 2020 at 6:19 am

    DAVID! THANK YOU!!!!!! I’ve been wanting this for YEARS. OMG I just love you to pieces! THANK YOU THANK YOU THANK YOU!!!

    • David Waumsley on 24th June 2020 at 8:35 am

      Well, you could have at least thanked me. You made my day :-)

      • Abby Buzon on 24th June 2020 at 2:55 pm

        Sorry. THANK YOU! :)

        • David Waumsley on 25th June 2020 at 6:10 am

          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.

  3. Hedley on 30th August 2020 at 12:22 am

    This is great, David, as usual – your how-to videos are among the best for BB.

    One problem: when I use this, while I am in the BB/Themer editor, I cannot edit the row that contains the menu, as the menu tools box hovers over top of the row tools box. I’ve been tinkering with the CSS and script, but can’t see to fix this. Any ideas?

    Screenshot: https://snipboard.io/hly2pb.jpg

    • David Waumsley on 30th August 2020 at 6:12 pm

      Hi Hedley,

      Thanks so much for the encouraging words. Yep that is a pain. I have a bit of a laptop failure problem at the moment so can’t test this, but…

      there is the fl-builder-edit selector that shows only in the editor. Perhaps try this.

      .fl-builder-edit #header-scroll-up
      {
      margin-top: 20px;
      }

      Not ideal, but may just be a work around.

  4. Hedley on 30th August 2020 at 6:25 pm

    Ah, yes. That helped.

    Thank you!

  5. Lukas Huggenberg on 13th January 2021 at 4:08 pm

    Hi David,
    I was so excited to find your tutorial and now am crushed by this:
    Something you entered has triggered a 403 error.
    This is nearly always due to mod_security settings from your hosting provider.
    I tried to add
    define( ‘FL_BUILDER_MODSEC_FIX’, true );
    to wp_config.php as well as to the child theme’s functions.php to no avail.
    On a shared hosting, I doubt that the hosting company is gonna change anything concerning mod_security.
    Is there something else I can try to get this working?
    Thanks,
    Lukas

    • David Waumsley on 13th January 2021 at 5:33 pm

      Oh heck, I am really sorry Lukas. It’s such basic code that I really can’t see why this would happen. You did what I would have done too. That about the limit of my knowledge. Could be worth trying the BB community. Si Mon (on Facebook) is one of the BB developers who seems to get to the route of these types of things. Sorry.

      • David Waumsley on 13th January 2021 at 5:36 pm

        The only thing I can think of is that a copy and paste can alter characters like quotes and throw errors. I hope not from here.

    • Lukas Huggenberg on 13th January 2021 at 9:43 pm

      I managed to reference the .js in the functions.php but have another problem: my header consists of two rows. The upper contains your Flexible Beaver Builder Mega Menu, the lower row an image that serves as a background for the dropdown menus (dimmed with a javascript triggered overlay, see https://www.screencast.com/t/M1EoNW9IB80l).

      I tried to give the two rows different ids and query those by document.querySelectorAll(“#myID1, #myID2”) instead of getElementById() to no avail.
      Same for giving them a common class name and using document.getElementsByClassName(“myClassName”).

      Furthermore the CSS doesn’t work well with two rows either.

      Do you see a way to get this setup working?

      Kind regards,

      Lukas

      • David Waumsley on 16th January 2021 at 5:52 am

        Sorry, I have not tried both things together. I share what I did at the time and forget myself. This kind of stuff stretches me at the best of times.

        At some point I want to template all the things I have needed and share. No doubt I will run into issues then and I’ll probably hire some help, but I am not there yet.

  6. Lukas Huggenberg on 16th January 2021 at 12:30 pm

    Hi David,
    if someone really doesn’t need to explain himself, it’s you! You’re already generously sharing your resources!
    I think of hiring Zack Pyle to solve this. I’ll certainly share the solution with you so that you can share it with the community if you want.
    Kind regards,
    Lukas

  7. Liam Gamble on 19th February 2021 at 5:06 pm

    Thank you for this code, David. It worked swimmingly, though I do have one issue that I can’t seem to figure out.
    When I scroll back up to the very top of the site page, if I give the mouse or trackpad another tiny scroll up “umpf,” the nav bar disappears again. It is corrected when I scroll down and back up again, but then, every time I reach the top of the site, it goes away. I’ve played around with some of the code with my veeery basic knowledge though can’t seem to figure it out. Any ideas?

    • David Waumsley on 20th February 2021 at 5:59 pm

      Hi Liam, Sorry for the delay. Is there any chance you could share a URL so I could look. I get a bit out of touch with what I did myself so nothing springs to mind, but It may help If I can inspect the issue you have.

      • Liam Gamble on 24th February 2021 at 10:00 pm

        Now it’s my turn to apologize for the delay. Ha. I actually had a coder friend help me with this. I’m not exactly sure what he did, but it helped. Thank you anyway.

Leave a Comment