0
Welcome Guest! Login
0 items Join Now

SOLVED Gantry5 mobile menu not showing on iPhone

    • Wicko's Avatar
    • Wicko
    • Elite Rocketeer
    • Posts: 884
    • Thanks: 8
    • Self employed Graphic designer with over 20 years of experience in branding, retail packaging and web design.

    SOLVED Gantry5 mobile menu not showing on iPhone

    Posted 2 years 3 months ago
    • I have notice on one of my sites that the mobile burger menu is not displaying on iPhone.
      When I inspect is on Firefox mobile view then the burger menu is displayed. But if I inspeact on Chrome the burger menu is not there.
      How can I detect what is causing this. I have not made any changes from the standard mobile menu particles on this site.
      The site is WordPress - WooCommerce with Gantry 5.5.14 using the base Helium theme 5.5.14.
      If I open the menu within the Gantry dashdoard and then save as suggested after some of the updates I am getting an error after several minutes. See screenshot.

      My site is mysticgames.co.uk

      regards

      David
    • 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's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13482
    • Web Designer/Developer

    Re: SOLVED Gantry5 mobile menu not showing on iPhone

    Posted 2 years 3 months ago
    • There is CSS hiding the toggle. No idea where it is coming from though as you have a CSS compressor/combiner active - so you need to disable it and clear ca he for me to be able to tell.

      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's Avatar
    • Wicko
    • Elite Rocketeer
    • Posts: 884
    • Thanks: 8
    • Self employed Graphic designer with over 20 years of experience in branding, retail packaging and web design.

    Re: SOLVED Gantry5 mobile menu not showing on iPhone

    Posted 2 years 3 months ago
    • Hi Mark

      I do use SG Optimiser on the site and have disabled the Combine CSS Files. There is an option to also exclude certain css files for being combined but this only allow you to select certain plugins to exclude. I did see that the MenuCart plugin is there. That is used on the site but not in the main menu.

      regards

      David
    • 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's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13482
    • Web Designer/Developer

    Re: SOLVED Gantry5 mobile menu not showing on iPhone

    Posted 2 years 3 months ago
    • Use this code...
      // 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) {
         .g-offcanvas-toggle {
             display: block !important;
         }
      }
      // 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";

      To create a custom CSS compatible with Gantry 5 please read this http://docs.gantry.org/gantry5/tutorials/adding-a-custom-style-sheet .

      Remember to recompile CSS from base outline too.


      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's Avatar
    • Wicko
    • Elite Rocketeer
    • Posts: 884
    • Thanks: 8
    • Self employed Graphic designer with over 20 years of experience in branding, retail packaging and web design.

    Re: SOLVED Gantry5 mobile menu not showing on iPhone

    Posted 2 years 3 months ago
    • Thanks for that Mark

      I have added the css code to the bottom of my customer css file.

      What is odd is that on iPhone now the burger shows but is not activae as the other menu is still there. Also I tried to resave the menu in Gantry again and it gave me the same error.

      Could be some additionla cache issues. I did purge the SG optimiser cache.

      regards

      David
    • 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's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13482
    • Web Designer/Developer

    Re: SOLVED Gantry5 mobile menu not showing on iPhone

    Posted 2 years 3 months ago
    • aha! So, you're saying that you actually have the mobile breakpoint set to something different to standard? That would explain the issue.

      Please would you post your URL, superuser id and pswd in the secure tab of your post and I'll have a look for you

      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's Avatar
    • Wicko
    • Elite Rocketeer
    • Posts: 884
    • Thanks: 8
    • Self employed Graphic designer with over 20 years of experience in branding, retail packaging and web design.

    Re: SOLVED Gantry5 mobile menu not showing on iPhone

    Posted 2 years 3 months ago
    • Hi Mark

      I have not touched the breakpoints in the theme. All my other custom rules use the standard REM breakpoints as set in the theme.

      Admin access attached in secure tab.

      regards

      David
    • 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's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13482
    • Web Designer/Developer

    Re: SOLVED Gantry5 mobile menu not showing on iPhone

    Posted 2 years 3 months ago
    • Ok, so the mobile menu breakpoint has been changed to 60REM from the template default of 48REM. So, change it back to 48rem and remove the previous CSS that I gave you and then all should be well.

      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's Avatar
    • Wicko
    • Elite Rocketeer
    • Posts: 884
    • Thanks: 8
    • Self employed Graphic designer with over 20 years of experience in branding, retail packaging and web design.

    Re: SOLVED Gantry5 mobile menu not showing on iPhone

    Posted 2 years 3 months ago
    • Hi Mark

      That would only make the breakpoint for the mobile menu for a larger screen.

      I have reset mobile breakpint to 48rem and cleared the cache but still the mobile menu is not visible on iPhone. I have checked using several browser on an iPhone and all are not showing the burger menu.

      This is odd as I have not expereinced this on any other website I used the Gantry theme on.

      regards

      David
    • 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's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13482
    • Web Designer/Developer

    Re: SOLVED Gantry5 mobile menu not showing on iPhone

    Posted 2 years 3 months ago
    • It's a weird one all right... Please post your FTP logon, password and FTP URL in the secure area of your post.

      Regards, Mark.
    • The following users have thanked you: Wicko

    • 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