Menu icon Foundation
Help with top-bar SASS overrides

Having major difficulty with making simple changes to the top-bar styling using SASS(SCSS). In a nutshell I have bower & compass setup. No problems generating a new project. I have a partial SCSS file I'm importing into the app.scss file. I've even made some simple straight css mods into the partials file that are working. So I know all of the correct infrastructure is in place.

Following the code examples from the Foundation Docs in regards to top-bar, I can't even get it to correctly change the bg-color.

My code is below if anyone can point me in the right direction it would be supppper appreciated. :)

// app.scss file contents

@import "settings";
@import "foundation";
@import "custom-styles";
            

         

// _custom-styles.scss file contents

$include-html-top-bar-classes: $include-html-classes;

$topbar-bg: #abc123;

$topbar-height: 100px;

body {
    padding: 70px;
}

// body overide works great, nothing else above that will work correctly however.
            

         

Sasstopbar

Having major difficulty with making simple changes to the top-bar styling using SASS(SCSS). In a nutshell I have bower & compass setup. No problems generating a new project. I have a partial SCSS file I'm importing into the app.scss file. I've even made some simple straight css mods into the partials file that are working. So I know all of the correct infrastructure is in place.

Following the code examples from the Foundation Docs in regards to top-bar, I can't even get it to correctly change the bg-color.

My code is below if anyone can point me in the right direction it would be supppper appreciated. :)

// app.scss file contents

@import "settings";
@import "foundation";
@import "custom-styles";
            

         

// _custom-styles.scss file contents

$include-html-top-bar-classes: $include-html-classes;

$topbar-bg: #abc123;

$topbar-height: 100px;

body {
    padding: 70px;
}

// body overide works great, nothing else above that will work correctly however.
            

         
Rafi Benkual over 5 years ago

Did you use the CLI to create the project? If so, you probably made a compass project using foundation new MY_PROJECT. Then you need to run compass watch. That watch for changes in scss and compile it.

Maciej Kuś over 5 years ago

Hi,

Simply place overrides before including foundation.scss. Should work.
Try that way:

@import "settings";
@import "custom-styles";
@import "foundation";

Eric Mayfield over 5 years ago

Rafi, yes I did already do that

Maciej, I will try this and reply back momentarily.

Eric Mayfield over 5 years ago

Maciej, I love you!!! Worked perfectly!! Thank you so much.

Eric Mayfield over 5 years ago

Hey I am just realizing that this is causing a problem with normal CSS overrides. As I suppose that the foundation import taking place after the custom sass partial import is overwriting those from its normalize.css contents code.