Hello @jxnxthxn,
Could you please add the following CSS code in the Appearance > Customize > Additional CSS section of your WordPress Admin dashboard:
/* --- Begin site branding alignment --- */
.mb-container {
position: relative;
}
.site-branding {
display: inline-block;
}
.site-branding img {
margin-top: 15px;
}
.site-title-wrapper {
display: inline-block;
}
.site-title {
font-size: 110px!important;
display: inline-block;
text-align: center;
margin: 0!important;
position: absolute!important;
top: 50%!important;
left: 50%!important;
transform: translate(-50%, -50%)!important;
width: 100%;
}
@media ( max-width: 991.98px ) {
.site-branding img {
margin-top: 15px;
max-height: 60px;
}
.site-title {
font-size: 66px!important;
}
}
@media (max-width: 575.98px) {
.site-branding img {
max-height: 33px!important;
}
.site-title {
font-size: 33px!important;
}
}
/* --- End site branding alignment --- */
That should keep the logo to the left with the text centered in the header and to right of the logo. This branding will adjust for desktops, tablets, and mobiles.
Hi @nm1com,
Thank you so much! It works perfectly:)
You’re welcome, @jxnxthxn! Glad it works!
If anyone needs it, I also have the CSS code for aligning the logo AND text title in the center of the header:
/* --- Begin site branding center alignment --- */
.site-branding {
float: none;
display: flex;
align-items: center;
justify-content: center;
}
.site-title-wrapper {
margin: 0px;
padding: 0;
}
.site-title {
position: relative!important;
top: auto!important;
left: auto!important;
right: auto!important;
line-height: 110px!important;
font-size: 110px!important;
}
.site-title img {
line-height: 110px;
}
@media ( max-width: 767.98px ) {
.site-branding img {
max-height: 60px;
}
.site-title {
font-size: 33px!important;
}
}
/* --- End site branding center alignment --- */
I misunderstood the question and thought it was about centering the entire site branding, rather than just the text. 🙂
