I have a sticky navbar. I want it to be transparent so the content scrolls up behind.
I can happily make this transparent using a custom class, and it looks great AFTER scrolling starts, but the initial state has a backdrop I can’t seem to style. Anyone know how to control that (before I go digging)?
I’ve attached some screen images from a silly example. First how it looks before scrolling, then as scrolling starts - a white rectangle is visible moving upwards, then the fully-transparent look I wanted all along.
I’m sure there’s a class I can create to get rid of that initial background.
Create a custom class for the navbar bloc - call it nav-bkg.
Edit the bkg of the nav-bkg custom class to be the correct colour and then you can set the transparency.
At that stage the colour of the page background will show through. You can set the page properties to include some javascript to set the page background colour.
See the attachments. I apologise for the ghastly red.
There was custom class before (you can see in previous screenshot), I just deleted it before I made screenshot and didn’t notice that. As you said I’ll try to upload my block file then.
My first thought is that it makes life a lot harder if an example of a transparent nav header comes with a load of unecessary stuff to illustrate the problem - adding a carousel and all that stuff made things less clear. Blocsapp does not include the images in the bloc file.
I am easily able to create these transparent headers, but I failed on your example header.
When I looked at the source code, I found that your bloc had an extra class bgc-white. I don’t know where that comes from. It doesn’t exist in my examples.
Is there anyway to create one colour for the side bar menu. I can’t get it to not be black, at best, half white, and still black, it is driving me mad as I only want to change the colour of the side bar menu so it is not always black. I tried many things in the setting that would be logical.
