Menu icon Foundation
Topbar Styling

Hi I am trying to style the topbar navigation but the styling is not showing.

I would like to know if I am doing the format in the correct manner.

//app.css
        
.top-bar{
	$topbar-height: rem-calc(90);
	$topbar-link-color: $soyabean;
    $topbar-dropdown-link-color: $purple;
}
         

// _settings.scss

$soyabean     	: #675E51;
$purple         : #551A8B;
            

         

Sass

Hi I am trying to style the topbar navigation but the styling is not showing.

I would like to know if I am doing the format in the correct manner.

//app.css
        
.top-bar{
	$topbar-height: rem-calc(90);
	$topbar-link-color: $soyabean;
    $topbar-dropdown-link-color: $purple;
}
         

// _settings.scss

$soyabean     	: #675E51;
$purple         : #551A8B;
            

         
Rafi Benkual over 4 years ago

Ya, Sass variables won't work like that or in a CSS file because they need to be compiled. The browser can't read Sass/SCSS.

So you'd make the changes in _settings.scss

Uncomment the setting -> change the value -> save

In the app.scss you can use variables like this:

.top-bar{
  height: $topbar-height;
  li a {
           color: $soyabean;
  }
}

James Van Waza over 4 years ago

Thanks Rafi, My question is when I use the styles. it is being overwrritten. Should I use the !important or?