Menu icon Foundation
Foundation.js: hideFor: ' ' / data-hide-for

Where does 'medium' come from and how can I change the breakpoints? 

I use this for data-hide-for=" " but I cant find anything on that one in the F6 Docs. 

 

Found this in the Foundation.js but I want to change 'medium'.

ResponsiveToggle.defaults = {

    /**

     * The breakpoint after which the menu is always shown, and the tab bar is hidden.

     * @option

     * @example 'medium'

     */

    hideFor: 'medium'

  };

breakpointsResponsivejavascript

Where does 'medium' come from and how can I change the breakpoints? 

I use this for data-hide-for=" " but I cant find anything on that one in the F6 Docs. 

 

Found this in the Foundation.js but I want to change 'medium'.

ResponsiveToggle.defaults = {

    /**

     * The breakpoint after which the menu is always shown, and the tab bar is hidden.

     * @option

     * @example 'medium'

     */

    hideFor: 'medium'

  };

Joshua Scott about 3 years ago

You will need to update it in the sass file. For the Zurb Template, the breakpoints are defined in src/assets/scss/_settings.scss . You can change the breakpoint by updating the following:

 

$breakpoints: ( 
   small: 0, 
   medium: 640px, 
   large: 1024px, 
   xlarge: 1200px, 
   xxlarge: 1440px, 
); 

YH about 3 years ago

Thanks Joshua, I am not using Sass but I found out the correct way to change it in the CSS file.

I changed large size 1px so iPad landscape is not seen as large anymore. This way the responsive menu etc trigger on iPad.

 

CSS:

.foundation-mq {

  font-family: "small=0em&medium=40em&large=64.063em&xlarge=75em&xxlarge=90em"; }