H. E. Pennypacker H. E. Pennypacker - 3 months ago 10
Sass (Sass) Question

Using mobile navigation breakpoint on desktop viewport w/o editing breakpoints

I have a responsive site with common breakpoints set up in SCSS as mixins. I would like to force the mobile breakpoint (collapsed nav) on a desktop viewport for only a single page out of the entire site.

My first instinct was to extend the existing navbar class into a forced-mobile class which I would append to the existing navbar class on that page and include a different breakpoint mixin for the forced class so that all screen sizes >= 1024px would show the collapsed mobile menu.

Would this be the best practice for this situation? Or is there a simpler, more DRY technique that would display the collapsed mobile navbar for that page only?

Answer

Usually I would approach something like this by adding a class to the body tag of the page in question, then use that new class to target the navbar on just that one page.

I can't picture what you are describing about extending your existing navbar class so not sure if my suggestion is an improvement.

Update

What I was thinking of was:

Create a _nav.scss partial file with your common nav styling

// _nav.scss

    // SCSS partial with common nav styling

Then import this partial into your base SCSS file, with media queries as needed

    // default nav on most pages, adjust breakpoint as req'd
    @media screen and (max-width: 800px) {
        .current-nav{
            @import 'nav';  
        }
    }


    // nav on .forced-mobile page only
    @media screen and (min-width: 1025px) {
        .forced-mobile .current-nav{
            @import 'nav';  
        }

   }  

HTML structure

<body>
 <!-- default for most pages -->
    ...
    <div.current-nav>
        ... 
    </div>

</body>


<body class="forced-mobile">
 <!-- forced-mobile page -->
    ...
    <div.current-nav>
        ... 
    </div>

</body>
Comments