Menu icon Foundation
Topbar small menu styles

If we want the small screen menu, exposed when the "hamburger" is clicked, to have different backgrounds and link colors than we get when the wider screen topbar is displayed. where do we change those styles?

Would prefer to change it in the SCSS, but don't think those are broken out -- so what CSS rules should I use?

Thanks!

topbar scss

If we want the small screen menu, exposed when the "hamburger" is clicked, to have different backgrounds and link colors than we get when the wider screen topbar is displayed. where do we change those styles?

Would prefer to change it in the SCSS, but don't think those are broken out -- so what CSS rules should I use?

Thanks!

Shoaib Iqbal almost 5 years ago

You can use media queries if you want different style for small and large screens. I posted an example here http://codepen.io/anon/pen/zxwvQq , try changing the browser width

Rafi Benkual almost 5 years ago

You can use SCSS to do this like so:

@media #{$small-only} { 
  .top-bar {
    background-color: $white;
  }
}

Bill Sholar almost 5 years ago

Thanks Shoaib - works great. I used Rafi's SCSS with the style you suggested - works!

For others, here is the scss:

@media #{$small-only} {
.top-bar-section ul li{
background-color: #fff;
}
}

(You'll need to uncomment in _settings.scss the definitions of $small-range, $screen, and $small-only)