Menu icon Foundation
How To MakeTransparent Top Bar

Hello,

I know this has been asked before but curious if anyone has a new development for something that works nicely.

Essentially I want to put the topbar on top of full width background image....you know, the style everyone uses.

I am using SASS and the latest version of F5.

I tried making a transparent color variable with rgba and it just goes white (obviously because the body color is white)....

Not sure what exactly I am asking but it would seem the top bar needs to be position absolute on the image or some kind of overflow hack to make it appear on top?

topbartransparentoverlay

Hello,

I know this has been asked before but curious if anyone has a new development for something that works nicely.

Essentially I want to put the topbar on top of full width background image....you know, the style everyone uses.

I am using SASS and the latest version of F5.

I tried making a transparent color variable with rgba and it just goes white (obviously because the body color is white)....

Not sure what exactly I am asking but it would seem the top bar needs to be position absolute on the image or some kind of overflow hack to make it appear on top?

Rafi Benkual about 4 years ago

You can use a background image because it wont be in the flow and push other elements around. Example: http://codepen.io/rafibomb/pen/OVaKqq

This should get you started.

ayezee almost 4 years ago

Hey Rafi, thanks for the reply...I was working on your example just a little bit and was struggling to get text into the image...

In other words if that image was the hero section with a H1 and subheadline in there.

Any thoughts?