Navbar transparent styling is a pain


#1

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.

Paul


Sticky Menu Background
#2

I’d also say that trying to style a hero bloc is even worse!

It’s a weak spot for Blocsapp, Norm.


#3

I can answer my own question - I hand-edited the background style colour for the body.


#4

Hi, can you please provide screenshot or tell the way how or where did you change that background style colour? Thank you


Transparent Code for Navigation Bar
#5

There are one, or possibly two things to change.

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.


#6

Hi Pauland,

I did everything as you said but nav. bar is still in white colour, without the change - no transparency.

Have you any advice?

Thanx


#7


#8

… thinking … did you set the “sticky” flag and preview in browser?


#9

Yes, I did…


Checked preview in Safari and Chrome…


#10

Perhaps you can upload your blocs somewhere and I’ll download it. Bizarrely, you can’t upload them here!


#11

…there’s no custom class on that bloc…


#12

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.


#13

Hi Paul,

here is the link to bloc file:

Thank you


#14

OK, I took a look.

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.

What version of blocsapp are you using?

I used 2.4 b17.

Paul

Yours:

Mine:


#15

I’m using version 2.3.2. It shows me that it’s latest version available… I’ll try to update to latest beta version.


#16

Great, it works in beta version. Any official release date?

Thank you Paul!


#17


#18

… when it’s ready …

Glad it’s working now.


#19

Hi Paul

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.


#20

Use the class manager and add a class “blocsapp-special-menu blocsnav”. Set the background colour.