Menu icon Foundation
How to remove class from menu at medium screenwidth?

Hi,

I'm using the Response Menu at http://foundation.zurb.com/sites/docs/responsive-navigation.html (NOT the Responsive Toggle).

How can I remove the "vertical" class when screen width is medium or higher? I'm trying to get a stacked menu for small screens, but horizontal-menu for everything larger.

Is the best way to create my own media query or does one already exist?

thanks!

<ul class="vertical menu" data-responsive-menu="drilldown medium-dropdown">
    <!-- how to remove keep "vertical" for small screens but not medium & large?" --->
</ul>
            

         

menufoundation 6media query

Hi,

I'm using the Response Menu at http://foundation.zurb.com/sites/docs/responsive-navigation.html (NOT the Responsive Toggle).

How can I remove the "vertical" class when screen width is medium or higher? I'm trying to get a stacked menu for small screens, but horizontal-menu for everything larger.

Is the best way to create my own media query or does one already exist?

thanks!

<ul class="vertical menu" data-responsive-menu="drilldown medium-dropdown">
    <!-- how to remove keep "vertical" for small screens but not medium & large?" --->
</ul>
            

         

This post has been closed. No new replies can be added.

E. Smythe almost 4 years ago

I've tried this but it's not removing at small screenwidths:

.vertical-medium {
  // Only affects medium screens and larger
  @include breakpoint(medium) {
    @extend .vertical;
  }
}

E. Smythe almost 4 years ago

...and I see this :

.is-dropdown-menu.vertical, .is-dropdown-menu.vertical-medium {
  width: 100px; }
  .is-dropdown-menu.vertical.align-right, .is-dropdown-menu.align-right.vertical-medium {
    float: right; }
  .is-dropdown-menu.vertical > li .submenu, .is-dropdown-menu.vertical-medium > li .submenu {
    top: 0;
    left: 100%; }

but I want to use the drilldown menu and the dropdown menu both (dropdown for medium/large screens; drilldown with stacking menus on small screens)