Header Template Improvement: A double header with scrolling effect

Two row header:

Desired effect:
the top row scrolling up with scroll effect, while the second row navigation bar remains visible (sticky header).

Just like Oxygen’s header effect, waiting for improvement!

Just use BricksExtras.

Thanks very much for the information,

Bricks native supported will be nice !

Well unless you submit it as an idea and plenty of people vote for it … can’t see it happening any time soon. Esp when there is an excellent solution that does exactly what you want.
But I suppose you need it to be free.

Free is one reason, another reason is: we need to add one plugin for this improvement.

BricksExtras add three files for this function:
header.js
hideheader.js
stickyheader.css

if natived in Bricks will no more bloats :joy:

Just to clarify, this isn’t bloat. Bloat means excess code that is added to a page that isn’t being used (for example form plugins that add their form JS on pages where there are no forms), but this is the opposite. The files are separated into smaller files and loaded conditionally on purpose (because some users are only using the sticky header part on some pages, not across the whole site, so it’s conditional).

For example, only the sticky header CSS is added if the sticky header is being used. Similarly, with the hiding header on scroll functionality, only that JS for that specific functionality is added if that setting is enabled. It’s the same with other features, if you’re only using parallax scroll on the home page, that’s the only place you’d want parallax-related JS to be.

If we did the opposite, it would mean the CSS & JS would be loaded even if the settings aren’t being used. This would be bloat as it would mean all the JS load, even if half of it isn’t needed. Ideally, you want only the JS needed for each page and nothing more, similar to if it had been coded manually on the site.

3 Likes