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 ??

Thanks Tom. The first rewrite of .header-widget in style.css definitely re-centered the logo. The second one which I rewrote in “css/mobile.css” causes the social icons to crash into the logo on smaller screens.

I decided to test this on my test server so could see what happens. See it here: https://bitemyhair.markhannondesign.com

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://www.ads-software.com/plugins/simple-custom-css/

Not to worry Tom. This is a child theme.

Good ??

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

Absolutely. See for yourself (original code is commented out).

https://bitemyhair.markhannondesign.com/wp-content/themes/bitemyhair/style.css
https://bitemyhair.markhannondesign.com/wp-content/themes/bitemyhair/css/mobile.css

Is it possible that the child theme is pulling in the mobile.css from the parent theme?

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: https://generatepress.com/api/themes/generatepress_child.zip

Hope this helps ??

Thanks Tom. I’ll try it out. It may be a challenge to find every instance of my modified CSS. It’s interwoven among yours. Yeesh! Lesson learned.

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 ??

Thanks. I’ll let you know how it goes.

Worked perfect. Thanks.