Home Forums Free Themes Kids Education Logo size in header

Viewing 15 posts - 1 through 15 (of 32 total)
  • Author
    Posts
  • #97141
    messmeriza
    Participant

    Hi there,

    I need your help with the logo size on this website please: http://fuelcatering.ca/newsite

    The logo I have uploaded is 547 x 548 pixels in size. I need it to be much larger so it almost touches the top and bottom of the header. If I take a screenshot the header is 130px tall, so I need the logo to be about 115px tall.

    The only CSS that I have in the Additional CSS section is:
    #header-image {
    height: 500px;
    max-width: 100%;
    }

    I can not figure out how to make it taller.
    Thanks!
    Carolin

    #97143
    messmeriza
    Participant

    The logo also doesn’t seem to be centered between the menu. It’s a bit further right at the moment and I would like it to be in the middle of the browser window. Thanks!

    #97181
    wensolutions
    Keymaster

    Hello @messmeriza,

    Please add below given CSS to increase the size of the logo.

    For this go to Admin Panel > Appearance > Customize > Additional CSS.

    .modern-design .site-logo img {
        max-height: 100%;
    }

    Hope this helps.

    Thank you.

    #97186
    messmeriza
    Participant

    Thanks. 100% made it very large, about double the height of the header. I have made it 100px and it looks ok now. But it’s not centered vertically in the header. It has more space above than below the logo. How can I make it the same space so it sits right in the center?

    It is also not centered horizontally in the browser window.

    #97191
    messmeriza
    Participant

    Can I also somehow minimize the space to the left and right of the logo. It’s way too much. Thanks!

    #97215
    wensolutions
    Keymaster

    Hello,

    Please add below given CSS to resolve the issue.

    .site-header .container {
        width: 70%;
    }
    .left-menu {
        width: auto;
    }
    .right-menu{
    	   width: auto;
    }
    .site-branding {
        width: auto;
       
    }

    Thank you.

    #97249
    messmeriza
    Participant

    It’s not centered vertically in the header. It has more space above than below the logo. How can I make it the same space so it sits right in the center?

    #97254
    wensolutions
    Keymaster

    Hello,

    Please add below-given CSS for this.

    .site-logo {
        margin-top: -12px;
    }

    Hope this helps.

    Thank you.

    #97257
    messmeriza
    Participant

    Perfect thanks!

    #97265
    wensolutions
    Keymaster

    Hello,

    Glad we could help.

    Thank you.

    #97728
    OptiwebCanada
    Participant

    Hello

    I find that the logo is way too small in the theme for my website https://www.ecidemolitioninc.ca/

    With no positive results (unchanged size) I have added the code:

    .modern-design .site-logo img {
    max-height: 100%;
    }

    am I using the wrong css code?
    Thank you for your support

    #97737
    wensolutions
    Keymaster

    Hello,

    Please add the below given CSS to increase the logo size.

    img.custom-logo.jetpack-lazy-image.jetpack-lazy-image--handled {
        height: 70px;
        max-width: 75px;
        margin-top: 5px;
    }

    Hope this helps.

    For any further query/confusion, feel free to reach back to us.

    Regards!

    #98212
    teenytoon18
    Participant

    Hi How can I change the position of my logo at the top of the screen?
    I currently have a menu to the left but would prefer the logo to the left and the menu across the rest of the top of the screen.

    Also, my page titles are being hidden behind the cloud detail, how can I fix this so I can see the page title.

    my website is http://www.teenytoon.co.uk

    Thanks in advance

    Lucie

    #98213
    teenytoon18
    Participant

    As per http://playempowerthrive.sg/ for the logo location.

    Thanks

    #98216
    wensolutions
    Keymaster

    Hello,

    As for your query, to make both the menu appear on the right is quite not possible. But as a workaround what you can do is delete the left menu using the CSS below:

    .left-menu {
        display: none;
    }

    And increase the width of the right menu using the CSS below:

    .right-menu {
        width: 70%;
    }

    So please add the required menu items in the right menu only.

    Also, add the CSS in Additional CSS directly.

    Hope this helps.

    Thank you

Viewing 15 posts - 1 through 15 (of 32 total)
  • You must be logged in to reply to this topic.