Menu does not show on mobile view on iphone 6 – safari – ios10

  • Author
    Posts
  • #101966

    optio3inc
    Member
    Original poster

    Can you please check my site and tell me why the menu does not show up on mobile view on safari, ios10? the item is there because if i click on the area of the screen where i expect the menu to be, the menu is displayed. somehow is not showing up. maybe a color problem as the header switches to white on the theme and maybe the menu is white and renders white on white?

    if i shrink the screen on safari for mac or chrome for mac, the menu shows up, but on iPhone it does not. can you please debug and report any finding? thanks!

    The blog I need help with is: optio3.wordpress.com

    #102069

    tarasdashkevych
    Theme Author

    Hello,

    I’ve tested your website (iPhone 6s/ios10), and it works fine on my side. See screenshots:

    #1: https://cloudup.com/i_cnk-UFGgL
    #2: https://cloudup.com/ij57-xnBJSrz

    Do you still have a problem with the mobile menu?

    Best,
    Taras

    #102077

    optio3inc
    Member
    Original poster

    I found the issue. If you have installed a content blocker app (to avoid ads from tracking you) such as FOCUS from Firefox, the menu does not show up. When I turn off that content blocker, the menu becomes invisible, but it is still clickable.

    It is either a JS problem in the theme or something like that.

    I visited another WordPress.com site that uses a different theme: ljsalazar.com and the menu always shows in the iPhone 6 with the FOCUS app ON or OFF.

    I hope this info helps you to identify what should be addressed.

    #102097

    tarasdashkevych
    Theme Author

    Hi,

    The reason why you do not see icons is because the option “Block Web fonts” in the FOCUS app prevents the website to load font icons. That’s why it causes the issue. So, it’s not JS problem in the theme :)

    The reason why it works in the example that you’ve posted is because that theme does not use any icons for the menu button. It uses a simple text.

    You can also display “Menu” text in Venture theme by adding this custom css:

    @media only screen and (max-width: 768px) {
      #masthead #header-menu-button {
        visibility: visible;
       }
    }

    Best,
    Taras

    #102152

    optio3inc
    Member
    Original poster

    Thanks Taras, that works but then the word “menu” overlaps the logo on a iPhone 6 screen, Samsung 3 etc… any ideas on how to address that? can the icon be hidden and just use the word menu?

    #102160

    tarasdashkevych
    Theme Author

    The reason why it overlaps the logo is because theme is designed to display icons in this view. If you want to display the word “menu” then you need to add more paddings to the logo section. Here is the css for it:

    @media only screen and (max-width: 768px) {
      #masthead .site-branding {
        padding: 0 100px;
      }
    }

    To hide an icon, please use this custom css:

    #masthead .header-links .header-menu:before {
      display: none;
    }

    Best,
    Taras

    #102201

    optio3inc
    Member
    Original poster

    Thanks Taras

    #102211

    tarasdashkevych
    Theme Author

    Not a problem!

The topic ‘Menu does not show on mobile view on iphone 6 – safari – ios10’ is closed to new replies.