![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
Tagged: ecommerce, Hamburger-Menu, Menu location, mobile, responsive, woocommerce
-
AuthorPosts
-
July 20, 2021 at 12:53 am #1310793
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 #1310798hey :)
I have the same problem.July 21, 2021 at 4:34 am #1310994Hi Kristin,
We can’t view your site, since it redirects to the URL in private. I’m not sure why that is?
Best regards,
RikardJuly 21, 2021 at 4:36 am #1310995Hi Rachel,
Please open a new thread and include a link to your actual site, so that we can have a closer look.
Best regards,
RikardJuly 21, 2021 at 4:48 am #1311000Ah 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 #1311350Hi 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,
RikardJuly 22, 2021 at 10:58 pm #1311651Thanks 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 #1312064Hi 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,
RikardJuly 25, 2021 at 7:23 am #1312167Hi 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/DkC6PgJCheers, Kristin
July 27, 2021 at 9:59 am #1312671Hi,
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,
IsmaelJuly 29, 2021 at 1:01 am #1313116Hi 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, KristinJuly 31, 2021 at 7:58 am #1313553Hi,
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,
IsmaelAugust 1, 2021 at 6:11 am #1313656Hi 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 -
AuthorPosts
- You must be logged in to reply to this topic.