Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1432241

    Hi there,
    In WooCommerce the mobile menu, profile icon, and cart icon overlap the logo.
    I used this coding which works but it creates another issue with the sticky the menu in desktop mode lossing it’s white background. I’ve attached a screenshot.

    /*—— Burger Menu Mobile —-*/
    .responsive #top #wrap_all .av_mobile_menu_tablet .main_menu {
    position: absolute !important;
    right: 0px !important;
    }
    .responsive.html_bottom_nav_header #top #menu-item-shop.cart_dropdown {
    position: absolute !important;
    right: -45px !important;
    }
    /*—— END Burger Menu Mobile —-*/

    #1432295

    Hey web4698,
    Try adding this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    .responsive #top #wrap_all .av_mobile_menu_tablet .main_menu .av-main-nav-wrap {
    	background-color: #fff;
    }

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    #1432303

    That doesn’t work, it covers the line above the nav slightly and it’s not the full screen.
    It’s this coding that I wrote that is causing the issue. When you remove it the white background is intact.

    #1432310

    Hi,
    Sorry I thought you were talking about the text showing though, If you feel that this css works for mobile then you should wrap it in a media query so it only works on mobile, like this:

    @media only screen and (max-width: 767px) { 
    .responsive #top #wrap_all .av_mobile_menu_tablet .main_menu {
    position: absolute !important;
    right: 0px !important;
    }
    .responsive.html_bottom_nav_header #top #menu-item-shop.cart_dropdown {
    position: absolute !important;
    right: -45px !important;
    }
    }

    Best regards,
    Mike

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.