I’m working on a new website, and I’d like to have a semi-transparent navigation bar that “floats” in place (when scrolling). I recall there was once a tutorial video shared here on the forum explaining how to achieve this. I’ve searched everywhere but can’t seem to find the video. Could someone explain the best way to do this? (Or maybe share the video again?)
2 Likes
You could do this by leaving the nav bar bloc background transparent, add a class to the row (or column, or nav bar or container fluid - you’ll see in the layer tree) of white. 30% opacity or whatever, and play with padding and margins.
Nice idea, I like it!
2 Likes
I have done this a few times - loads of ways to create it.
I just knocked one up - stuck a DIV in navigation and just built in inside and messed around to get the look I wanted - just stuck a stripe icon in as a logo !
I like this look, looks clean and tidy.
3 Likes
As with @AdieJAM suggestion you could also add a class to make it fixed, using Fixed so that it stays put on the page when scrolling.
Position: Fixed
Z-Index: Value above everything else
Edge: In this case 20 pxls from the top
2 Likes
SOLVED!:That is exactly what I want to create! I can create a nice semitransparent bar, but as soon as I want it to be sticky weird things happen. I must be doing something completely wrong, but I just can’t figure out what…
Could you perhaps make a video? Or a more detailed “tutorial”…
SOLUTION: I created a new navbar from scratch, not using a hero bloc and now it works!!
Thanks for all the help!!!