Menu icon Foundation

My Posts

  • NEW
  • Customizing Top Bar breakepoints with .css

    By Alex Labanino

    top bar

    I am working on this site and when I go in Chrome to iPhone 6 (landscape), the navigation is broken.  I have a sticky nav done with jquery but if you pay attention to it the layout used in both navigations is different. The approach I used was ... (continued)


My Comments

Alex Labanino commented on Carolyn Lee's post 7 months

Go to _navigation.scss and change hide for and show-for. If you want the hamburger to fire-up in the large breakpoint, just change medium for large.
 
// Navigation breakpoints
.mobile-menu,
.site-title-bar {
@include hide-for(medium);
}

.desktop-menu,
.site-navigation .top-bar-left {
@include show-for(medium);
}
If you want to add new breakpoints just add them to _settings.scss :
 
// 2. Breakpoints
// --------------

$breakpoints: (
small: 0,
medium: 640px,
large: 1024px,
xlarge: 1200px,
xxlarge: 1440px,
);
Read for more details: https://zurb.com/university/lessons/get-control-of-foundation-s-default-breakpoints
 

Alex Labanino commented on Carolyn Lee's post 7 months

Go to _navigation.scss and change hide for and show-for. If you want the hamburger to fire-up in the large breakpoint, just change medium for large.
 
// Navigation breakpoints
.mobile-menu,
.site-title-bar {
@include hide-for(medium);
}

.desktop-menu,
.site-navigation .top-bar-left {
@include show-for(medium);
}
If you want to add new breakpoints just add them to _settings.scss :
 
// 2. Breakpoints
// --------------

$breakpoints: (
small: 0,
medium: 640px,
large: 1024px,
xlarge: 1200px,
xxlarge: 1440px,
);
Read for more details: https://zurb.com/university/lessons/get-control-of-foundation-s-default-breakpoints
 

Alex Labanino commented on Carolyn Lee's post 7 months

Go to _navigation.scss and change hide for and show-for. If you want the hamburger to fire-up in the large breakpoint, just change medium for large.
 
// Navigation breakpoints
.mobile-menu,
.site-title-bar {
@include hide-for(medium);
}

.desktop-menu,
.site-navigation .top-bar-left {
@include show-for(medium);
}
If you want to add new breakpoints just add them to _settings.scss :
 
// 2. Breakpoints
// --------------

$breakpoints: (
small: 0,
medium: 640px,
large: 1024px,
xlarge: 1200px,
xxlarge: 1440px,
);
Read for more details: https://zurb.com/university/lessons/get-control-of-foundation-s-default-breakpoints
 

Alex Labanino commented on Carolyn Lee's post 7 months

Go to _navigation.scss and change hide for and show-for. If you want the hamburger to fire-up in the large breakpoint, just change medium for large.
 
// Navigation breakpoints
.mobile-menu,
.site-title-bar {
@include hide-for(medium);
}

.desktop-menu,
.site-navigation .top-bar-left {
@include show-for(medium);
}
If you want to add new breakpoints just add them to _settings.scss :
 
// 2. Breakpoints
// --------------

$breakpoints: (
small: 0,
medium: 640px,
large: 1024px,
xlarge: 1200px,
xxlarge: 1440px,
);
Read for more details: https://zurb.com/university/lessons/get-control-of-foundation-s-default-breakpoints
 

Alex Labanino commented on Carolyn Lee's post 7 months

Go to _navigation.scss and change hide for and show-for. If you want the hamburger to fire-up in the large breakpoint, just change medium for large.
// Navigation breakpoints
.mobile-menu,
.site-title-bar {
@include hide-for(medium);
}

.desktop-menu,
.site-navigation .top-bar-left {
@include show-for(medium);
}
If you want to add new breakpoints just add them to _settings.scss :
// 2. Breakpoints
// --------------

$breakpoints: (
small: 0,
medium: 640px,
large: 1024px,
xlarge: 1200px,
xxlarge: 1440px,
);
Read for more details: https://zurb.com/university/lessons/get-control-of-foundation-s-default-breakpoints
 

Alex Labanino commented on Lynda Spangler's post over 5 years

Is there any way to use the custom form in Foundation 5?

Posts Followed

No Content

Following

    No Content

Followers

My Posts

My Comments

You commented on Carolyn Lee's post 7 months

Go to _navigation.scss and change hide for and show-for. If you want the hamburger to fire-up in the large breakpoint, just change medium for large.
 
// Navigation breakpoints
.mobile-menu,
.site-title-bar {
@include hide-for(medium);
}

.desktop-menu,
.site-navigation .top-bar-left {
@include show-for(medium);
}
If you want to add new breakpoints just add them to _settings.scss :
 
// 2. Breakpoints
// --------------

$breakpoints: (
small: 0,
medium: 640px,
large: 1024px,
xlarge: 1200px,
xxlarge: 1440px,
);
Read for more details: https://zurb.com/university/lessons/get-control-of-foundation-s-default-breakpoints
 

You commented on Carolyn Lee's post 7 months

Go to _navigation.scss and change hide for and show-for. If you want the hamburger to fire-up in the large breakpoint, just change medium for large.
 
// Navigation breakpoints
.mobile-menu,
.site-title-bar {
@include hide-for(medium);
}

.desktop-menu,
.site-navigation .top-bar-left {
@include show-for(medium);
}
If you want to add new breakpoints just add them to _settings.scss :
 
// 2. Breakpoints
// --------------

$breakpoints: (
small: 0,
medium: 640px,
large: 1024px,
xlarge: 1200px,
xxlarge: 1440px,
);
Read for more details: https://zurb.com/university/lessons/get-control-of-foundation-s-default-breakpoints
 

You commented on Carolyn Lee's post 7 months

Go to _navigation.scss and change hide for and show-for. If you want the hamburger to fire-up in the large breakpoint, just change medium for large.
 
// Navigation breakpoints
.mobile-menu,
.site-title-bar {
@include hide-for(medium);
}

.desktop-menu,
.site-navigation .top-bar-left {
@include show-for(medium);
}
If you want to add new breakpoints just add them to _settings.scss :
 
// 2. Breakpoints
// --------------

$breakpoints: (
small: 0,
medium: 640px,
large: 1024px,
xlarge: 1200px,
xxlarge: 1440px,
);
Read for more details: https://zurb.com/university/lessons/get-control-of-foundation-s-default-breakpoints
 

You commented on Carolyn Lee's post 7 months

Go to _navigation.scss and change hide for and show-for. If you want the hamburger to fire-up in the large breakpoint, just change medium for large.
 
// Navigation breakpoints
.mobile-menu,
.site-title-bar {
@include hide-for(medium);
}

.desktop-menu,
.site-navigation .top-bar-left {
@include show-for(medium);
}
If you want to add new breakpoints just add them to _settings.scss :
 
// 2. Breakpoints
// --------------

$breakpoints: (
small: 0,
medium: 640px,
large: 1024px,
xlarge: 1200px,
xxlarge: 1440px,
);
Read for more details: https://zurb.com/university/lessons/get-control-of-foundation-s-default-breakpoints
 

You commented on Carolyn Lee's post 7 months

Go to _navigation.scss and change hide for and show-for. If you want the hamburger to fire-up in the large breakpoint, just change medium for large.
// Navigation breakpoints
.mobile-menu,
.site-title-bar {
@include hide-for(medium);
}

.desktop-menu,
.site-navigation .top-bar-left {
@include show-for(medium);
}
If you want to add new breakpoints just add them to _settings.scss :
// 2. Breakpoints
// --------------

$breakpoints: (
small: 0,
medium: 640px,
large: 1024px,
xlarge: 1200px,
xxlarge: 1440px,
);
Read for more details: https://zurb.com/university/lessons/get-control-of-foundation-s-default-breakpoints
 

You commented on Lynda Spangler's post over 5 years

Is there any way to use the custom form in Foundation 5?

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content