Choose container to stick within sticky header

Would like the ability to stick a specific container within the header rather than the full header.

For example, a logo is in the top container and the nav menu is in the bottom container. On scroll only the bottom container with the nav menu sticks and logo does not.

2 Likes

@Sergio @timmse any input on this? I didn’t find any solution on bricks documentation.

1 Like

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 :wink:

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

2 Likes

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 :wink:

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 :fist:

1 Like

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 :partying_face:

Of course, there is something to consider here again: don’t set your header to sticky - then all the fun won’t work anymore :wink: 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:

  1. if (window.scrollY > 200)
  2. .sticky #logo-wrapper { margin-top: -200px; }

Let me know if it works for you and have a nice rest of the weekend.

Demo Video | Custom Sticky Navbar (simple JS / CSS)

1 Like

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.

1 Like

Thank you for your help. Will wait for that feature

1 Like

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 :wink: