![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
-
AuthorPosts
-
July 10, 2020 at 1:41 am #1229256
Hi,
1) I added this code to display the burger menu on the left side on mobiles and tablets:
@media only screen and (max-width: 989px) { nav.main_menu {left: 0!important;} }
but now my logo is not clickable anymore.
Could you please help me to fix this?2) How could I switch burger menu icon and search icon? (see screenshot in private content)
If needed, you can find a link and credentials to my website in private content.
Thanks a lot!
July 10, 2020 at 7:17 am #1229331Hey fcp,
For #1 add this to quick css:
@media only screen and (max-width: 767px){ .main_menu{ width:107px!important; }}
Best regards,
Jordan ShannonJuly 10, 2020 at 10:17 pm #1229498Hi Jordan,
Thanks for your reply.
This code doesn’t work. It places my burger menu icon under the search icon.
I modified it to:@media only screen and (max-width: 767px){ .main_menu{ width: 40%!important; }}
…and it seems to work.
But from now, my logo “hover space” seems to occupy the entire right side of my menu and it hides shopping cart. So when clicking on the shopping cart, it returns to my main page.July 14, 2020 at 5:06 am #1230142Hi,
Please try this as well:
@media only screen and (max-width: 767px) { .responsive #top .cart_dropdown { z-index: 0; } }
Best regards,
Rikard-
This reply was modified 4 years, 1 month ago by
Rikard.
July 14, 2020 at 12:41 pm #1230276Hi Rikard,
Thanks for your reply.
This code works a bit, but the cart area is now too big and can be clicked even if mouse is not on cart…
In fact, the issue comes from this code I added to place logo in the middle of the screen:@media only screen and (max-width: 767px){ .responsive #top .logo {width: 100%!important;} .responsive .logo img {margin: 0 auto!important;} }
and with this code, the logo area is 100% screen sized.
Is there another way to center the logo, but not increase the hover area??July 16, 2020 at 4:30 am #1230787Hi,
Please try this CSS as well:
@media only screen and (max-width: 767px) { #menu-item-shop .cart_dropdown_link { left: -20px; padding: 0; } }
Best regards,
RikardJuly 16, 2020 at 2:02 pm #1230923Hi Rikard,
Thanks for your reply.
This code moves my shopping cart a little bit to the right and it seems to be clickable now.
But the logo area is still too big and not only on the logo.
I mean, on the left of the logo it’s ok, but on its right, it could be clicked very far from the logo.
To be clear, I made a short video in private content to explain.
What do I need to do to adapt and reduce “logo clickable zone” only on the logo?
Thanks a lot!July 16, 2020 at 6:48 pm #1231004Hi!
I added following code to bottom of Quick CSS field
@media only screen and (max-width: 767px) { .responsive .logo a { display: block; width: 200px; margin: auto; }}
Please review your website :)
Best regards,
YigitJuly 16, 2020 at 10:45 pm #1231036Hi Yigit,
Thanks for your reply.
It seems to work now.
Could you help me for my second question :
How could I switch burger menu icon and search icon? (see screenshot in private content)
Thanks a lot! :-)July 17, 2020 at 12:18 am #1231054Hi fcp,
Please try adding this CSS code in Quick CSS:
@media only screen and (max-width: 767px) { #header #avia-menu-0 li { float: right; } #header #avia-menu-0 #menu-item-search a { padding: 0 20px 0 0; } #header #avia-menu-0 .av-burger-menu-main { margin-left: 3px; margin-right: 10px; } }
Best regards,
NikkoJuly 25, 2020 at 1:18 am #1233100Hi Nikko,
It works perfectly!
Thank you so much!
This topic can be closed ;-)July 25, 2020 at 1:30 am #1233101Hi,
I’m glad this was resolved. If you need additional help, please let us know here in the forums.
Best regards,
Jordan Shannon -
This reply was modified 4 years, 1 month ago by
-
AuthorPosts
- The topic ‘Burger menu on the left on mobiles and tablets’ is closed to new replies.