Move Logo to Left of Site Title

• 

  kazatman · Member · Nov 12, 2016 at 4:37 pm

  • Copy link
  • Add topic to favorites

  Hi

  I would like to move my logo to the left of the site title. Currently its at the top.

  I used this code I found on page 2 but it didn’t make a difference.

  .site-logo {
  margin: 0 auto;
  width: 70px;
  height: auto;
  position: absolute;
  left: 25px;
  top: 12px
  }
  .site-description,
  .site-title {
  text-align: center;
  }
  
  @media screen and (max-width: 1020px) {
  .site-logo {
  position: relative;
  left: 0;
  }
  }

  The site I need help with is ipeacefulpresence.com

  The Logo address is https://chedanand.files.wordpress.com/2016/11/cropped-transparent-black-ipeacefulpresence-for-web-03.png?w=685&h=269

  Thanks

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

• 

  thesacredpath · Member · Nov 13, 2016 at 2:53 pm

  • Copy link

  Hi there, remove the custom CSS you have now (reflected above) and replace it with the following and see what you think.

  @media screen and (max-width: 1099px) and (min-width: 768px) {
  	.site-branding {
  		display: flex;
  	}
  	.custom-logo {
  		max-height: 85px !important;
  	}
  }

• 

  kazatman · Member · Nov 16, 2016 at 12:01 am

  • Copy link

  Hi there

  Thank you so much for taking time to help me. I am grateful!

  I tried the above code and there was an improvement with the size of the Logo which is now on the left of the site Title.

  However, I have added a Tagline and I would like to have the Logo and Title and menu remain on the same horizontal line as it is now but would like to have the Tagline and the Logo and the Title move to the left so that the Tagline and Logo is under the WordPress symbol(W) and MySite, with the Title to the right of the Logo.

  The start of the Menu can remain where it is now.

  Thank you again and hope to hear from you soon :)

  Kaz

• 

  thesacredpath · Member · Nov 18, 2016 at 1:38 pm

  • Copy link

  Kaz, the site description/tagline and the site title/logo are in different divs, so having them all together in one place on Karuna isn’t really possible. We do have a possibility though. What we would do is to use CSS to hide the existing site description/tagline and then use a CSS psuedo selector to add it back in below the site title. Give the following a try, adding it below you existing custom CSS and let me know what you think. Make sure and widen and narrower your browser window, and view it on a phone and tablet to see how it all looks and adjusts for different widths.

  .site-branding .site-title::after {
      color: #878787;
      content: "MANIFEST YOUR DIVINITY";
      display: block;
      font-size: 0.875rem;
  	padding-top: 5px;
  }
  .top-bar .site-description {
      display: none;
  }
  @media screen and (max-width: 1099px) and (min-width: 768px) {
    .site-branding {
      display: flex;
    }
    .custom-logo {
      max-height: 85px !important;
    }
    .site-branding .site-title {
  		padding-top: 15px;
  	}
  }
  .site-branding .site-title {
      font-size: 1.8rem;
  }

• 

  kazatman · Member · Nov 18, 2016 at 6:36 pm

  • Copy link

  Dear sacredpath

  Your creativity is amazing!

  The above code has been implemented and love the look both on the desktop and smartphone. The look is yet to be seen on a tablet.

  One is very happy with your excellent work and look forward to working with you again!

  Best regards

  Kaz

• 

  thesacredpath · Member · Nov 21, 2016 at 2:40 pm

  • Copy link

  Awesome, thanks and you are welcome! If you have additional questions or problems, please let us know.