Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Liz Karaffa
Liz Karaffa
17,576 Points

Building the Responsive Navigation Extra Credit Challenge

In Modular CSS with Sass: Stage 5 Modular Media Queries, @guilh challenged us to post our solution for making the navigation responsive according to the screen size. Here's the code I came up with to make the navigation responsive. Not positive if I'm following best practices, but at least it worked! :smile:

The only changes I made were within the modular_extends.scss file

%nav-item-disp {
    @include mq(small)  {
    display: block;
  }
   @include mq(medium)  {
    display: inline-block;
    margin: 0 em(12px);
  }
}
%nav-item-link {
  font-size: em(18px);
  font-weight: $font-weight--light;
  display: block;
  padding: em(8px, 18px);
  @include mq(small)  {  
    border-bottom: 1px solid palette(grey, xx-light);
  }
  @include mq(medium)  {  
    border-bottom: 1px solid transparent;
  }
}
Guil Hernandez
Guil Hernandez
Treehouse Teacher
Guil Hernandez
Guil Hernandez
Treehouse Teacher

Thank you for sharing this with us, Liz Karaffa! :)