Menu Style centers menu AND logo

Hi!

I would like to move my logo (Appearances - Site title/tagline/logo) to the top center of my homepage, but when I change from ‘inline’ to ‘centered’ under Appearances - Header Area - Menu Style, it moves BOTH my logo and my navigational menu. I really don’t want the menu to also be centered, I had it on the upper right where I wanted it.
Is there anyway to individually center the logo without also centering the menu?
Thank you!
Cailley

Hello there,

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

    @media only screen and (min-width: 1025px) {
      .site-header .col-md-4,
      .site-header .col-md-8 {
        width: 50%;
      }
      .site-logo {
        max-width: 150px;
      }
      .site-header .col-md-4 a {
        display: inline-block;
        float: right;
      }
    }

Regards,
Kharis

Hi Kharis,

Thank you. I think after seeing it this way, it’s still not quite what I want. Alternatively, what I would like to do is use an image as the “Title for the first slide” - is there a way to use an image instead of text for this? E.g. See screengrab - I would like the image that is the logo in the upper left hand corner now, to be where the “Packaging & Gift Wrap” text is. Is this possible? (Partly, I want to do this because I want to put a different image in the upper left hand corner and also I want the StoneWrap logo image to be in the center of the homepage)

Thank you!
Cailley


Hello there,

You could use the below custom CSS code:

    .sydney-hero-area .text-slider .maintitle {
      background-image: url('https://yoursite.com/path/to/logo.png');
      background-repeat: no-repeat;
      background-position: left center;
      background-size: 100px;
      padding-left: 120px;
      padding-top: 40px;
      padding-bottom: 40px;
    }

Replace https://yoursite.com/path/to/logo.png in the code above with a valid URL of your logo image taken from your site’s media library (Dashboard > Media).

Regards,
Kharis

Thank you! That worked beautifully.
One last thing, I’m trying to increase the size of the logo in the upper left hand corner (circled in below screengrab). I’ve tried a couple css codes I found, but none do the trick. Could you help?

You’d need to play around with the below code as suggested in my previous reply.

    @media only screen and (min-width: 1025px) {
      .site-header .col-md-4,
      .site-header .col-md-8 {
        width: 50%;
      }
      .site-logo {
        max-width: 150px;
      }
      .site-header .col-md-4 a {
        display: inline-block;
        float: right;
      }
    }

These lines will enlarge the logo area and the menu’s becomes equal.

      .site-header .col-md-4,
      .site-header .col-md-8 {
        width: 50%;
      }

Regards,
Kharis

Ok, thank you for your help!
Cheers,

You’re welcome! Have a nice day!

Best,
Kharis