Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • September 18, 2021 at 12:39 pm #1321446
    mauro_gallone

    Hi.
    I have a problem with header on mobile version of my website.

    On the desktop side the menu and the header are displayed correctly, but on the mobile side I would like the elements (logo, search button, and cart button) to be displayed in such a way that they do not end up on the logo as in the picture below: https://ibb.co/YcLJwwM

    September 19, 2021 at 2:01 pm #1321526
    Nikko

    Hi mauro_gallone,

    Can you give us a link to your site? so we can give a more accurate CSS to fix it.

    Best regards,
    Nikko

    September 19, 2021 at 2:37 pm #1321533
    mauro_gallone

    Sure.
    Website is https://lea-gu.com/
    Thanks so much

    September 19, 2021 at 11:00 pm #1321554
    Mike

    Hi,
    Thank you for the link to your site, please try this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:

    @media only screen and (max-width: 500px) { 
#header_main #menu-item-shop .cart_dropdown_link {
    padding: 0;
}
.responsive.html_bottom_nav_header.html_cart_at_menu #top #wrap_all #header_main .main_menu {
    right: 0;
}
#menu-item-search {
	left: 10px;
}
.responsive #top #wrap_all #header_main .av-logo-container.container {
    width: 95%;
    max-width: 95%;
}
}
@media only screen and (max-width: 374px) {
	.responsive #header_main .logo img {
    max-width: 90%;
	}
}

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

    Best regards,
    Mike

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