Need help? Check out our Support site, then


CSS Centering Header Logo

  1. 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 thisresonatesblog.wordpress.com.

  2. 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 :)

  3. Hello @otpidusprime

    thank you so much for your help!
    you are a life saver

  4. 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!

  5. 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:
    https://en.support.wordpress.com/code/#javascript

Topic Closed

This topic has been closed to new replies.

About this Topic