Change Logo size and center on page

Hello, After looking through several forums and trying some of what you’ve suggested. I can’t seem to get exactly what I want. I would like to have the option to play around with the size of my logo (make bigger) and also center it on the page. It’s really small and appearing to the left of the screen and does not look good on mobile devices. Any assistance would be appreciated.

Thanks!

Hello there,

To center the logo, from admin area, visit Appearance > Customize > Header area > Menu Style. Enable “Centered (menu and site logo)” option.

To enlarge the logo size, you should add this extra CSS code to Appearance > Customize > Additional CSS.


.site-logo {
  max-height: 200px;
}

If it doesn’t help. Please share the link to your site, so I can have a look.

Regards,
Kharis

This was helpful somewhat but it’s still not as big as I would like. Is there a way to add it without it being part of the menu section. my website is http://beachbunnscloset.com

Also, is there a way to move the logo more to the left of the screen?

Hello there,

Please try adding this extra CSS code:


@media only screen and (min-width:1025px) {

  .header-wrap .container {
    width: 100%;
    padding-left: 5px;
    padding-right: 5px;
  }

  .header-wrap .container > .row {
    display: block;  
  }  
  
}  

Please note that enlarging the logo image will take too much space on mobile screen. Have you noticed that it’s too big on iPhone screen? Do you feel it’s fine?

Regards,
Kharis

I think I understand what you mean by it being to big on the iPhone screen. Are you referring to the height of the header? It does have too much space and I would like it to be a narrower space. I guess I can’t make the logo larger without making the header area larger? I don’t know what to do so new to this.

> Are you referring to the height of the header?

Yes. Have you checked it with your smartphone?

Regards,
Kharis

Yes I am referring to the height of the header and I have checked it on my smartphone and there is a lot of space which I don’t like. So their is nothing I can do about that?

So I can’t make the logo larger without it effecting the height of the header?

Probably restricting the logo image resize on larger screen would work for you? Try to replace this code:


.site-logo {
  max-height: 200px;
}


with:


@media only screen and (min-width:1025px) {
  .site-logo {
    max-height: 200px;
  }
}


Regards,
Kharis

I still feel like on a smartphone the height is too much and the logo is too small. Any other suggestions? Also, is there a way to increase the resolution of the logo to make the name stand out more?

Also, I noticed after making these changes the logo and header is appearing on every page. I would prefer if it is only showing the header and logo on the home page. How can I fix this?

Again, thanks for your help!

Hello there,

Please try to replace all of the custom CSS code I suggested with this one:


.site-header {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}

@media only screen and (max-width:1024px) {
  .home .site-logo {
    max-height: 270px;
    margin-top: -70px;
  }    
}

@media only screen and (max-width:767px) {
  .home .site-header .col-md-8 {
    margin-top: -60px;
  }  
}

@media only screen and (min-width:1025px) {
  
  .home .site-logo {
     max-height: 250px;
  }  
  
}

Regards,
Kharis

Hello, This definitely looks better on my smartphone and I like the size of the logo and the height of the header area. However, I would prefer if the logo is the same size on all pages. Is there a reason why it can’t be the same on all pages? The logo is bigger on the home and smaller on all the other pages.

Thank You!!

Please remove the .home selector from the code I’ve suggested above.

Regards,
Kharis

Thanks! and I’m so sorry to be going back and forth with this but I would like for everything to look and be consistent on all pages no matter what device you are using. The coding you provided has definitely helped and looks great on my smartphone.

However, On my Ipad, the logo and height of the header is good on the home page and blog page. This is not consistent with the other pages. The logo is smaller and the height of the header is different on the other pages.

On my desktop, All the pages are consistent as far as the size of the logo and the height of the header area. However, I would like for the logo and the menu selections to be more on the top of the page and perhaps the height of the header area to not be as wide.

Again, Thanks for any help you can provide!
Best, Robbin

Hello there,

I am so sorry for the long delay. Please try adding this extra CSS code:


.site-header .col-md-4 {
  max-height: 65px;
  overflow: visible;
}
 
.site-header .container .row {
  max-height: 70px;
}

.site-logo { 
  position: relative;
  z-index: 999;
  margin-top: -70px;
}

@media only screen and (max-width:1024px) {
  
  .site-logo {
    max-height: 270px;
    margin-top: -70px;
  }  
  
  .site-header .container .row {
    max-height: 50px;
  }  
  
  .site-header .col-md-4,
  .site-header .container .row { 
     max-height: auto !important;  
  } 
  
}

@media only screen and (max-width:767px){
  
  .site-header {
    padding: 5px !important;
  }
  
  .header-wrap .container{
    text-align: left;
  }

  .header-wrap .btn-menu{
    float: right;
    margin-right: 15px;
  }  

  .header-wrap .col-md-4 {
    max-width: 90%;
    position: relative;
    z-index: 2;
  }

  .header-wrap .col-md-4 > a {
    display: block;
    margin-left: -100px;
    border: 2px solid green;
  }  
  
  .header-wrap .col-md-8 {
    margin-top: -70px;       
  }        

  #mainnav-mobi {
    top: 70px;
  }
  
}

Let me know how it goes.

Regards,
Kharis

Thanks so much for your support. I’m now trying to get the logo designer to design and resize the image around this too. Not sure it this will eliminate the extra css but I thought I’d give it a try. Can you tell me the original size of the header area in pixels or inches?

Regards, Robbin

I guess it would also be helpful if I knew the original size for a logo image as well.

Hello there,

There’s no exact size. But the height is always scaled to 100px maximum height, which is defined in the main theme’s CSS.


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

Regards,
Kharis