Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • November 7, 2017 at 1:34 am #873467
    Lura1988

    Hello!

    In the mobile version of my website, my shopping bag is fixed in the right corner, while in the desktop version it follows down while the customer scroll. How can I make the shopping bag of the mobile version scroll down too?

    Thanks,
    Laura

    November 9, 2017 at 5:58 am #874422
    Ismael

    Hey Lura1988,

    Thank you for using Enfold.

    Set the position of the cart container to “fixed”.

    @media only screen and (max-width: 767px) {
    .responsive #top .cart_dropdown {
        position: fixed;
        top: 120px;
        right: 20px;
    }
}

    Best regards,
    Ismael

    November 9, 2017 at 11:25 am #874597
    Lura1988

    Hi Ismael,

    Thanks for your answer! I tried it but the shopping bag disappeared!

    My actual CSS is:

    @media only screen and (max-width: 767px){
    .responsive #top .cart_dropdown {
    right: 0%!important;
    left: 90%!important;
    }
    }

    Many thanks

    November 9, 2017 at 3:39 pm #874718
    Victoria

    Hi Lura1988,

    So did you get it working for you or do you need more help?

    Best regards,
    Victoria

    November 9, 2017 at 3:55 pm #874728
    Lura1988

    Hi Victoria!

    Not really! It is still fixed in the right corner when I scroll down on my mobile!

    Thanks in advance for your help,
    Laura

    November 10, 2017 at 7:07 am #875032
    Ismael

    Hi,

    Did you set the position to “Fixed”? Please post the login details in the private field so that we can check the modification.

    Best regards,
    Ismael

    November 10, 2017 at 12:57 pm #875131
    Lura1988

    Hi,
    yes, I tried to put the line fixed in my CSS but the shopping bag just disappeared.
    You can find that CSS on top of the others CSS

    Please find the login details below.

    Many thanks

    November 12, 2017 at 12:23 pm #875715
    Victoria

    Hi Lura1988,

    The cart icon will get lost in the context on small screens, it is better to have the header fixed, like with the code below.
    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 (max-width: 767px) {
  .responsive #top #wrap_all #header {
    position: fixed;
    height: 160px !important;
  }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    November 12, 2017 at 1:32 pm #875729
    Lura1988

    Hi Vitoria,

    thanks for your help!

    Please find attached how your CSS worked.

    I think it would be a good idea have the header fixed but I need to keep the shopping bang in the actual position right: 0%!important;
    left: 90%!important;.

    Thanks in advanced for you help

    November 13, 2017 at 6:06 am #875964
    Ismael

    Hi,

    We adjusted the css code a bit. Please remove browser cache or hard refresh before checking the page again.

    @media only screen and (max-width: 767px) {
    .responsive #top .cart_dropdown {
        position: fixed;
        top: 165px;
        right: 0;
        margin: -23px 20px 0 0;
    }
}

    Best regards,
    Ismael

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