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

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

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 😇

The topic ‘Need my logo to be fixed for all displays’ is closed to new replies.

WordPress.com forums

Need my logo to be fixed for all displays