How to keep the Logo centered on header

We have moved to a support ticketing system and our forums are now closed.

Open Support Ticket

Author

Posts
March 22, 2017 at 7:26 pm #369202

rigots
Lifetime Member

Post count: 275

Hi,
I would like to know if there is way to keep the Logo centered on the header?

I have created my header to 52 pixel with and when the screen window is low the title is at the very top with margin-top at zero. As the windows gets bigger and the logo grows it pushes to fill the bottom of the header.

I would like to always have the logo in the middle of the header regarless of the size of the header or window size of browser.

Is this possible? if so how do I do it?

Thank you.

March 23, 2017 at 6:30 am #369243
Kor
Moderator

Post count: 16516
Hi Rigots,

Sorry, I’m not getting this. Do you mean you want the logo to always display in the center? You can try this custom CSS.
```
@media only screen and (min-width: 1200px) {
.sd .site-logo-wrap .site-logo {
    left: 38%;
    position: absolute;
}
}
```
March 23, 2017 at 5:48 pm #369382

rigots
Lifetime Member

Post count: 275

Hi Kor Chung,
Thank you, but I guess I was not too clear. I want to center the logo vertically on my 52px height header. The CSS you provided it to control header positioning horizontally, but I want to control vertically.

For Example when I view my website on my mobile smart phone the logo is centered horizontally on my header that is great but it shows all the way on the top of the header so I changed to margin-top:5px; so it can come down some, it is still to high at the top for mobile view but, I can’t bring it down any more because if I do then when I increase my screen size on desktop the logo size grows and it comes out of the header because it is not centered up and down on the header.

Is there a way to keep the logo centered on the header vertically (up and down)?

I guess if I knew the different resolutions on which the logo increases and decreases in size, I could re-adjust the logo positioning for each resolution that it changes in size, but I don’t know at what resolutions it grows and shrinks, do you know? Can you give me the resolutions at which the logo size adjusts, so I can re-position it each time it grows or shrinks?

Thank you.

March 23, 2017 at 5:51 pm #369384

rigots
Lifetime Member

Post count: 275

Oh, one more thing. I see that the logo grows and shrinks at every resolution, but the resolutions I am looking for are the ones where the log make a big change, where it makes a big change from one size to another.

Thanks.

March 23, 2017 at 6:18 pm #369385

Kor
Moderator

Post count: 16516

Hi Rigots,

Sorry, I still have no idea what you needed there. Perhaps some screenshots? Also, since you’re able to adjust the position on mobile and you didn’t want it on the desktop. You can probably try using the media queries I’ve supplied earlier. Furthermore, I’d like you to know that we do not provide customization services and I hope you understand.

Thanks!

March 23, 2017 at 6:33 pm #369390

rigots
Lifetime Member

Post count: 275

This reply has been marked as private.

March 23, 2017 at 7:19 pm #369408
Kor
Moderator

Post count: 16516
Hi Rigots,

This would require some media queries to achieve what you needed there. Could you apply the code below and see if it fixes mobile screen size? Check out this article regarding media queries https://www.emailonacid.com/blog/article/email-development/emailology_media_queries_demystified_min-width_and_max-width .
```
@media only screen and (max-width: 500px) {
    .site-logo {
        margin-top:21px!important;
    }
}
```
Thanks!
March 24, 2017 at 12:15 am #369438

rigots
Lifetime Member

Post count: 275

Hi, thank you.
The link was great to understand the resolutions work.
Are those resolutions only for mobile? or are these also applied to the desk top PC.

I tried the following but it does not seem to be working:
/* If equal or less than 449px */
@media only screen and (max-width: 449px) {
.site-logo {
margin-top:21px!important;
}
}
/* If between 550px and 620px */
@media only screen and (max-width: 450px) and (min-width: 620px) {
.site-logo {
margin-top:11px!important;
}}

/* If between 621px and 902px */
@media only screen and (max-width: 621px) and (min-width: 902px) {
.site-logo {
margin-top:0px!important;
}}

/* If between 903px and 1799px */
@media only screen and (max-width: 903px) and (min-width: 1799px) {
.site-logo {
margin-top:21px!important;
}}

/* If equal of greater then 1800 */
@media only screen and (mim-width: 1800px) {
.site-logo {
margin-top:0px!important;
}
}

So my question to you is, does the “margin-top” get reset each time the the browser windows gets resized?
Or does it only get set once and keeps that value through out?

Thank you.

March 24, 2017 at 1:48 pm #369564

Kor
Moderator

Post count: 16516

Hi Rigots,

I’ve just checked your Website and I’m able to see lots of custom CSS with media queries for this adjustment. You have to understand how it works before using it and I’d suggest that you do this stage by stage. Please start off with a mobile screen size, then to a tablet and then a laptop and finally desktop. Four stages would be enough. Use the code I’ve provided earlier for the mobile screen size. Then work out a tablet screen size on your next reply and I’ll try to guide you through.

Thanks!

March 24, 2017 at 4:21 pm #369614

rigots
Lifetime Member

Post count: 275

Hi,
Yes part of my problem was that my margin-top for logo size was being reset by another CSS entry below. so, I learned to control that.

Now my challenge is to figure out at what resolution widths to move the logo up and down.

On my PC I shrink the browser windows to its smallest horizontal position and start spading it. As I do this the logo automatically expands in size and at some points it automatically resets its size and margin-top.

So I am trying to figure out what what resolutions these changes happen so I can re-adjust the margin-top.

Do you know at work resolutions that logo is changing? Are are the predefined widths (resolutions) for mobile, table, laptop and PC?

Thanks,
Rigo

March 24, 2017 at 4:57 pm #369626

rigots
Lifetime Member

Post count: 275

Hi,
I was thinking about this, is there a way to keep the logo size from expanding at every widows size change? If I could keep the logo one size fixed through out that would help greatly, some how the default seating keeps auto adjusting the logo as windows size changes.

This way I can just reduce or increase the logo under the resolutions range I want, using width: #%!important; for logo.

Thank you.

March 24, 2017 at 8:05 pm #369677

rigots
Lifetime Member

Post count: 275

Hi Kor Chung,
I did some more CSS changes and I am now satisfied with my logo positioning and size.

If you know how to make the logo to stop from flexing (increasing and decreasing in size each the the browser windows is resized) that the would be great, that way I would not need too many CSS @media entries to keep re-adjusting the logo as it grows.

Thank you.

March 25, 2017 at 9:19 am #369744
Giri
Expired Member

Post count: 3155
```
.site-logo img {
    width: 253px !important;
    height 33px !important;
}
```
March 25, 2017 at 9:22 am #369745
Giri
Expired Member

Post count: 3155
Also add this code
```
.sd .site-logo-wrap .site-logo {
    min-width: 253px !important;
}
```
Author

Posts

Viewing 14 posts - 1 through 14 (of 14 total)

We have moved to a support ticketing system and our forums are now closed.

Open Support Ticket

How to keep the Logo centered on header

How to open a new support ticket

Support Policy

Support Forum Search