Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • July 10, 2020 at 1:41 am #1229256
    fcp

    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 #1229331
    Jordan Shannon

    Hey fcp,

    For #1 add this to quick css:

    @media only screen and (max-width: 767px){
.main_menu{
width:107px!important;
}}

    Best regards,
    Jordan Shannon

    July 10, 2020 at 10:17 pm #1229498
    fcp

    Hi 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 #1230142
    Rikard

    Hi,

    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, 4 months ago by Rikard.
    July 14, 2020 at 12:41 pm #1230276
    fcp

    Hi 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 #1230787
    Rikard

    Hi,

    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,
    Rikard

    July 16, 2020 at 2:02 pm #1230923
    fcp

    Hi 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 #1231004
    Yigit

    Hi!

    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,
    Yigit

    July 16, 2020 at 10:45 pm #1231036
    fcp

    Hi 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 #1231054
    Nikko

    Hi 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,
    Nikko

    July 25, 2020 at 1:18 am #1233100
    fcp

    Hi Nikko,
    It works perfectly!
    Thank you so much!
    This topic can be closed ;-)

    July 25, 2020 at 1:30 am #1233101
    Jordan Shannon

    Hi,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Burger menu on the left on mobiles and tablets’ is closed to new replies.