After playing a couple hours with the settings of Bricks 1.8.1, I finally come to the first post in the forum. The structure of my menu in the header template is Section (as div) > Container (as nav) > Blocks. The container has position grid with three blocks inside.
The section (div) is 64px high and absolutely positioned with a top distance of 54px. The container (nav) has no extra positions except that it is centered within the section (div) with a 0-auto-margin.
In the Header Settings under Template settings, I have activated Sticky Header and Sticky On Scroll. Since the hero background image has a hight of 300px and the menu should slide up when the bottom of the hero image is reached, the Slide up after option is set to 182px.
With these settings applied, the header just disappears completely when it “hits” the end of the hero image at 300px from the top. When scrolling up, the header instantly appears again at top: 54px.
Sorry I can’t help.
I have the same issue, and a few others. ( Change colours and they aren’t reflected in the front end. Change Text ditto. Sliding sticky never seems to work. Getting a header to just scroll to the top and then stop and stick, nope can’t seem to do it.
Just can’t get the sticky header to work the way I can in other builders. I expect that there is some CSS incantation that will sort it, but I don’t use a pagebuilder to also need to learn css in depth. Sadly that seems to be the direction of travel for Bricks.
The header in my original post was just a couple of clicks in GeneratePress/GenerateBlocks. I may go back to that despite it’s gutenturd interface that I really don’t enjoy.
I have no issues with stick header. I suspect yours is caused by an absolutely position element, but it’s hard to say without seeing the structure/settings.
Worth removing absolute temporarily - see if it works. Then maybe a screenshot/detail of what you want to achieve, as it’s probably possible without absolute divs.
The div is absolutely positioned because I want to achieve the “floating” effect upon page loading with a distance of 54px from the top of the page. Is there another way to do that?
With “normal” positioning, the sticky header effect works just fine.
There is… but I can’t explain well, as I’d need to experiment to get the layout… but… if you edit the header, set the height, and use padding or flex align to move the menu down inside it… use the header itself for the ‘hero’ image… change height on sticky… this sort of thing, you can get the effect you want without absolute positions.
Another way is this one:
But make the first row an empty, transparent DIV, which you then shrink to 0px as the tutorial.
I finally figured it out how to make it work. I removed the position absolute from the section (div) and added a class called .nav-main-positioned to it. This class positions the .nav-main section (div) absolutely with a top offset of 54px. I created another class called .nav-main-scrollup which has a transform translateY property moving the section (div) up to the top of the page. This class is not applied to the section (div) initially.
On the header/hero section in the page template, I added four interactions. The first two remove the class .nav-main-positioned and add the class .nav-main-scrollup after scrolling down the height of the hero section (300px). The two other interactions add the class .nav-main-positioned and remove the class .nav-main-scrollup when the header/hero section enters the viewport. In all four interactions, the class .nav-main is the target.
I did not change any of the header settings in the template settings.
This works well so far. I might just need to add a bit of transition time to make it look a little smoother.
