Menu icon Foundation
Topbar and rgba colors

Hi, I am using SASS Foundation and I would like to have a partially transparent topbar.

I have set $topbar-bg-color: rgba(0,0,0,0.9); but I can't get the background color (and opacity) of the links to look like the rest of the topbar. I tried changing the background of a:not(.button) as in the code below, but when I set it to transparent (or any other rgba color with alpha=0 ) it turns to solid black.

Any help would be appreciated.

// _settings.scss
$topbar-bg-color: rgba(0,0,0,0.9);

// _custom.scss
.top-bar-section {li {
          a:not(.button) {
            background: transparent;
          }
        }
     }
            

         

Cattura di schermata  5

topbarrgbaSass

Hi, I am using SASS Foundation and I would like to have a partially transparent topbar.

I have set $topbar-bg-color: rgba(0,0,0,0.9); but I can't get the background color (and opacity) of the links to look like the rest of the topbar. I tried changing the background of a:not(.button) as in the code below, but when I set it to transparent (or any other rgba color with alpha=0 ) it turns to solid black.

Any help would be appreciated.

// _settings.scss
$topbar-bg-color: rgba(0,0,0,0.9);

// _custom.scss
.top-bar-section {li {
          a:not(.button) {
            background: transparent;
          }
        }
     }
            

         

Cattura di schermata  5

Ale L gave the most helpful answer for this post
Ale L almost 6 years ago

I managed to solve the issue this way:

 // _settings.scss
$topbar-bg-color: rgba(0,0,0,0);

// _custom.scss
.top-bar {
  background-color: rgba(0,0,0,0.9);
}

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

Justin Balesteri almost 6 years ago

its not the achor link it is the list item that needs the background applied to it.

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

I find that often you have to put !important to override.

Ale L almost 6 years ago

Thank you for your answer, Justin, but unfortunately nothing seems to change in my page. Any clue?

Ghaida Zahran almost 6 years ago

Justin's correct that sometimes you'll need to add !important to override. In this case, simply add !important to your own code above like so:

.top-bar-section {
  background: $topbar-bg-color !important;
    li {
      background: $topbar-bg-color !important;
      a:not(.button) {
        background: $topbar-bg-color !important;
      }
   }
}

Ale L almost 6 years ago

I managed to solve the issue this way:

 // _settings.scss
$topbar-bg-color: rgba(0,0,0,0);

// _custom.scss
.top-bar {
  background-color: rgba(0,0,0,0.9);
}