Choose container to stick within sticky header

Feature Requests / Improvements
1

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.

5 Likes
2

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

2 Likes
3

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
4

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

5

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
6

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.

7

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)

2 Likes
8

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.

9

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
10

Thank you for your help. Will wait for that feature

1 Like
11

This is a must for me. I need different sticky header for desktop and mobile.

1 Like
12

is the advanced header going to make it in 1.3.7 final release?

13

Nope, if so the feature would already be included in the beta. One thing at a time :wink:

1 Like
14

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

1 Like
15

Hello Everyone, I solved this with the help of my friend gabriel. Here’s a quick video on it https://youtu.be/5oIT7O8dX5E

5 Likes
16

Hey @richagotech ,

This works great. Thanks for sharing.

1 Like
17

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.

18

great video - working for me .

But than - it should be there in bricks directly. It is / was something that held me back from bricks.

19

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.

20

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.