Topbar Breakpoint Mobile Nav Hamburger Menu

[grand-lotus-iroh]

I wish to change the topbar breakpoint nav menu appears (the hamburger menu too). Am I missing anything? The hamburger menu won't appear. Is that because my css class on the topbar is "show-form-small-only"?

I've made some tweaks to this file: /css/foundation.css

around line #1522 @media only screen and (min-width: 70.063em) {

around line #1226 meta.foundation-mq-topbar

---

I've found two links, but not 100% working. http://stackoverflow.com/questions/21838690/zurb-foundation-top-navigation-bar-change-breakpoint http://foundation.zurb.com/forum/posts/1053-changing-topbar-breakpoint-using-css

[tsquez]

Hi Maggew,

I believe you are correct, if you have it set to show-for-small-only then that is when it will appear.

I would recommend that you not tweak the foundation.css (you will lose any edits when you update WP-Forge) instead use the child theme. style.css. At the bottom of the style.css you will see media queries section. this contains the media queries listed here http://foundation.zurb.com/docs/media-queries.html

You can copy and paste them into the child theme css. My apologies, but I think I forgot to add those back in when I updated WP-Starter. I will add those here shortly. In the meantime I will provide it here for you:

/* Child Theme Media Queries */
@media only screen and (max-width: 40em) { /* max-width 640px, mobile-only styles, use when QAing mobile issues */
    }
@media only screen and (min-width: 40.063em) and (max-width: 64em) { /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */
    }
@media only screen and (min-width: 64.063em) and (max-width: 90em) { /* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */
    }
@media only screen and (min-width: 90.063em) and (max-width: 120em) { /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */
    }
@media only screen and (min-width: 120.063em) { /* min-width 1921px, xlarge screens */
    }