Need my logo to be fixed for all displays

• 

  girleffecttrading · Member · May 26, 2017 at 8:48 am

  • Copy link
  • Add topic to favorites

  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: (visible only to logged in users)

• 

  otpidusprime · Member · May 26, 2017 at 8:59 am

  • Copy link

  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 🙂

• 

  girleffecttrading · Member · May 26, 2017 at 9:38 am

  • Copy link

  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!

• 

  otpidusprime · Member · May 26, 2017 at 9:43 am

  • Copy link

  Yes… Try these:

  .custom-header-image {
      min-height: 180px;
  }

  @media screen and (max-width: 59.999em) {
     .site-logo-link img {
         max-height: 60px;
     }
  }

• 

  girleffecttrading · Member · May 26, 2017 at 9:45 am

  • Copy link

  Amazing it does. Thank you so much for all your help.

• 

  otpidusprime · Member · May 26, 2017 at 9:46 am

  • Copy link

  @girleffecttrading glad I could help 😇