Foundation CSS Top-bar opacity

Question

I am using Zurb's Foundation 5 to create a page, and I want to make the top-bar somewhat transparent. Any idea how this would be possible via css or jquery? Any code samples are appreciated. Thank you.

Answer 1

Be sure that you linked your app.css after the foundation css file in your html and then add the following code to your app.css:

.top-bar {
      opacity: 0.3;
}

Set the opacity value as you want where it is a value lower than 1 and greater than or equals 0

Answer 2

I came across the same problem and thought I would post my solution. After checking that my css file was correctly linked and the .top-bar opacity was either set directly or with an rgba value (eg rgba(0,0,255,0.5) ), the top-bar was still not transparent.

My problem was the top-bar was wrapped in an element with a background set to a non-transparent color! Removing this solved the issue.

If you haven't made the same mistake as me, it could also have something to do with the topbar dropdown background colors - explained here using the foundation Sass variables.