Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1271495

    Hi there,

    On mobile the Search icon appears over our company logo. I’ve tried different scenarios including reducing the size of the image of the logo but it’s still appearing over the top. Can you recommend a solution?

    #1271508

    Hi Robyone925,

    Can you give us a link to your site? so we can inspect it and try to give you some CSS codes that should fix it.

    Best regards,
    Nikko

    #1271712

    Oh sure – I’ll post the link below. Thank you! Note that the phone that was tested was an Iphone X.

    #1271809

    Hi Robyone925,

    Thanks, can you try adding this CSS code in Enfold > General Styling > Quick CSS:

    @media only screen and (max-width:767px) {
      .responsive #top #wrap_all .av-logo-container .logo a img {
        max-height: 80px !important;
      }
    
      .responsive #top #wrap_all .av-logo-container {
        width: 90%;
        max-width: 90%;
      }
    }

    Best regards,
    Nikko

    #1271996

    Thank you so much Nikko – this has helped make the logo smaller, but the Search widget is still over the top of the logo. I think it would be solved if the company logo was aligned to the left. Can you tell me what code I need to include to do this? I have modified the code you have given me slightly to this:

    @media only screen and (max-width:767px) {
    .responsive #top #wrap_all .av-logo-container .logo a img {
    max-height: 80px !important;
    }

    .responsive #top #wrap_all .av-logo-container {
    width: 80%;
    max-width: 80%;
    }
    }

    #1272040

    Hi Robyone925,

    Please try to change width and max-width from 80% to greater than 90%.
    The default size is 85%, however, the lesser the value the lesser the width which makes the logo move to the right and search icon to the left.
    Setting it higher to 90% would move the logo to the left and search icon to the right.

    Best regards,
    Nikko

    #1272272

    Ah I get it now! Thank you so much – I also changed the max-height as well and it all fits in well now. Here’s the final change:

    @media only screen and (max-width:767px) {
    .responsive #top #wrap_all .av-logo-container .logo a img {
    max-height: 75px !important;
    }

    .responsive #top #wrap_all .av-logo-container {
    width: 97%;
    max-width: 97%;
    }
    }

    #1272278

    Hi,

    Did you need additional help with this topic or shall we close?

    Best regards,
    Jordan Shannon

    #1272286

    H Jordan,

    You can close this topic now – thank you for your help!

    #1272287

    Hi,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

Viewing 10 posts - 1 through 10 (of 10 total)

The topic ‘Search on mobile appears over logo’ is closed to new replies.