-
AuthorPosts
-
November 11, 2017 at 3:12 am #875417
Hello. I received the following and implemented on multiple non-WooCommerce sites and it works great. I went to apply it to a WooCommerce site and the shopping cart icon goes missing.
/***ENFOLD – FIXES MOBILE MENU NOT SHOWING ON IPAD LANDSCAPE***/
@media only screen and (-webkit-min-device-pixel-ratio: 1) and (max-device-width: 1024px) and (min-device-width: 768px) and (orientation: landscape) {
nav.main_menu {
display: block !important;
}
.menu-item {
display: none;
}
.av-burger-menu-main.menu-item-avia-special {
display: block;
}
}}November 11, 2017 at 5:46 pm #875525Hey accurIT,
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
@media only screen and (-webkit-min-device-pixel-ratio: 1) and (max-device-width: 1024px) and (min-device-width: 768px) and (orientation: landscape) { .menu-item.cart_dropdown { display: block !important; } }
If you need further assistance please let us know.
Best regards,
VictoriaNovember 11, 2017 at 5:49 pm #875527Hello. No change.
Thanks,
RyanNovember 11, 2017 at 6:22 pm #875547Hi Ryan,
Well, I cannot text it, since the caching plugin is activated. Can you deactivate it while we are helping you?
Best regards,
VictoriaNovember 11, 2017 at 6:27 pm #875550Done.
November 14, 2017 at 6:41 am #876456Hi,
The shopping cart is visible when I checked the page. Is this fixed?
Best regards,
IsmaelNovember 14, 2017 at 6:43 am #876459It’s not visible on iPad landscape.
November 14, 2017 at 7:22 am #876472Hi,
I see. Please look for the following css modification.
.menu-item { display: none; }
Below, add this code.
.menu-item.cart_dropdown { display: block !important; }
Remove browser cache or hard refresh before checking the page.
Best regards,
IsmaelNovember 14, 2017 at 4:17 pm #876639The root of the problem, in my opinion, is Enfold defines the mobile menu as breaking at 990px, rather than iPad Landscape (1024px). I think if Enfold ran a poll to ask their customers for their input, very few would say 990px should be the mobile menu breaking point. At the very least, there should be more options to define the breakpoint.
Rant aside, adding your code doesn’t fix the issue. My current CSS is at the bottom of this response, which has all come from different moderators.
I need the code to:
-Show the burger menu on iPad Landscape and below
-Show the shopping cart on iPad Landscape and below/***ENFOLD – FIXES MOBILE MENU NOT SHOWING ON IPAD LANDSCAPE***/
@media only screen and (-webkit-min-device-pixel-ratio: 1) and (max-device-width: 1024px) and (min-device-width: 768px) and (orientation: landscape) {
nav.main_menu {
display: block !important;
}
.menu-item.cart_dropdown {
display: block !important;
}
.av-burger-menu-main.menu-item-avia-special {
display: block;
}
}}November 16, 2017 at 4:57 am #877357Hi,
The code is invalid. Please don’t remove the previous css code.
.menu-item { display: none; }
Just add the following css code underneath it.
.menu-item.cart_dropdown { display: block !important; }
The cart is not displaying because it also has the class attribute “menu-item”. We have to use the cart’s specific selector “.menu-item.cart_dropdown” and set the display property to “block” again.
Best regards,
IsmaelNovember 16, 2017 at 5:11 am #877362Good to go, thanks!
November 17, 2017 at 5:59 am #877938 -
AuthorPosts
- The topic ‘Post 4.2 Update – WooCommerce Shopping Cart Missing’ is closed to new replies.