Creating a double header with scrolling effect

How To
1

Hello,

I wanted to ask if it’s possible (with the usage of header settings or CSS) to create a “double header” with separate conditions using Bricks builder. I’m all good with creating a header with a scrolling effect as it’s quite simple using the header settings, but it seems impossible to give different settings for different blocks of the header. For example:

-Header has two containers blocks: a top container for the logo and a bottom container for navigation.
-Desired effect: the top container (with logo) scrolling up with scroll effect, while navigation bar remains visible (sticky header).

Example of a header like this: https://themes.themegoods.com/letsblog/demo/

Thank you for any information and solutions!

1 Like
2

You wouldn’t really want to create 2 headers to achieve this. Instead, what you can do is hide containers when the user starts scrolling down the page.

On your Bricks website, once you start scrolling you’ll notice that #bricks-header gets the class “scrolling” added, which you can use to hide the containers. So, for example:

#bricks-header.scrolling .my-container {
    height: 0;
}

Add some transitions and you should be good to go!

3 Likes
3

Thank you for your reply!

I’ve indeed noticed header class changing as I adjust Header settings to “sticky” or “sticky scrolling”. However, I’m struggling to make this work.

Do I need to use any header settings when I’m using such code on my individual containers? Or do I have to add this to my bricks custom CSS scripts?

4

Currently, you would need to write the code out using custom CSS.

5

I’m trying to add this to a website too, same use-case as the OP, but I’m not finding it working well for me. I assume I’m doing something wrong but haven’t figured it out yet.

I changed the CSS code to…

#bricks-header.scrolling .logo-container {
height: 0;

}

Even tried changing “0” to “0px” assuming that was missing, but still no change.

I added the CSS code to both the header container overall, and also tried on the first container (logo-container) which is the part I want to hide on scroll while keeping the second container holding the nav and phone icon to be always displayed.

Has anyone been able to get this to work properly? I assume I’m missing something.

If it helps, the site I’m working on right now is https://www.staging.mrsteampro.ca

6

It looks like logo-container is an id, not a class. So the code would be:

#bricks-header.scrolling #logo-container {
    height: 0;
}

Also, you will want to set overflow:hidden on #logo-container

1 Like
7

Ah that seems to have worked! Thank you so much. Now just gotta figure out the transitions and stuff, haha. Added the logo to display:none when scrolled too which is the other part I needed. Thank you for the help! :slight_smile:

8

Is it possible to have transition on scroll (to have smooth hiding of the top bar)?
I have the same problem.

9

Yes, you would just set the CSS transition on the element. You will also need to update the css as the header ID has changed to #brx-header, so it should look like the screenshot below. Also, be sure to set an initial height on the logo element.

Screen Shot 2022-09-21 at 4.51.12 PM

2 Likes
10

I used display: none instead.

#brx-header.scrolling #my-div {
display: none;
}

It works but the transition effect isn’t working.

I set the transition on the CSS transition option but it’s not really active. I don’t know why.

11

I was looking for an answer too but I fixed it this way - This is to change the logo though (prob a lil late, but I found it through google so someone else might find it useful)

#brx-header.scrolling root {
content: url(“url.svg”);
}

12

It is not perfect, can our development team improve just like oxygen’s double header style. thanks.

1 Like