Sub menu not working in mobile view in multiple browsers, and styling not right

[T4m]

Hi,

I’m finding the menu and any drop downs work fine on a normal computer browser, but as soon as the site converts to the mobile menu option any main menu item that has a sub menu linked doesn’t work. For example Contact being the main and Newsletter being the sub, only Newsletter will load, Contact will not.

I’m also finding that the cart icon overlaps the header/site title text slightly on multiple mobile platforms.

I’m also finding the button styling isn’t showing as it should on Safari browsing on an iPad. Looks normal on Mac Safari browser and Android though, but the buttons have gone round and orange on the iPad.

Please could you help with these three issues as soon as possible.

Thanks

[Veena]

Pls share the link to your site.
Thanks

[T4m]

This reply has been marked as private.

[Raghavendra]

Here is a reply I posted to themeforest comments dashboard sometime back for someone who has the exact same query –

I see the issue. I guess we need to live with this because if I did enable load page on the click, there is no way for the user to navigate to the submenu item since every time you click on the parent menu item, you end up loading the page. Hope you get it.

In desktop world, we have two ways to navigate – hover and click and hence it is ok to just open the page when you click on the URL since hover will enable you to navigate still to the submenu item. In the mobile world, there is only touch(=click) action that we use to arrive at the submenu item and hence we need to disable navigation on touch of the parent menu item.

The way I have been handling this is by having the page linked to by the parent menu item listed also as submenu item so that users do not miss out on the same. When the hover gets enabled and submenu is shown, users often do not click on the item itself and hence you can lose some traffic on that page.
Hope this helps

[T4m]

Thank you again for the reply I will see if I can work around this. Is there any information on the menu squashing where the cart is overlapping menu text on mobile browsers where it switches to the mobile menu and the button styling? Even on a computer browser the cart is overlapping the last item in my menu as soon as I scroll the screen down with the sticky menu option enabled. Contact form 7 and mail chimp buttons aren’t styling like they should when I use safari on an iPad to view my site, but they look fine from mac safari and from android chrome? The woocommerce cart button seems to style like it should on iPad safari though. I’d like for all my buttons to look uniformed and to match the theme.
Thanks

[Veena]

Pls try the below custom CSS in themeoptions-

#primary-menu {
float: none;
margin-left: 90px;
}
@media only screen and (max-width: 767px)
{
.woocommerce-site .cart-contents {
position: relative;
float: left;
top: 5px;
}}
@media only screen and (max-width: 767px)
{
.woocommerce-site #mobile-menu-toggle {
top: 0px;
}}
@media only screen and (max-width: 487px)
{
.woocommerce-site #mobile-menu-toggle {
top: 60px;
}}

Pls try the below Custom CSS for the button issues

input {
-webkit-appearance: none;
}

[T4m]

Thanks again for the quick response, the code for the button styling seems to have worked, the menu squashing still isn’t quite right though. Since adding the CSS it’s moving the shopping cart over to the left side at the very top when viewing on a mobile phone, but now when I’m viewing my site in portrait on an iPad it’s pushing the ‘contact’ link menu item onto a row underneath the rest of the menu which looks messy 🙁

Thanks

[Veena]

Just change margin-left to 40px instead of 90px in primary menu styling.

#primary-menu {
float: none;
margin-left: 40px;
}

[Author]

Posts