How do I change the dimensions of the logo on my anemone theme?

  • Unknown's avatar
    joheathcote · Member ·

    hi,

    Can anyone offer some advice about how I can increase the height of the logo on my anemone theme?

    The recommended dimensions are 1920 x 200 but this doesn’t leave enough room for my logo’s tagline to be easily readable.

    I’d like to increase it to at least 1920 x 400.

    I think I need to use CSS to do this, but am not sure what the logo id is in anemone.

    Is this possible? And how would you recommend I do it?

    Thank you.

    Also, if you could explain how to change the colour of the menu bar I would really appreciate it too!

    Thank you.

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

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, have you thought about using a header image instead of the logo? The header image is recommended at 1920 x 200, but you can use a taller image, such as 400 and then “skip cropping”. We can then if need be make some CSS adjustments if it doesn’t look just right.

    With the site logo, you are limited to 100px in height. It can get complex to adjust the size of that.

    Try the skip cropping on the header image and then if there are any issues, let me know and I can help work them out.

  • Unknown's avatar
    joheathcote · Member ·

    hi,

    Thank you for this advice. I’ve given it a try but unfortunately, if I skip cropping, the bottom half of the header image disappears under the menu bar.

    Is there any easy way to fix this?

    Thank you!

  • Unknown's avatar
    thesacredpath · Member ·

    We can fix the height issue with CSS. if you wish to add it back in and then let me know.

    I did just look at your site and the header area looks pretty good the way you have it. Which image from your media library are you wanting to use? Perhaps I can work and get the CSS for you without you having to first insert the new image. I can then post the CSS here and you can then reinsert the larger image and copy/paste the CSS.

  • Unknown's avatar
    joheathcote · Member ·

    Oh that would be great, thank you.

    I would like to use the logo with the strapline and the bee. It is uploaded to the media library.

    It is 1920 x 400 px.

    Thank you so much for your help with this.

  • Unknown's avatar
    thesacredpath · Member ·

    Thanks. First off, that image has a lot of whitespace to the right of the bee. I would suggest you first edit that image in your image editing program and crop it more tightly on the right side. I’d actually like to have that image available before I work out the code so that we don’t have to go back and forth on things. Don’t worry so much about the 1920 width when you do the cropping as we can center the image in the available area at the top.

    Alternately you can crop the existing image from within the Media Library if you wish. See this support page for more information on that.

    Let me know when you have that done.

  • Unknown's avatar
    joheathcote · Member ·

    hi again,

    ok, I’ve done that… what do you think? Will that work?

    Thank you again…

  • Unknown's avatar
    thesacredpath · Member ·

    Thanks. First off, remove your site logo and uncheck the “Display Header Text button. Next, add the revised image at Customizer > Header Image. Then add the following to your custom CSS. 

    .site-header {
background-size: contain;
min-height: 300px;
}

    Let me know how that goes and if you wish to make further adjustments, we can.

  • The topic ‘How do I change the dimensions of the logo on my anemone theme?’ is closed to new replies.