Recenter site logo

Hi there,

When you float an element, other elements notice is and will make room for it.

We can use some custom CSS to fix this..

.header-widget {
    float: none;
    max-width: 50%;
    overflow: hidden;
    position: absolute;
    right: 10px;
}

Then we’ll want to get rid of the positioning on mobile:

@media screen and (max-width: 768px) {
    .header-widget {
        float: none;
        position: relative;
        right: auto;
    }
}

Hope this helps 🙂

It’s never a good idea to edit core files – those changes will be lost when you update the theme.

Try adding all of the code above into this plugin: https://wordpress.org/plugins/simple-custom-css/

Good 🙂

And you added the @media block? That code is there to stop the header widget from crashing into the site logo.

Ah, I see what’s happening.

style.css and functions.php don’t require you to copy the original file and add on to it.

They can be completely blank, and the browser will still read the parent theme’s style.css and functions.php.

So, your style.css should have your child theme info at the top, and the only your custom CSS – none of the core parent theme CSS. You can also add the mobile stuff in this file – no need to include another mobile.css.

You can find our blank child theme here: http://generatepress.com/api/themes/generatepress_child.zip

Hope this helps 🙂

No worries 🙂

When I want to find the differences between two files, I use a program called “DiffMerge”.

It’s free, and allows you to compare two files. It might be helpful to compare the default style.css with yours so you can pick out your custom stuff 🙂