Header logo appearing too large

• 

  jamieszapka · Member · Apr 3, 2017 at 11:57 am

  • Copy link
  • Add topic to favorites

  Hello! I am using Nikon theme for my blog and I have a lot of questions and problems I can’t figure out. My site is http://www.mywholewellbeing.com I have attempted to resize my header logo numerous times, it looks as I like in mobile and tablets, however when it is viewed on a computer, it’s too large. I like to be able to see the entire logo in the screen, not having to scroll to have the top part be not visible but the bottom is. Thanks

  The blog I need help with is: (visible only to logged in users)

• 

  otpidusprime · Member · Apr 3, 2017 at 12:32 pm

  • Copy link

  Hi,
  To make the header logo smaller only on large screens like your computer, just copy and paste this code into the CSS file of the site using the CSS editor:

  @media only screen and (min-width: 768px) {
    .site-header-layout-three .site-branding {
      float: none;
      margin: 0 auto;
    }
  
    .site-branding {
      padding: 5px 0;
      display: inline-block;
      position: relative;
      z-index: 9;
    }
  
    .site-branding a img {
      display: block;
      height: auto;
      width: 300px; // adjust the size of the header logo by changing this value
      margin: 0 auto;
    }
  }

  This code will reduce the size of the header logo on screens above 768px(eg: desktops). You can adjust the size of the logo by just changing the width value(currently 300px) of .site-branding a img.

  Hope this helps :)

• 

  jamieszapka · Member · Apr 3, 2017 at 1:45 pm

  • Copy link

  Hi! This worked wonderfully! Thanks so much! I did expand the width to 800px and that allowed the logo to appear the exact size I wanted! Much appreciated!

• 

  otpidusprime · Member · Apr 3, 2017 at 7:35 pm

  • Copy link

  Awesome! Glad I was able to help :)