Logo cut off by search

  • schnaubel

    (@schnaubel)


    8 years ago

    Hello,

    I really want to thank you for that great theme.

    I only got one problem. If I lower the width of the browser window, at some point the searchbar is cutting off the logo in the upper part.

    At the moment I use the following custom CSS:

    #logo img {
    width: 100%;
    float: left;
}
@media (min-width: 768px){
header#masthead {
    margin-top: 50px;
}
nav.navbar.navbar-default {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 9999;
}
body.admin-bar nav.navbar.navbar-default {
  top: 30px;
}
}

    Is there any solution to fix this problem?

    Best regards

Viewing 13 replies - 1 through 13 (of 13 total)
  • Vinod Dalvi

    (@vinod-dalvi)

    Hi @schnaubel,

    I hope you are well today and thank you for your question.

    I have tested it on my test site on smaller browser screen and it’s working fine for me using latest version of Activello theme.

    Could you please share me your site URL where it’s happening so that i can troubleshoot it?

    Kind Regards,
    Vinod Dalvi

    Thread Starter schnaubel

    (@schnaubel)

    Hello Vinod,

    Thank you for your reply.
    Please see bent-Sy For demonstration.

    Best regards!

    Vinod Dalvi

    (@vinod-dalvi)

    It is happening on your shared site because you have made header navigation bar fixe don your site.

    You can try resolving this issue by adding the following CSS code in the Custom CSS option of your theme on the below path.

    Admin Area -> Appearance -> Customize -> Activello Options -> Other -> Custom CSS

    @media screen and (min-width: 768px) and (max-width: 992px){
    #page header#masthead {
    margin-top: 80px;
}
}
    Thread Starter schnaubel

    (@schnaubel)

    Thank you, that solution is working nearly perfect.

    Only on the SAFARI-browser on the iPad mini 3 – landscape format – there is still the same problem.
    Upright format everything is fine.

    But maybe its the fault of the IOS.

    Vinod Dalvi

    (@vinod-dalvi)

    You are most welcome ??

    Could you please share the screenshot of the issue from iPad mini 3 and can you reproduc eit on following responsinator tool?

    https://www.responsinator.com/

    Please also try using different browser on the iPad.

    Thread Starter schnaubel

    (@schnaubel)

    Here you can see the screenshot:
    Screenshot IOS

    But I can not reproduce it on the resposinator. Weird ??

    On another browser (Puffin) there is no problem.

    Vinod Dalvi

    (@vinod-dalvi)

    It seems browser specific issue but let’s try to resolve it by changing the value from 80px to 100px or 110px in the above shared CSS code.

    Thread Starter schnaubel

    (@schnaubel)

    I changed the value from 80px to 100px and 110px. But still the same with Safari.

    Vinod Dalvi

    (@vinod-dalvi)

    After changing the value please test it clearing your browser cache.

    Thread Starter schnaubel

    (@schnaubel)

    I tested both values and cleared the browser cache (Safari – iOS) after every change.

    Problem stayed the same.

    Vinod Dalvi

    (@vinod-dalvi)

    Please try using the below CSS code instead of the code shared above and then change the value from 80px to 100px or 110px.

    @media screen and (min-width: 768px) and (max-width: 992px){
    #page header#masthead {
    padding-top: 80px;
}
}
    Thread Starter schnaubel

    (@schnaubel)

    Hey Vinod
    Many thanks for your support!

    I tried the new code with all three values (cleared browser cache everytime) but in Safari there is still that strange behaviour.

    I think Safari is somehow the problem ??

    Should I prefer your first or second code?

    Vinod Dalvi

    (@vinod-dalvi)

    Ok then just use the first shared code.

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘Logo cut off by search’ is closed to new replies.