Different Beaver Themer header on scroll
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
- WordPress
- Beaver Themer compatible WordPress Theme like Beaver Builder Theme, Genesis, GeneratePress etc
- Beaver Builder Plugin
- 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
23 Comments
Leave a Comment
You must be logged in to post a comment.
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?
Can you share the site access via contact form?
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?
I think that you already resolved the issue. Am I correct?
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?
Can you share the wp-admin access via contact form?
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
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
Edit the line no 16 of different-header.js file.
Replace if (st > headerH){ with if (st > 10){ or if (st > 100){
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/
Please add this single CSS on your site
Awesome thank you!
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
Can you share the site URL?
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?
Can you share the wp-admin access via contact form?
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?
You would create one. Folder name would be “js” (lowercase)
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
Can you replace this code
WITH
New code will work for those devices whose width is grater than 420px.
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
Themer have include/exclude option. You will create two headers: one for home page and another one for all inner pages
Thank you for your help with this yesterday 🙂