Need help? Check out our Support site, then


Need my logo to be fixed for all displays

  1. Hi,

    I'm trying to get the logo on my website to stay fixed in the corner, but depending on the browser or the size of display it jumps around and sometimes gets lost in the corner or cropped. Is there anything I should be adding to the code? At the moment this is what I have added:

    .site-logo-link img {
    max-height: 100px;
    width: fixed;
    position: relative;
    right: 540px;
    top: 250px;
    }

    Thanks!

    The blog I need help with is girleffecttrading.com.

  2. Hello @girleffecttrading
    Try this:

    1. Remove all the codes from the CSS you gave above except max-height:

    .site-logo-link img {
       max-height: 100px;
    }

    2. And then add this CSS:

    .site-branding {
        display: block;
        align-items: inherit;
        justify-content: inherit;
        height: auto;
        position: absolute;
        left: 5%;
        bottom: 10%;
    }

    Hope this helps 🙂

  3. Hey @otpidusprime

    Thank you so much for your help, it works perfectly.

    I was wondering if there is a way to fix the following: it doesn't resize the logo when I make the window smaller, so it remains the same size and then overlaps with the text below and header above.

    Thank you!

  4. Yes... Try these:

    .custom-header-image {
        min-height: 180px;
    }
    @media screen and (max-width: 59.999em) {
       .site-logo-link img {
           max-height: 60px;
       }
    }
  5. Amazing it does. Thank you so much for all your help.

  6. @girleffecttrading glad I could help 😇

Topic Closed

This topic has been closed to new replies.

About this Topic