Align logo to left side of header.

  • Unknown's avatar
    mamamcreative · Member ·

    When I put in the logo image it automatically aligns it in the centre. How do I align it to the left side of the page (in line with the pages – home, about ect). (Im using Radcliffe theme)

    Thanks so much

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

  • Unknown's avatar
    lizthefair · Member ·

    When I put in the logo image it automatically aligns it in the centre. How do I align it to the left side of the page (in line with the pages – home, about ect).

    I’m happy to help you figure out the CSS for this. The first step is to figure out why what is causing the logo to be centered in the first place. If you aren’t familiar with the terms I use in the explanation below, I highly recommend the short tutorial below. It’s a great place to start learning to unlock the magic of CSS.

    https://cssworkshop.wordpress.com/

    Using the inspect element feature in Chrome, I can see that the logo is controlled by the selector .site-logo-link. I can also see the original properties assigned to this selector are:

    .site-logo-link {
  display: inline-block;
  left: 50%;
  margin: 0 0 20px;
  position: relative;
  -webkit-transform: translate(-50%,0);
  -ms-transform: translate(-50%,0);
  transform: translate(-50%,0);
  z-index: 2;

    In this case the “left” property is causing the logo to be centered. Through trial and error I saw that changing that percentage to 15% put the logo where you want it on large screens, but for tablets and phones, the logo ended up too far left. By adding a bit of a margin, and then reducing the “left” percentage to 10% I was able to get the logo in a good place on both sizes of screens. Here’s the final code to add to your CSS box.

    .site-logo-link{
	left:10%;
	margin-left:50px;
}

    If you’d like to make more changes, I’m happy to help you with those too. Take a look at the training material I provided above and next time we can walk through the discovery process together.

  • Unknown's avatar
    mamamcreative · Member ·

    Thanks so much for your help. It works perfectly. Only problem is how do I make the logo bigger. As it stays a constant size – even when i change it in photoshop.

    Thanks for the training material. Will definitely check it out.

  • Unknown's avatar
    lizthefair · Member ·

    I’m happy to help you work on making the logo larger, but it will be much easier for us to see what works if you have the logo on the site. Let me know when you’ve re-added the logo and we’ll go to work.

  • Unknown's avatar
    mamamcreative · Member ·

    Thanks so much but decided not to put the logo there anymore.

    Next problem is: Does Radcliffe have a plugin to add a gallery page?

    Thanks for all your help and for always replying. Much appreciated.

  • Unknown's avatar
    lizthefair · Member ·

    Does Radcliffe have a plugin to add a gallery page?
    Thanks for all your help and for always replying. Much appreciated.

    There isn’t a plugin (It’s not possible to add new plugins to WordPress.com hosted sites) but you can add a gallery to any post or page. There is also a widget that lets you put a gallery in a sidebar or footer.

    Here’s more info on how they work, and how to add them to your site

    https://en.support.wordpress.com/images/gallery/

    If you need any help getting that to work the way you want, please let me know, I’ll be happy to help.

  • Unknown's avatar
    mamamcreative · Member ·

    Thanks for all your support. Figured it all out.

    Im pretty useless with this. But i know in the Radcliffe demo (http://www.andersnoren.se/themes/radcliffe/#) there is a dropdown menu. How do I go about this?

  • Unknown's avatar
    lizthefair · Member ·

    The best way to make a menu like that is to use the custom menu feature. You can learn more about that here
    https://en.support.wordpress.com/menus/

    The dropdown feature is created with a submenu. Here’s a direct link to the sub menu instructions on the page linked above

    Menus

  • The topic ‘Align logo to left side of header.’ is closed to new replies.