-
Posts
-
I’m having some issues with the navigation menu and how it resizes on iPhone and iPads.
Images will be on the next post.
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.
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.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,
YigitI 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.comI 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?
Hi Yigit,
Neither solution worked for me.
http://www.myfloridahomesforsale.com/blog/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…
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!
IsmaelNegative. 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.
Hey!
Yes, by default it does get adjusted for mobile layout so it doesn’t overlap:
http://i40.tinypic.com/2wom05s.pngWith 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,
DevinThanks 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!
- The topic ‘Issue with Navigation menu on iPad and iPhone’ is closed to new replies.