Different Beaver Themer header on scroll

Different Beaver Themer Header Layout
Do you want the different Beaver Themer header layouts on scroll at your site? First header layout will replace with second new header layout when user will do the down scroll. Are you wanting this? Here is the simple tutorial about this. Follow the step by step instructions at below.

Minimum Requirement

  1. WordPress
  2. Beaver Themer compatible WordPress Theme like Beaver Builder Theme, Genesis, GeneratePress etc
  3. Beaver Builder Plugin
  4. Beaver Themer Addon

Rest of the contents are only available to members. You must subscribe the MEMBERSHIP plan. You already subscribe the plan? Login at below.

Login


Live Demo

Posted inAdvanced Beaver Builder Beaver Themer Membership Content Pro Tutorials and tagged

23 Comments

  1. Amanda McKrell on January 7, 2020 at 9:33 pm

    Hi, this tutorial has been helpful however on this page I’ve implemented it, the slim-header is displaying behind other page elements when scrolled. https://dev.freelancefluent.com/curls/homepage-2/
    help?

  2. Aaron Beashel on November 20, 2019 at 6:28 pm

    Hey there

    Thanks for this.

    I have implemented it on my site at public.simuldocs.com (ignore the lack of SSL, it isn’t the final domain).

    It works great, however on mobile the sticky menu isn’t clickable. The hamburger menu doesn’t open.

    Any ideas?

    • WP Beaver World on November 21, 2019 at 3:56 am

      I think that you already resolved the issue. Am I correct?

      • Aaron Beashel on November 26, 2019 at 8:46 pm

        Hey there

        No unfortunately this isn’t fixed. The main header (when you haven’t scrolled) works fine (I.e. when you click the hamburger icon, the menu appears and works).

        However, upon scroll a different menu appears (it has a white background and blue logo). Unfortunately when you click the Hamburger icon on that header, the mobile menu doesn’t open.

        Can you help?

  3. Erna Braat on April 4, 2019 at 11:47 am

    Thank you for this tutorial, Curious about the rest! I would like to read the rest but I couldn’t purchase a membership, this link https://pro.wpbeaverworld.com/membership/# didn’t reach the right page

  4. nicola on June 29, 2018 at 12:21 pm

    Is it possible to specify the scroll distance for when the big header turns into the slim header? My big header is quite deep and I want the change to happen pretty much as soon as they start scrolling or at say 100px. Thanks

    • WP Beaver World on June 30, 2018 at 3:16 am

      Edit the line no 16 of different-header.js file.

      Replace if (st > headerH){ with if (st > 10){ or if (st > 100){

  5. nicola on June 10, 2018 at 4:21 pm

    Hi there

    I have set this up and it all works great but the links on the slim header aren’t clickable and the sub menu doesn’t appear on hover. Any ideas please?

    http://109.199.119.181/~jolyonsp/

    • WP Beaver World on June 10, 2018 at 5:04 pm

      Please add this single CSS on your site

      .fl-builder-content[data-type="header"].fl-theme-builder-header-sticky.fl-theme-builder-header-scrolled {
	z-index: 0!important;
}
      • nicola on June 10, 2018 at 11:04 pm

        Awesome thank you!

      • Oscar on May 22, 2019 at 11:01 am

        Hi,

        I’ve the same problem it’s seems that the header are overlaped and I can’t click on the first menu, I’ve added the css

        .fl-builder-content[data-type=”header”].fl-theme-builder-header-sticky.fl-theme-builder-header-scrolled {
        z-index: 0!important;
        }

        but it’s not working

  6. yaa on January 31, 2018 at 1:17 pm

    My submenu on the first header (before scroll) won’t show anymore. When I scroll and the second header loads my sub-menu comes back. How do I make sure the submenu still shows up on the first header?

  7. frank on January 21, 2018 at 3:33 pm

    My child theme doesn’t have a js folder. Should I create one? or just put it in the main child theme folder and modify the enque script in the php file to just remove the /js directory in front of the file URL?

  8. torben on November 30, 2017 at 9:47 pm

    Hi

    Thank you for an awesome tutorial. Just what I needed, but I have a problem on mobile.

    I followed your instructions and it works like a charm on desktop, but when I look at the same page on my iphone, then there is only the normal header and no sticky one when I scroll.

    Do you have any idea why this is (not) happening?

    Btw. there is a missing “;” in your JS script in line 12, and in line 38 it says “!= 0”. Shouldn’t it be “!==0”?

    Thanks
    Torben

    • WP Beaver World on December 1, 2017 at 3:17 am

      Can you replace this code

                  if( $(window).width() >= FLBuilderLayoutConfig.breakpoints.small )
                DifferentHeader._doScroll();
 
            $(window).on( 'resize', function(){
                if( $(window).width() >= FLBuilderLayoutConfig.breakpoints.small )
                    DifferentHeader._doScroll();
            });

      WITH

      
            if( $(window).width() >= 420 )
                DifferentHeader._doScroll();
 
            $(window).on( 'resize', function(){
                if( $(window).width() >= 420 )
                    DifferentHeader._doScroll();
            });

      New code will work for those devices whose width is grater than 420px.

  9. Craig Paterson on July 18, 2017 at 3:05 pm

    Thanks for this great tutorial 🙂

    I would like to swap the headers on the home page only. I would like to display only the ‘slim menu’ on all other pages. Is this possible, and if so, how would I implement that?

    Cheers,
    Craig

    • WP Beaver World on July 18, 2017 at 3:22 pm

      Themer have include/exclude option. You will create two headers: one for home page and another one for all inner pages

      • Craig Paterson on July 19, 2017 at 7:57 am

        Thank you for your help with this yesterday 🙂

Leave a Comment

You must be logged in to post a comment.

REQUEST NEW TUTS

Newsletter

Get free weekly PRO Beaver Builder Tutorials

shares