How to change position of Site Logo to sit next to Site Name in Top Header

Hi there,

You can try the following CSS to get your site title and logo to be inline to one another:

a.site-logo-link {
    display: inline;
    max-width: 128px;
}

p.site-title {
    display: inline;
}

I also noticed when testing on mobile that your mobile menu icon is white which makes it invisible. This code will change it to black, so mobile visitors can see your menu toggle.

button.menu-toggle {
    color: #000;
}

Hope this helps!

Hi Jerry, thanks for your help.

Unfortunately those CSS didn’t work.

I managed to get the Menu toggle to change colour to black by inspecting the code and entering this:

}
.menu-toggle {
color: #000;
}

However, I still can’t figure out how to change the Site Logo position to be in line with the Site Name.

I’ve also noticed the Canape Theme hasn’t been updated for over two years, do you think that this will cause a problem long term, I imagine they have ‘decommissioned’ it.

I’m considering changing the theme.

Thanks for any help.

Hi there,

Jerry’s code works fine for me if I test it via the browser inspector.

Are you adding it in the Additional CSS section of the Customizer? Make sure that you add it underneath any existing code you already have in there.

I’ve also noticed the Canape Theme hasn’t been updated for over two years, do you think that this will cause a problem long term, I imagine they have ‘decommissioned’ it.

Canape hasn’t been retired, no, but you’re correct that it hasn’t been updated in a while. However, I’m not aware of any compatibility issues of this theme with the latest version of WordPress. If you do spot any issues, please feel free to let us know.

Hello @kokkieh Yes, bizarrely it’s worked this time round ??

Thanks!

However (always something..) it’s now not alined on the mobile version….??

Any possiblilty I could have it side by side on the desktop and ipad version and alined top and below on mobile? Perhaps reduce the font size of the Site Name?

Thank you for your comments regarding the theme. We will stick with it for the moment.

Or could another option be to reduce the Logo size?

Thanks in advance.

I see the logo and the site title in the same way on both mobile and desktop versions – not sure if I’m missing something here. If you’d like to add a screenshot, you can use an online tool (such as https://snipboard.io/) and paste the link into your reply.

In general, to change how the site looks on small screens, you will want to use Media Queries, more about those here:

https://wordpress.com/support/custom-design/custom-css-media-queries/.

Hello @fresatomica,

I hadn’t published the changes until today. I was waiting for an answer to resolve the mobile version query.

I have uploaded a screen shot, the link is below.
Can you see how the text ‘The Soban’ is across two lines in the mobile version?

https://snipboard.io/XSZAWg.jpg

I’m a newbie to this, i will read the link you sent in your message, but would love it if someone could send me a CSS so that the text in the mobile version reads on the line below the logo.

Thanks.

Hi again,

On really small mobile screens there is just not enough room to show the site title inline with the logo, so it’s probably best to default to the way the theme handles it normally, which is to show the title below the logo on mobile.

Please remove this CSS I gave earlier

a.site-logo-link {
    display: inline;
    max-width: 128px;
}

p.site-title {
    display: inline;
}

and replace with this:

@media only screen and (min-width:449px) { 
    a.site-logo-link {
        display: inline;
        max-width: 128px;
    }

    p.site-title {
        display: inline;
    }
}

Does that code correct the display issue on mobile?

Hi @jerrysarcastic thanks so much!

The CSS has worked and it looks great now.

Thanks for all you help again.

I will mark this thread as resolved.