@Sergio @timmse any input on this? I didnât find any solution on bricks documentation.
Hi @steve @alexgr,
sorry for the late reply - I completely missed this post.
Well⊠there is a solution, but it currently doesnât work using the header template type (so that the header appears automatically on every page).
The bricks header template currently acts as a wrapper. You can set the whole wrapper to sticky (via the settings), but setting anything inside of it sticky does not work, because the wrapper scrolls on and on no matter what and its content (your sticky element) with itâŠ
So instead of using the header template type, create a section template and build your custom header there. The disadvantage of this is that you have to insert your custom header template into every single, archive, ⊠template (without using the template element, which would work as a wrapper like the bricks header wrapper). So get sure your header is ready before inserting it in your templates
Iâll provide you with a starter template that can be downloaded here (without custom CSS):
Demo Video | Custom Sticky Header Template
Best regards,
timmse
Hi Timmse,
Thanks for the reply, but I donât think that will work. Had already tried something like that.
The situation I was trying to create has the header starting off as transparent with a logo on top of the menu. When scrolling the logo does not stick and the background of the menu becomes a color with a slight bit of transparency when it sticks.
The solution you suggest works as long as the header background is a consistent color. I wasnât able to figure out how to go from transparent to color background when it sticks. Not really a developer, so donât know if itâs just css or css and javascript thatâs needed.
Thanks for the suggestion though. Appreciated.
Steve
Youâre welcome!
At least my reply solves this
You can extend this even more with javascript to add a class to the menu when it reaches top of the viewport (as it is when you set the header in your header template type to sticky) because, with pure CSS, the element (menu) doesnât âknowâ when itâs sticky.
Iâll provide another template with a few lines of custom CSS and JS on top of this in the next few days
Yes, the template you created is awesome but as Steve pointed out we would also like to be able to change the color or the transparency of the sticky nav bar. Will be waiting for your updated template when you get to it. Thanks so much for all your help.
Hello folks,
as promised, I made another version of the template, but this time as a header template
Of course, there is something to consider here again: donât set your header to sticky - then all the fun wonât work anymore That means, that you cannot change the background color and link colors etc. inside of the builder, but with some simple lines of custom CSS. All you need is to take a look at the code block inside the template. I put the script and style together in one code block and set a fixed scrolling value, to keep it as simple as possible.
There are two positions in the code that you have to change accordingly to the element height (#logo-wrapper, 200 in the example), that is above your navbar:
- if (window.scrollY > 200)
- .sticky #logo-wrapper { margin-top: -200px; }
Let me know if it works for you and have a nice rest of the weekend.
Hi,
The link of the page is wordpress.auxilio.nl.
So I want to set the header nav after the image so that would be 300px. What I now see is that the section image dropped lower so that the navigation first has a transparent background. But it was first showing on top of the image.
Donât know what happened. Hope you can help.
Hi Anushka,
I think this is because of the layout settings youâve already applied to your site.
As you can see in the video, the template works, but itâs still not a perfect solution. We already have an âadvanced headerâ on the list, which should make something like this much easier.
Thank you for your help. Will wait for that feature
This is a must for me. I need different sticky header for desktop and mobile.
is the advanced header going to make it in 1.3.7 final release?
Nope, if so the feature would already be included in the beta. One thing at a time
Hi @timmse ,
I am stuck in the same situation but not quite able to understand how to implement the snippet you have provided. Iâd be extremely glad if you could provide a video of implementing the same.
https://staging.oceangeosynthetics.com
The main element is a div with class .header
inside that div are two sections with classes .header_top and .header_sticky
I want to made .header_sticky sticky on scroll after 300px
Hello Everyone, I solved this with the help of my friend gabriel. Hereâs a quick video on it https://youtu.be/5oIT7O8dX5E
Thank you for this very helpful tutorial!
Do you maybe know how I can change the point when the container scrolls âawayâ? Because now when I scroll even a pixel it disappears. I think itâs to fast and would like it to disappear when I scroll 200px.
Thanks for any help.
great video - working for me .
But than - it should be there in bricks directly. It is / was something that held me back from bricks.
Hey everyone,
Found another option if anyone is interested.
The BricksExtras plugin has added Header Extras / Rows which provides options for additional header rows and how they stick, so accomplishes exactly what I was trying to do. Although the code provided by richagotech works great without the plugin.
The plugin has some other elements may be userful until Thomas is able to incorporate these into Bricks.
I just ran into this issue now. I tried the @richagotech solution with a little modification, and Iâm super happy with the result.
Initial CSS:
.scrolling .header_top {
max-height: 0px;
overflow: hidden;
padding: 0;
}
.header_top {
transition: .3s;
}
Modified CSS:
.scrolling #news{
display: none;
}
#news {
transition: 0.5s
}
The âdisplay: noneâ property takes care of any padding/margin from the #new element.
Thank you for this. I would love to have something to control this in Bricks itself, unless there is a way now that Iâm not aware of?
The header element id is now brx-header for anyone looking to use the code.
I nearly have it working, but the the content seems to jump when the sticky class is added. Can you advise how to prevent this from happening?