|
Group: Forum Members
Last Active: Mon 21 May 2018
Posts: 94,
Visits: 266
|
I had a bit of fun with the Foundation 'out of the box' mobile breakpoints which I hope by sharing this will help other people.
The top nav bar as used in the 'Kartris' skin uses the native Foundation breakpoints for mobile devices. The breakpoint to invoke the full size nav menu is set to 40.025em (640px) which is great for about 6 menu items, but useless if you have 18 categories like our shop does. The Foundation.css file is a behemoth and trying to pinpoint the exact point that causes the menu to go responsive is a nightmare.
For my requirements, I knew I wanted the mobile menu to invoke at 1023px so I simply found all the @media queries with 40.025em and replaced with 63.9375em (1023px). This kept the top nav responsive from 1023px downwards and gave me no grief with any other part of the layout. I had a few minor issues with the Foundation version of 'large' screen and fixed those issues accordingly by changing the easily identifiable breakpoints to 64em (1024px).
There are a number of topics about Foundation native breakpoints and the need people have to change them on the Foundation website, so this is not an uncommon issue. Thankfully Kartris are using the CSS version of Foundation which makes this easier to fix without having to install Foundation and recompile!
Hopefully this will be of use to somebody else.
|