How to align Title / Logo when clicking on a post

How do I do it so that my logo on my blog (currently an image at https://alit.blog ) when I click on a post it does not align left?

Here is my current CSS:

body footer nav {display: none;}

#blog-title a {
background-image: url(https://i.snap.as/cc4YsgK5.png);
background-position: center;
background-repeat: no-repeat;
color: rgba(0,0,0,0);
display: inline-block;
width: 252px;
height: 103px;
background-size: 252px 103px;

/*color: #2B8BFA;
text-decoration: none;
font-family: 'Montserrat','Open Sans','Segoe UI',Tahoma,Arial,sans-serif;*/
}
#post #blog-title a, #subpage #blog-title a {
/* Change size of logo on post and tags pages */
width: 252px;
height: 103px;
background-size: 252px 103px;
}

.post-title {
font-family: 'Montserrat','Open Sans','Segoe UI',Tahoma,Arial,sans-serif;
}


#post article.sans, .font.sans, body#collection article.sans, body#subpage article.sans, input#title.sans, pre.sans, span.sans, textarea.sans {
font-family: 'Open Sans','Segoe UI',Tahoma,Arial,sans-serif;
}

hr {display: none;}

body {
background-color: #FFFFFF;
color: #000000;
}

a {
color: #000000;
text-decoration: none;
}

header nav a {
color: #000000;
text-decoration: none;
font-family: 'Montserrat','Open Sans','Segoe UI',Tahoma,Arial,sans-serif;
}

a:hover {
color: #000000;
text-decoration: none;
}

header nav a:hover {
color: #000000;
text-decoration: none;
}

#blog-title a { 
color: #000000;
text-decoration: none;

}
#blog-title a:hover { 
color: #000000;
text-decoration: none;
}

body footer nav {
display: none;
}

header p.description {
color: #000000;
font-family: 'Montserrat','Open Sans','Segoe UI',Tahoma,Arial,sans-serif;
}

.post-title {
color: #000000;
}
.post-title a.u-url:link, .post-title a.u-url:visited {
color: #000000;
}

body#collection a.read-more {
text-decoration: none;
}

article p a {
color: #000000;
text-decoration: none;
/*border-bottom: 2px solid #002B36;*/
}

article p a:hover {
/*background-color: #002B36;*/
/*color: #839496;*/
text-decoration: none;
}

img {
display: block;
margin: 0 auto;
}

body#post header {
-moz-opacity: 1;
-khtml-opacity: 1;
-webkit-opacity: 1;
opacity: 1;
}

header nav .views {
display: none;
}

body#post article time.dt-published, body#subpage article time.dt-published {
color: #000000;
}

#emailsub {
color: #000000;
text-decoration: none;
font-weight: bold;
font-family: 'Montserrat','Open Sans','Segoe UI',Tahoma,Arial,sans-serif;
}


 input[type=email], input[type=number], input[type=password], input[type=tel], input[type=text] {
border: 1px solid #999;
color: #000000;
text-decoration: none;
font-family: 'Open Sans','Segoe UI',Tahoma,Arial,sans-serif;
}

a.btn.cta, a.btn.gentlecta, a.btn.submit, a.btn[type=submit], button.cta, button.gentlecta, button.submit, button[type=submit], input.cta, input.gentlecta, input.submit, input[type=submit], select.inputform.cta, select.inputform.gentlecta, select.inputform.submit, select.inputform[type=submit], textarea.inputform.cta, textarea.inputform.gentlecta, textarea.inputform.submit, textarea.inputform[type=submit] {
/*border: 1px solid #2B8BFA;*/
background: #2B8BFA;
color: #FFFFFF;
font-family: 'Open Sans','Segoe UI',Tahoma,Arial,sans-serif;
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;
}



a.btn.cta:hover, a.btn.gentlecta:hover, a.btn.submit:hover, a.btn[type=submit]:hover, button.cta:hover, button.gentlecta:hover, button.submit:hover, button[type=submit]:hover, input.cta:hover, input.gentlecta:hover, input.submit:hover, input[type=submit]:hover, select.inputform.cta:hover, select.inputform.gentlecta:hover, select.inputform.submit:hover, select.inputform[type=submit]:hover, textarea.inputform.cta:hover, textarea.inputform.gentlecta:hover, textarea.inputform.submit:hover, textarea.inputform[type=submit]:hover{
 background-color: #226FC8;
 /*border: 1px solid #226FC8;*/
}

and JavaScript but I dunno if its relevant:

var topP = document.createElement("p");

topP.style.textAlign = "center";

topP.innerHTML = '<nav id="hashtag"><a href="https://little.social" class="p-category"><span>⏺ Little</span></a><a href="https://linktr.ee/Little.social" class="p-category"><span>🌲 Linktree</span></a><a href="mailto:hello@little.social" class="p-category"><span>📧 Contact</span></a></nav>';

if (document.getElementById("manage")) {
    var cont = document.getElementsByTagName("nav")[1];
}
else {
var cont = document.getElementsByTagName("nav")[0];
}

if (cont !== null) {
cont.appendChild(topP);
} 
else
 {
cont = document.getElementById("post-body");
cont.insertAdjacentHTML("afterend", topP.outerHTML);
}

I tried to do all sorts in #post #blog-title a, #subpage #blog-title a {line of the CSS code like inline block, text aligh centre etc… but nothing works, when you click on a post link on my blog the logo always aligns to the left but I want it aligned in the centre.

If anyone is around be great to get some support on this, at the time of writing I still can’t get this to work???

Hey @idle, adding this to your CSS should do it:

header {
    text-align: center;
}

Let me know if that works!

1 Like

That worked perfect and can’t believe the solution was so simple lol

Following on from this, for the title of the blog, is there anyway to replace it with blank text easily? I tried ‘content:’ in the CSS but it didn’t work. The issue is, that if I put a blank space on the title of the blog in settings, when I try and post to the blog that I have multiple of with no titles this way its hard to tell which one I am posting to, so it would be much better to hide the blog title using CSS or JS I just can’t figure out how to?