Hi @psamwp,
In case you’re not aware: You should not edit your theme’s style.css file directly. Any changes you make there will be lost when it comes time to update your theme. It also makes it harder to troubleshoot issues such as this.
Instead, to add custom CSS, firstly set up a child theme or activate a standalone CSS plugin. (If you have Jetpack installed then you can activate its custom CSS module.)
By using a child theme or a plugin, you can easily view all of your custom CSS in one place, which makes it easier to spot something that could be causing the trouble you noted.
If you’re not already using a child theme or a plugin, I strongly recommend you consider starting afresh with your CSS customisations.
If you are already following the above guidance, please copy/paste your custom CSS into your next reply. You can use a pastebin.com if there’s a lot of it.
Thanks!
Thread Starter
psamwp
(@psamwp)
Hi @siobhyb
Thank you for the reply. I will do as you suggest. I only wanted to understand what part of the CSS actually kept the header image in place. But that is alright. Your suggestion seems more feasible than looking through a pile of code and confusing myself further!
Many thanks!
Hi @psamwp,
The image is fixed into position using position: fixed; in the following part of the theme’s CSS:
@media (min-width: 1024px) {
.site-header {
float: left;
position: fixed;
width: 40%;
}
}
A child theme or a plugin are definitely best practise and I recommend going ahead to set either one up before making further changes.
I’ll be happy to help if any questions come up along the way.
Thread Starter
psamwp
(@psamwp)
Hi @siobhyb
Thank you very much for the CSS. I did install a CSS plugin to add the changes to the font styles and color. I wasn’t sure of what I edited initially that made the header go awry. But many thanks for helping me understand the part i messed up. Will work only with child themes and plugins henceforth.
Thank you again!
You’re most welcome! We’re right here if extra questions come up, too.
