Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • November 8, 2013 at 5:09 pm #186218
    kylehogan

    I’m having some issues with the navigation menu and how it resizes on iPhone and iPads.

    Images will be on the next post.

    November 8, 2013 at 5:12 pm #186220
    kylehogan

    iPad issue
    http://i.imgur.com/9kyeCoj.png
    Navigation bleeds into the logo. If I change the iPad from Landscape position to Portrait position and finally back to Landscape it fixes it.

    iPhone issue
    http://i.imgur.com/y0sXLWA.png
    I’ve tried adjusting the size of my logo but it doesn’t work. The navigation icon block bleeds over the logo.

    • This reply was modified 11 years ago by kylehogan.
    November 8, 2013 at 5:24 pm #186230
    Yigit

    Hey!

    1) Please refer to this post to change the width to switch to mobile menu https://kriesi.at/support/topic/collapsable-menu/#post-165144
    2) Please add following code to Quick CSS in Enfold theme options under Styling tab

    @media only screen and (max-width: 480px; ) { .responsive .mobile_slide_out .logo {
float: left; margin-left: -18px; }}

    Regards,
    Yigit

    November 8, 2013 at 7:12 pm #186269
    ewingmh

    I tried changing the width to 989 and I’m still having issues with my menu showing up under my logo on an iPad and other similar devices:
    http://www.alpineorthopaedics.com

    I just changed it to 1024 and it still doesn’t work…. is there a way to have the menu font size shrink responsively so that the original menu would still show up on an iPad and not encroach under the logo?

    • This reply was modified 11 years ago by ewingmh.
    November 8, 2013 at 8:46 pm #186294
    kylehogan

    Hi Yigit,

    Neither solution worked for me.
    http://www.myfloridahomesforsale.com/blog/

    November 8, 2013 at 11:12 pm #186318
    ewingmh

    I think I’ve found a bug. If I turn off the menu under Appearance>Menus and let the pages develop the menu on their own based on Order and Parents – then the above fix will work… however that is not an acceptable answer really…

    November 9, 2013 at 7:08 am #186398
    Ismael

    Hey!

    Please use this on your custom.css or Quick CSS:

    @media only screen and (min-width: 769px) and (max-width: 1250px) {
.logo img {
width: 180px !important;
margin-top: 10px;
}

.main_menu ul:first-child > li > a {
font-weight: 600;
font-size: 11px;
}
}

    Cheers!
    Ismael

    November 9, 2013 at 3:27 pm #186470
    kylehogan

    Negative. Didn’t work either. Shouldn’t there be a margin or padding on the left side of the navigation that could resolve the iPad issue with navigation bleeding over the logo? It does this on the demo site as well.

    Also when viewing on the iPhone, the Responsive Header Main Menu bleeds on the logo too.

    November 9, 2013 at 5:03 pm #186482
    Devin

    Hey!

    Yes, by default it does get adjusted for mobile layout so it doesn’t overlap:
    http://i40.tinypic.com/2wom05s.png

    With a wider logo like yours you’ll need to adjust things a bit more. Also note that with a caching plugin active that is not refreshing the cached data after changes you will *not* see your changes after adding them to the quick css or making changes in the avia.js right away. Like right now I’m seeing page data from yesterday (you can see this in the source of your site).

    So you have a couple of options to fix the regular menu:
    First, use less menu items
    Second, use a different header that has the menu below the logo
    Third, change the switch width from regular menu to mobile menu button to something very high like 1340px when the first page width gets smaller.

    The theme already has adjustments to the padding of menus to try and keep it visible for as long as possible but there is a visual limit to the number of items in the menu with this header style.

    For mobile view, you can use this css:

    
@media only screen and (max-width: 479px) {
  #advanced_menu_toggle, #advanced_menu_hide {right: -22px !important;}
}

    Don’t forget to clear your cache after modifying/adding any css or code. Otherwise it will appear as if it does nothing

    Best regards,
    Devin

    • This reply was modified 11 years ago by Devin.
    November 9, 2013 at 7:52 pm #186509
    kylehogan

    Thanks Devin.
    The CSS for the iPhone trick worked. I have my Super Cache plugin set so it doesn’t Cache for known users so I see my updates immediately when I’m logged in, but thanks for pointing that out since I’m testing on multiple devices and I’m not logged in on my mobile devices. :)

    I will tinker around with your other suggestions regarding my logo and menu items. Thanks again!

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Issue with Navigation menu on iPad and iPhone’ is closed to new replies.