Menu icon Foundation
How to toggle color change in top-bar between desktop view and mobile view using scss/sass

So I'm having problem trying to change the color of the top-bar while in desktop view to a certain color and then change the color of the top-bar while in mobile view. Changing the $topbar-bg: white; in _settings.scss only allows me to change it to that color in both mobile and desktop view. I was wondering how I can do so, so that different colors appear differently in the 2 views. I've tried using media query to trigger the change but clearly it isnt working. Hopefully someone can point me in the right direction. Thanks!

$topbar-bg: #333;
            
@media only screen and (min-width: 48.063em) {
    $topbar-bg: white;
    }
         

top-barcolor change

So I'm having problem trying to change the color of the top-bar while in desktop view to a certain color and then change the color of the top-bar while in mobile view. Changing the $topbar-bg: white; in _settings.scss only allows me to change it to that color in both mobile and desktop view. I was wondering how I can do so, so that different colors appear differently in the 2 views. I've tried using media query to trigger the change but clearly it isnt working. Hopefully someone can point me in the right direction. Thanks!

$topbar-bg: #333;
            
@media only screen and (min-width: 48.063em) {
    $topbar-bg: white;
    }
         
Yee Loong over 5 years ago

is there anyway to change it using SASS? Changing it using CSS requires me to change a lot of elements and I cant seem to hunt down all of them to change it to the color that I want.

Yee Loong over 5 years ago

So I end up having to do the following, not too sure whether that is entirely legit, since I don't really favor using !important in my css code.

@media only screen and (min-width:48.063em) {
.top-bar { background: white; }
.contain-to-grid { background: white; }
.top-bar ul li a { color: #303030; background: #ffffff !important; }
.top-bar-section ul li.active > a { background: #22C0E8 !important; }
.top-bar-section li a:not(.button):hover { color: white; background:#22C0E8 !important; }
}