Navbar transparent styling is a pain

1 Like

… when it’s ready …

Glad it’s working now.

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.

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

Thank you so much paul for that help.

I was creating a menu etc, but could not change it at all, other than half the box. This is a great help and also has opened me up to the class manager on a new level. I wasn’t really aware that I could add a setting into the list and edit that way. Thanks Paul.

1 Like

Glad it worked out.


1 Like

Hi Paul…

I wonder if you have any advice. I can’t get the global background for the nav to be transparent. I can get it for when it drops after selected with just the texts etc, but when I enter my site, I am always confronted with the global block being completely filled in with colour, subsequently placing itself over the main block inside the main frame…Any ideas…

To clarify. Global bloc - for nave, background can’t change to transparent.
But it is transparent when entering the navigation text after you select a link from the menu…


Do you want it like this…

the site is under development, i have it in top-nav and bottom nav


Yes, when in doubt inspect the web page elements. All web browsers allow you to inspect elements and then you can find the classes being used by blocsapp - then experiment. I guess Paug has the answer already!

I would investigate further, but I’m super busy right now.

Hey Paug, yes thats exactly what I was trying to do. I was able to get the side bar nav to be transparent but not how you have done it on the main page…

I have mine in the Global area, so I wonder if Norman is reading this, he could let me know also if it can be done in the global area, or I would have to move the block down into the top of the inside frame…

Thanks Paug

Transparent BG in Top

1- Insert navigation TOP-Global

2- set the Bloc Nav to Sticky

3- Create an Class name it bg-c

4- set the Dimensions height of the Global Bloc to 70 px

5- Set the Image/Color BG C to 0 zero in opacity

6- Set the gradient to Black and 0 Zero in opacity

Sometimes you must do it twice to get it right.

  • In the Dynamic area, insert an Image

  • Create an Class name it Bloctop-adj

  • Set the adjustment to the Bloc -70 px, for the upper line at the bloc.

  • Ready

Norm, I hope your watching. The setting of navbar transparencies should be a click on an option, not all this rigmarole. I’ll ask Santa to help.


Hey Paug. Thanks for this. I will try this and let you know ASAP. Sorry for the delay as I was not around yesterday.

Thanks Paug.

Hi Paug

Thanks for that.

I was actually doing everything the same as what you showed me as I had used something similar from @pauland.

Here was my problem, and my findings…

I could get transparent for slide nav. But I could not get the nav bar to be clear as you entered the main page of the site. I thankfully found you guys and your help, and it showed that I was in the correct area.

Answer to my main problem. To get rid of the black line when scrolling and to stop the nav bar from being intrusive over the image as you enter the site before scrolling. I simply set the height function (which you mentioned) to zero. This stopped the black line and also allowed the nav bar to become invisible, subsequently making everything perfect.

Edit: or so I thought… The problem now occurs that although I can get rid of the box line on scrolling, it sadly means now the menu or hamburger, which ever you are using, then becomes to0 close to the main frame and content…Sigh… :wink:

Thanks Paug…Also @Paulland for his previous introduction to this problem…

I am kind of getting there with it. My problem is also to do with the parallax on the dynamic main page. I am finding by having that set on, it creates this visual block across the page by the nav bar…

Hey Paug, not sure where I

“Set the adjustment to the Bloc -70 px, for the upper line at the bloc.”

But I seem to be able to get everything ok, other than that annoying black line…

My problem is the nav even set to transparent, still appears as a colour block on the main webpage before scrolling. I believe it is happening because I have the dynamic block 1 set to parallax, which is really frustrating me. It basically blocks out the hero page image in the dynamic page.

I don’t see why this feature seems to be so complex and completely frustrating to implement.

My question to you is. Do you have your dynamic page set to parallax, and if not, could you set it to that to just see if it creates the problem I experiencing…

Thanks Paug

Hi Fourier…

There´s a problem with the Box shadow in Blocs CSS, so you have to add this string to your´s document like this…

.sticky-nav.sticky{box-shadow:0 0px!important;}

copy this script and save it with the built in Simple text ( Plain text )

Name this CSS script to line.css
and then save it under Page Settings like the attached Image below, then you get rid of the black line


Hey Paug, sorry as I was away for a while, thanks so much for this, I will check this out.
Best wishes

Hi! Im trying to do this to get this effect but it doest work for me! the slider gets on the top of the menu.
This is what I mean to achieve but with the menu on the top and the background at the back

I follow your instructions but I get the menu hidden and it show only when scrolling down. How can I have the menu always visible and without the sticky appearance?