Archived topic
How to Centre Site Title?
4 replies · Started by Shaun on November 9, 2022
Hi
I am starting to build the below site and wanted to know how to centre the site title.
Thanks
Shaun
Hi Shaun,
Can you try setting the header alignment to center in the customizer?
https://docs.generatepress.com/article/header-layout/#header-alignment
Let me know :)
Hi Leo
Thx for the link. However, I had already done that which is why I'm not sure what to do next. Any other ideas?
Cheers
Shaun
Hi Shaun,
Try adding this in Appearance > Customize > Additional CSS:
.site-branding {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
text-align: center;
white-space:nowrap;
}
.site-header .inside-header {
position: relative;
}
You'll need to reduce the font size of the Site Title on smaller screens so that it fits.
If you want it to wrap however on Mobile as it does currently, use this code instead:
@media (min-width: 769px) {
.site-branding {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
text-align: center;
white-space: nowrap;
}
.site-header .inside-header {
position: relative;
}
}
Thx Fernando
It is getting close. My only remaining tweak is to get the tagline to be exactly centre like the site title.