Centre Logo and Site Title

bryanwall · Member · Jul 13, 2019 at 1:45 pm
Copy link

Add topic to favorites
Hi,

I want to centre the logo, site title, and header text of my site. At the moment on the desktop site all three are at the top left.

I would instead like them to be on top and centred exactly like in the mobile version.

I pretty much zero experience with CSS but I know how to add and remove code in the customiser.

If anyone could help me with this I’d really appreciate it.

I’m using the Patch theme.

The blog I need help with is: (visible only to logged in users)
supernovia · Staff · Jul 15, 2019 at 11:53 pm
Copy link
Hi there, can you try adding this?
```
.site-branding {
    text-align: center;
}
```
Let us know if you need more help.
bryanwall · Member · Jul 16, 2019 at 11:15 am
Copy link
Hi, thanks for your help but that doesn’t work.

It just centres the site title and tagline under the logo but all three still remain on the far left.

I want all three to be centred and as a header like in the mobile version.

Does that make sense?

Apologies for the confusion!
studiozandra · Member · Jul 17, 2019 at 9:16 pm
Copy link
Hi bryanwall,

Just to clarify: you want to override the default theme layout, and have your logo centered at the page top even in desktop view? (like this similar grid layout in Hive theme): https://thecookingapprentice.com/

I myself am here to learn, and I’ve not been able to produce the desired effect. I think this has to do with adjusting the breakpoints @media only screen , (min-width: 1450px) . In mobile view, yes, the logo moves to the top, but the page also shifts to one column, which you don’t want on desktop.

The only way I got it to work was in the HTML, move the “masthead” header out of the “grid__item post–animated post–loaded entry–even” div, up a couple of levels inside the “main” section (and then proceed with align-text: center;). But that seems quite drastic.

You might also try asking the theme authors here: https://premium-themes.forums.wordpress.com/forum/pixel-grade/patch/
marklchaves · Member · Jul 18, 2019 at 3:17 am
Copy link
Hi Bryan,

Looks like you are running the Patch Theme. https://wordpress.com/theme/patch

The layout design of this theme seems to fix the site identity (logo, site name, tagline) to the upper left corner. That’s by design. For mobile, yes, your site identify will stack on top. That’s good standard responsive design. But, on desktop, the default layout for Patch looks like a masonry grid.

I suggest you shop around for another theme if you want your site identity to be front and center for desktop. Or, look at the Patch theme setup again to see if you switch to full-width layout instead of grid. But, if this is possible, your blog posts may not be in masonry layout anymore.

Here’s the link to the Patch setup https://wordpress.com/theme/patch/setup

Thanks for posting. Best of luck!
torres126 · Member · Jul 18, 2019 at 4:32 pm
Copy link
Hi there,

I would also firmly agree that the best solution here is probably to search for another theme if this is a major issue; the theme developer definitely seems to have intended this to be the case.

I’ve taken a quick look at your site and I’ve come up with a potential CSS work around:
```
@media only screen and (min-width: 900px) {

.home article {
margin-top: 400px;
}

.home .container {
margin-bottom: 400px;
}

.home .grid__item:nth-child(1) {
display: flex;
justify-content: center;
margin: auto;
width: 100%;
}

.home .site-branding img {
max-width: 320px;
}

}
```
In action:

However, I am not entirely convinced that this will be sufficient permanently, as this is a drastic change to your layout.

Let me know if this does work for you though. :)
bryanwall · Member · Jul 20, 2019 at 12:14 pm
Copy link
It works but is indeed drastic. I think it’s best to leave the default as is.

It’s not a major issue for me to leave it as is. I love the theme so it slightly altering the logo and site name was a minor quibble.

Thanks for all of your help!

That includes everyone else too!

No items found.