Remove Combo Class At Desktop

Design help Custom code
1

Hello everyone!

Can anyone help me with how I can remove a combo class once I’m within the desktop breakpoint? Open to both no-code and custom code solutions.

Thank you and I look forward to everyone’s suggestion!

Joma

2

I’m not sure I’m clear on what you’re asking.

To remove a combo class you’d just click it and hit remove.

3

Hello @Anon_User! Thanks for your reply.

I’m creating my own custom nav submenu links for my tablet and mobile breakpoint. I was able to integrate a no-scroll custom code that adds a no-scroll combo class to the body and makes the website unscrollable if the submenu is open, and makes it scrollable again upon closing. The problem here is that while the submenu is open and I’m currently viewing the (LIVE) website in portrait mode (tablet breakpoint) on an iPad, once I turn my tablet 90 degrees to view it in landscape mode (desktop breakpoint), the website remains unscrollable even though the submenu is no longer visible (hides automatically) as it enters the desktop breakpoint.

What I want to achieve here is that I want to call a js function once the website enters or transitions to desktop breakpoint.

4

Instead of removing the class make it so the “no scroll” css only applies to smaller screens.

5

Hello @ollebrickarp !

Applying the no-scroll class to tablet and phone breakpoints only is not the issue. But let’s say I will implement and follow your suggestion, I would like to know then how you can make a trigger that would make the site unscrollable if the nav submenu is open, and make it scrollable again if it’s close?

Looking forward to your response.

6

Hi @Joma ,

What your looking for is the Javascript matchMedia property.
Its the MediaQuery of JS.
This Script listens to the window width. if it becomes larger than X it will fire:

<script>
  const mql = window.matchMedia("(min-width: 1100px)"); // Change width as needed
    function removeClass(mql) {
      if(mql.matches) {   
        document.body.classList.remove("no-scroll"); // Change ClassName as needed
      }
    }    
  mql.addListener(removeClass);  
</script>

Personally, I would always recommend trying to adjust the original code you use to fit your
needs (if possible) before sorting to a 2nd code.
If you could share the code you’re using maybe you could get a revision to meet your needs
without the use of this additional code. That could be even better.

7

It’s hard to give an exact solution since you haven’t shared any link to the site so I will presume a few things;

  • You have a button that appear on smaller screens
  • This button toggle the navbar on or off
  • It also adds a no-scroll class to the body
    • This class adds overflow: hidden;
    • This css is applied to all screen sizes

If all of this is correct then simply change the css so that the .no-scroll class only applies styles to smaller screens. That way the class have no effect on “desktop”. I don’t know if you use Webflow to edit this class or if it’s custom. If custom simply wrap the .no-scroll class in a media query:

@media screen and (max-width: 991px) {
  .no-scroll {
    overflow: hidden;
  }
}

This tells the browser to only remove scroll (overflow: hidden) if the screen size is smaller than “desktop” (as in how Webflow deals with screen sizes). No css is applied on desktop and the site will function the same with or without the class.

Why this is better than removing the class

  • Having a class that does nothing on certain screen sizes isn’t a big deal
    • Larger screen sizes don’t even have to bother about it since the class have no applied styles
  • This solution adds much less code than using js to remove the class
  • It also don’t mess with any other logic, if the user rotates back the site will be unscrollable again and the navbar will still be visible.
    • If you remove the class you might actually end up with opposite logic when the user rotates the tablet back to portrait orientation. The navbar will be visible but the site scrollable. Depending on how you add the class you might end up in a situation where closing the navbar at this stage will actually prevent scrolling and vice versa. At this point the user have to reload the page to fix the problem.