Displaying the mobile menu toggle on iPad
-
-
- Wicko
- Elite Rocketeer
- Posts: 884
- Thanks: 8
- Self employed Graphic designer with over 20 years of experience in branding, retail packaging and web design.
-
I am using Gantry 5 and the Helium template on WordPress.
How can I set the break point to switch the menu to mobile toggle?
I would like to display the mobile menu on iPads and tablets. - This image is hidden for guests.
Please log in or register to see it.
Wicko Design is a multi-disciplined creative agency based in the South East of England. Specialising in web design & development, retail packaging and brand identity.
https://www.wickodesign.com
-
-
-
- Wicko
- Elite Rocketeer
- Posts: 884
- Thanks: 8
- Self employed Graphic designer with over 20 years of experience in branding, retail packaging and web design.
-
ok I think I have figured it out myself
In the theme layout option I selected the menu block and added the class hidden-tablet
more responsive classes can be found here Gantry responsive classes
Then in my custom css I added the following
@media only screen and (max-width: 1024px) { .g-offcanvas-hide.g-offcanvas-toggle { display: block; } }
This works for iPad when in portrait mode and displays in Landscape mode - This image is hidden for guests.
Please log in or register to see it.
Wicko Design is a multi-disciplined creative agency based in the South East of England. Specialising in web design & development, retail packaging and brand identity.
https://www.wickodesign.com
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
Please note that by answering your own post you take yourself out of the MODS "unanswered posts" queue and therefore might have to wait longer for a response - it's better to edit your original post so this does not happen.
I wouldn't do it that way:
1. Hardcoding breakpoints is a bad idea since they can be altered Gantry 5 setting - that is why you should use the mixing that we provide:// Gantry 5 custom CSS file // import breakpoints @import "dependencies"; // Typical values are the default breakpoints set in Gantry 5 // but these values are user definable in style settings // so that is why the code below uses mixins to get the actual // values from Gantry 5 template. // commonly used media queries // typically min 75rem @include breakpoint(large-desktop-range) { } // typically range 60rem to 74.938rem @include breakpoint(desktop-range) { } // typically 48rem to 59.938rem @include breakpoint(tablet-range) { } // typically 30rem to 47.938rem @include breakpoint(large-mobile-range) { } // typically max 30rem @include breakpoint(small-mobile-range) { } // Less commonly used media queries // typically min 60rem @include breakpoint(desktop-only) { } // typically min 48rem @include breakpoint(no-mobile) { } // typically max 47.938 rem @include breakpoint(mobile-only) { } // typically max 59.938rem @include breakpoint(no-desktop) { } // Mobile Menu Breakpoint @media only all and (max-width: $breakpoints-mobile-menu-breakpoint) { } @import "nucleus/mixins/breakpoints";
2. You can actually alter the mobile menu breakpoint in gantry 5 admin on the styles tab of the base outline under "breakpoints" > "mobile menu"
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Wicko
- Elite Rocketeer
- Posts: 884
- Thanks: 8
- Self employed Graphic designer with over 20 years of experience in branding, retail packaging and web design.
-
Hi Mark
Good to hear from you.
Tablet breakpoint is set at 48rem and so is the mobile menu. but this doesn't display on iPads.
So instead I have set the mobile breakpoint to 60rem (desktop).
I guess this is just a size and was put off because it was desktop.
iPad protrait is the desktop size and landscape is large-desktop size.
You can see how it looks here - Last Edit: 1 year 10 months ago by Wicko.
- This image is hidden for guests.
Please log in or register to see it.
Wicko Design is a multi-disciplined creative agency based in the South East of England. Specialising in web design & development, retail packaging and brand identity.
https://www.wickodesign.com
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
An iPad has a high resolution - media queries only work on viewport size. If you want the toggle to show on an iPad then the "mobile menu" breakpoint needs to be 60rem; Effectively an iPad is the same viewport size as a desktop.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
Time to create page: 0.055 seconds