[Support request] How to Centre Site Title?

[Shaun]

Hi
I am starting to build the below site and wanted to know how to centre the site title.
Thanks
Shaun

[Leo]

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 🙂

[Shaun]

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

[Fernando]

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;
    }
}

[Shaun]

Thx Fernando
It is getting close. My only remaining tweak is to get the tagline to be exactly centre like the site title.

[Author]

Posts