Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • January 11, 2021 at 6:49 am #1271495
    Robyone925

    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?

    January 11, 2021 at 8:15 am #1271508
    Nikko

    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

    January 12, 2021 at 12:37 am #1271712
    Robyone925

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

    January 12, 2021 at 10:53 am #1271809
    Nikko

    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

    January 13, 2021 at 12:45 am #1271996
    Robyone925

    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%;
    }
    }

    January 13, 2021 at 7:18 am #1272040
    Nikko

    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

    January 13, 2021 at 11:35 pm #1272272
    Robyone925

    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%;
    }
    }

    January 14, 2021 at 2:31 am #1272278
    Jordan Shannon

    Hi,

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

    Best regards,
    Jordan Shannon

    January 14, 2021 at 2:45 am #1272286
    Robyone925

    H Jordan,

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

    January 14, 2021 at 2:57 am #1272287
    Jordan Shannon

    Hi,

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

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Search on mobile appears over logo’ is closed to new replies.