CSS Centering Header Logo

misskelsita · Member · Apr 17, 2017 at 4:49 pm
Copy link

Add topic to favorites
Hi guys,

I have tried several codes and am having a difficult time centering my logo with the current theme I am working on.
Does anyone have any tips?
Also, I was wondering if the hover feature over the photos could have different color overlays and if there is a CSS solution for this?

Thank you so much!

The blog I need help with is: (visible only to logged in users)
otpidusprime · Member · Apr 17, 2017 at 5:36 pm
Copy link
Hello @misskelsita,
1. Center the header logo
To do this first we have to set width of the container that has the logo to 100% minus the space of the menu icon:
```
.site-branding {
    width: calc(100% - 5px);
}
```
Then remove the float: left; from the site-logo-link class and use flexbox to centerize the logo:
```
.site-logo-link {
    float: none;
    display: flex;
    justify-content: center;
}
```
Finally, shift the logo image slightly to the right so that it is exactly at the center:
```
.site-logo-link > img {
    margin-right: -40px;
}
```
OPTIONAL: Here are the CSS codes to move the site title and the tagline to center:
```
.site-title {
    width: 100%;
    text-align: center;
}

.site-description {
    width: 100%;
    text-align: center;
}
```
2. Change to overlay color of the images
```
.filter-on .hentry.has-post-thumbnail:hover .entry-link {
    background: #0080ff;   //change this value to change the overlay color
    opacity: 0.6;
}
```
Hope this helps :)
misskelsita · Member · Apr 17, 2017 at 5:51 pm
Copy link
Hello @otpidusprime

thank you so much for your help!
you are a life saver
misskelsita · Member · Apr 17, 2017 at 5:57 pm
Copy link
hi again! @otpidusprime

One more question:
Is there a way for me to also code in a dynamic scroll with the header so that the logo moves to the right side when users scroll down and the header and by line go away making the top line smaller?

Thank you again for your help. You are a rock star!
otpidusprime · Member · Apr 18, 2017 at 8:05 am
Copy link
Hi again @misskelsita,
First of all thank you so much for your kind words :)

Is there a way for me to also code in a dynamic scroll with the header so that the logo moves to the right side when users scroll down and the header and by line go away making the top line smaller?

For this we will need JavaScript to detect the scroll amount and then trigger the logo to move to the right, hide the title and the tagline and make the top line smaller.

And since WordPress.COM does not allow use to add our own JavaScript codes, we cannot do that. I am Sorry!

Read more about JavaScript on WordPress.COM here:

Add Code to Your Site

No items found.