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 3 months ago

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

Rafi Benkual 3 months ago

You also don't need !important 

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

Rafi Benkual 3 months ago

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

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

 

Steve Juliusson 2 months ago

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