Tagged: 

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • August 28, 2018 at 5:33 am #1002534
    Orla

    Hi, I was hoping you could help. My cart widget is partially hidden behind the page content on all pages. I’ve tried modifying the z-index but it’s not working for me.
    Cart Widget

    Also the cart icon disappears when the screen goes to mobile and the menu icons shifts.

    Mobile menu

    I’m not sure why it’s happening as I haven’t added any custom CSS. Would you be able to have a look for me?

    Thanks :)
    I’m using a boxed layout and a child theme.

    August 28, 2018 at 6:35 am #1002561
    Ismael

    Hey Orla,

    Thank you for using Enfold.

    This should fix the cart issue.

    .html_top_nav_header .av-logo-container .inner-container {
    position: relative;
    overflow: visible;
}

    And then use this css code to adjust the position of the cart icon on mobile view.

    @media only screen and (max-width: 767px) {
    .responsive.html_top_nav_header.html_cart_at_menu #top #menu-item-shop {
        right: 0;
        position: absolute;
    }
}

    Best regards,
    Ismael

    August 29, 2018 at 6:52 am #1003001
    Orla

    Wouldn’t use anything else. Enfold is awesome.

    That first bit of code worked for me however but on the mobile menu the cart icon is still hidden. When you click the menu icon it appears briefly and then disappears again?

    Thank you!

    August 29, 2018 at 6:58 am #1003005
    Orla

    Also there’s something going on with the menu icon that I can’t out why.

    It seems to be in the wrong position as the screen moves into the smaller screens…
    Cart icon and instagram icon

    cart position

    August 30, 2018 at 2:51 pm #1003633
    Ismael

    Hi,

    Thanks for the update.

    The mobile menu and the icon doesn’t overlap when I adjust the screen.

    Use this css code to adjust the position of the mobile menu and display the cart icon.

    @media only screen and (max-width: 767px) {
.responsive.html_bottom_nav_header.html_cart_at_menu #top #wrap_all .main_menu {
    right: 0;
    z-index: 102;
}

.responsive.html_top_nav_header.html_cart_at_menu #top #menu-item-shop {
    right: 165px;
    position: absolute;
    z-index: 1000;
}
}

@media only screen and (max-width: 480px) {
    .responsive.html_top_nav_header.html_cart_at_menu #top #menu-item-shop {
        right: 95px;
    }
}

    Best regards,
    Ismael

    August 31, 2018 at 9:16 am #1003966
    Orla

    Magic!
    Thank you Ismael.

    August 31, 2018 at 12:04 pm #1004047
    Ismael

    Hi,

    You’re welcome! Glad we could help!

    Please take a moment to review our theme and show your support https://themeforest.net/downloads
    Don’t forget to bookmark Enfold Documentation for future reference.

    Thank you for using Enfold :)

    Best regards,
    Ismael

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Cart widget hidden behind page content’ is closed to new replies.