Resizing and Centering Logo in Header

Hi there,
Could someone please advise how I can centre and enlarge my logo? I would also like to have my menu centre aligned under the logo.
I’ve searched this forum and tried all of the solutions offered but for some reason they’re not working for me.
The site is jbkundalini.com
Many thanks!
Jacqui

Hi Jackqui,

Please try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

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

    #header.header .container .row {
      display: block;
    }

    @media only screen and (min-width: 1025px) {
      #header .site-branding {
        text-align: center;
      }  
      #header.header .container .row {
        display: block;
      }
      #header .site-branding.col-md-3 {
        width: 100%;
      }
      #header .menu-wrapper.col-md-9 {
        width: 100%;
      }  
      #header #mainnav {
        float: none;
        display: table;
        margin-left: auto;
        margin-right: auto;
      }
    }

Then you would edit your image to eliminate the empty spaces that surrounds the logo, then reupload it.

Regards,
Kharis
aThemes Support

1 Like

Thank you! That worked. I replaced my logo with a version I have that contains no white spaces around the edges. Thanks again :slight_smile:

1 Like

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis
aThemes Support

Thanks again. Now that my logo is looking bigger on the screen I was wondering how to create a separate row below the logo with a border for the menu to sit in.
Many thanks!