Tagged: , , , , ,

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • July 20, 2021 at 12:53 am #1310793
    pinnicreative

    Hi guys,

    I have tried a lot of different css to solve this and can’t seem to get anything to work (I’m no pro, just searched here and other forums). The website jacquelinebrennan.com which uses enfold has just had woocommerce added into it. The cart icon is in the top logo space next to the hamburger menu (great), however on mobile it pushes the hamburger menu icon over the logo. Am I able to move it over to the right? I’m pretty sure I have additional css for the location of the hamburger menu, so perhaps it is interfering with anything I add to move the cart icon over?

    See private content for login if needed.

    Thanks, Kristin

    July 20, 2021 at 3:09 am #1310798
    Rachel

    hey :)
    I have the same problem.

    July 21, 2021 at 4:34 am #1310994
    Rikard

    Hi Kristin,

    We can’t view your site, since it redirects to the URL in private. I’m not sure why that is?

    Best regards,
    Rikard

    July 21, 2021 at 4:36 am #1310995
    Rikard

    Hi Rachel,

    Please open a new thread and include a link to your actual site, so that we can have a closer look.

    Best regards,
    Rikard

    July 21, 2021 at 4:48 am #1311000
    pinnicreative

    Ah got no idea why it would show as private as site is live/public. Have added a temp admin login below so let me know if it doesn’t work again!

    July 22, 2021 at 7:25 am #1311350
    Rikard

    Hi Kristin,

    Thanks for the update. Your site is working as it should now. Please try this in Quick CSS:

    @media only screen and (max-width: 767px) {
.responsive .logo img {
    max-width: 75%;
}
}

    Best regards,
    Rikard

    July 22, 2021 at 10:58 pm #1311651
    pinnicreative

    Thanks Rikard, appreciate it!

    I see this reduces the logo size to 75%. Is there any option to just move the cart + hamburger menu to the right of screen (off logo) rather than make the logo smaller? Otherwise perhaps I could look at having the menu + cart wrap and sit under the logo on mobile.

    Cheers, Kristin

    July 24, 2021 at 12:58 pm #1312064
    Rikard

    Hi Kristin,

    The burger menu and cart are currently to the right of your logo, so I’m not sure exactly what you mean. Maybe you could provide us with a screenshot highlighting your intentions?

    Best regards,
    Rikard

    July 25, 2021 at 7:23 am #1312167
    pinnicreative

    Hi Rickard,
    Sorry, yes perhaps I didn’t explain myself properly. The logo has reduced to 75%, however was thinking the cart + menu could just be pushed further to the right and closer together (than it originally was). leaving the logo at the existing %.
    See screenshot (hope it works): https://ibb.co/DkC6PgJ

    Cheers, Kristin

    July 27, 2021 at 9:59 am #1312671
    Ismael

    Hi,

    Yes, that should be possible. Please try to add this css code to move the cart and burger menu icon further to the right, and decrease the space between them.

    @media only screen and (max-width: 767px) {
    #top #header .av-main-nav > li {
        padding-right: 0;
        margin-right: 0;
    }

    .responsive.html_bottom_nav_header #top #menu-item-shop.cart_dropdown {
        position: absolute;
        right: -20px;
    }
}

    Best regards,
    Ismael

    July 29, 2021 at 1:01 am #1313116
    pinnicreative

    Hi Ismael,
    Thanks for the additional CSS, it doesn’t seem to take effect. Do you have any insights? I have viewed in incognito on iphone.
    Cheers, Kristin

    July 31, 2021 at 7:58 am #1313553
    Ismael

    Hi,

    Thank you for the update.

    We are not seeing the latest css code in the stylesheets. Where did you add the code? Please post the login details in the private field so that we could test it properly.

    Best regards,
    Ismael

    August 1, 2021 at 6:11 am #1313656
    pinnicreative

    Hi Ismael,
    Sorry, I did have the code in the general styling tab, however although I couldn’t see the change, the client could on her phone and the burger menu was back to covering the logo. So I switched the code back to what was previously supplied (below) as she has customers using the website to purchase goods. See private content for login details.

    @media only screen and (max-width: 767px) {
    .responsive .logo img {
    max-width: 75%;
    }
    }

    August 2, 2021 at 2:41 am #1313755
    Ismael

    Hi,

    Thank you for the info.

    We adjusted the css code a bit — combined and moved the css media queries at the bottom of the Quick CSS field. Please make sure to purge the cache before checking the page.

    Best regards,
    Ismael

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