Menu icon Foundation
Unable to make semi-transparent Top Bar

I'm using Foundation 6 (CSS version).  I'm trying to make a semi-transparent top bar.  I've read how to do it, but it's not working (...I even used !important).  If anyone can tell me what the problem is, I'd appreciate it.

Here's the custom CSS I put in my app.css file:

 

.top-bar {

    width:100%; 

    background-color: rgba(230, 230, 230, 0.7); !important;

}

 

.top-bar ul {

    background-color: transparent; !important;

}

top-bartop-bar-ulsemi-transparent

I'm using Foundation 6 (CSS version).  I'm trying to make a semi-transparent top bar.  I've read how to do it, but it's not working (...I even used !important).  If anyone can tell me what the problem is, I'd appreciate it.

Here's the custom CSS I put in my app.css file:

 

.top-bar {

    width:100%; 

    background-color: rgba(230, 230, 230, 0.7); !important;

}

 

.top-bar ul {

    background-color: transparent; !important;

}

This post has been closed. No new replies can be added.

Rafi Benkual 26 days ago

looks like there is an error in this CSS: transparent; !important; should be transparent !important;

Rafi Benkual 26 days ago

You also don't need !important 

http://codepen.io/rafibomb/pen/oWGgaN

Rafi Benkual 25 days ago

Steve - can you see this codepen? Seems to work fine here with the corrected CSS

https://codepen.io/rafibomb/pen/oWGgaN

 

Steve Juliusson 12 days ago

I copied your code and it still didn't work.  Any other thoughts?