replace header text for logo

Hi there, you can add your logo with CSS and set the existing text title to transparent. This would be the code.

.site-title a {
    color: rgba(0, 0, 0, 0);
}
.site-title {
    background: url("URL_OF_IMAGE") no-repeat  scroll 0 0 transparent;
}

You would upload your image to your media library, get the URL of that image and then replace URL_OF_IMAGE between the quote marks. The title area is only about 40px tall originally, so if your logo is taller than that, you will need to add a height declaration to increase the height.

The width of the site title area is set for a maximum of 25%, as is the search section and then the navigation gets 50%. So if you logo is wider, some width will need to be robbed from those other two divs – .header-search and .main-navigation .

If you have not yet done so, I would suggest creating a child theme so that any customizations you make will not be overwritten by a future theme update. Alternately you can use the Edit CSS function in the Jetpack plugin, or use one of the other Custom CSS plugins that will keep CSS changes from being overwritten.

Child Themes
Child Theme creation plugins
Jetpack plugin
Custom CSS plugins

Hello,
I have just done this on my own site https://www.swimquest.uk.com and it has mainly worked, however I now seem to have a search box there which wasn’t there before. Do you know why this may be and how I can remove it?

Many thanks for your help,

Alice

Please ignore – I have resolved the search box issue.

where I must add the code? in style.css?

dem10 –

Don’t edit the theme files directly, otherwise your changes will be overwritten every time the theme is updated to the latest version.

An easy way to add custom CSS is to install the Jetpack plugin and activate the Custom CSS module. You’ll then add your custom CSS in the new stylesheet editor that’ll appear in your dashboard, under Appearance > Edit CSS.

As alternatives, you could either install a standalone custom CSS plugin, or create a child theme.