Zurb Foundation: Semi transparent top bar possible?

Question

Is there any way to have a semi-transparent top bar with Zurb Foundation?

I have defined all the relevant variables, from what I can tell, in my _settings.scss file:

$topbar-bg-color
$topbar-bg
$topbar-dropdown-bg
$topbar-dropdown-link-bg
$topbar-dropdown-label-bg

And have tried all number of variations (of rgba's with alpha values from 0-0.5) and have always ended up with either a fully transparent bar or a semi-transparent bar with the dropdowns/buttons stacking their background on top and thus appearing darker/more opaque.

Is there any way to have a topbar that is semi-transparent throughout?

I can see in the stylesheet that .top-bar-section li a:not(.button) is always getting a background colour. I know I could manually override this in my own stylesheet, but I feel like there must be a way to setup the variables so these buttons don't appear darker?

Answer 1

The background on the links on the right side of your screenshot are being set by the $topbar-dropdown-bg variable. You'll need to change that to none or transparent.

The other steps are:

1. Set the background color variables to none.
2. Set the $topbar-bg-color to a semi-transparent value, like rgba(#333,0.5).

Here's a demo. I've tried to comment all the variables I set the background to none.

Answer 2

try this.

.top-bar { background-color: transparent; }
.top-bar-section { background-color: transparent !important;  }
.top-bar-section li { background-color: transparent !important;  }
.top-bar-section li a { background-color: transparent !important;  }

Answer 3

I tried following code, and sounds fine to me. I added few lines to Juni Brosas codes.

header,div.contain-to-grid.sticky, nav.top-bar {
   
    background: none;}

    li.has-dropdown.a{background: none;}

.top-bar { background-color: transparent; }
.top-bar-section { background-color: transparent !important;  }
.top-bar-section li { background-color: transparent !important;  }
.top-bar-section li a { background-color: transparent !important;  }