I am currently setting up a Wordpress website based on the default Twenty Nineteen theme. The theme allows to use a header image. The default position is on the top left as can be seen in the following image (red square).

However, I would like to change the position of the header image. I would like to display the header image at the top right, next to the navigation links as can be seen in the following picture (see position of the red square).

Obviously, the newly positioned header image would have a different size, that is, it would be wider.

My question is: Is there any best practice procedure to change the position of the header image for the Twenty Nineteen theme? I know that the theme is heavily tailored toward mobile display and therefore the structure of the page may not allow such a modification, but maybe there is away.

I am currently setting up a Wordpress website based on the default Twenty Nineteen theme. The theme allows to use a header image. The default position is on the top left as can be seen in the following image (red square).

However, I would like to change the position of the header image. I would like to display the header image at the top right, next to the navigation links as can be seen in the following picture (see position of the red square).

Obviously, the newly positioned header image would have a different size, that is, it would be wider.

My question is: Is there any best practice procedure to change the position of the header image for the Twenty Nineteen theme? I know that the theme is heavily tailored toward mobile display and therefore the structure of the page may not allow such a modification, but maybe there is away.

• custom-header
• header-image

Share Improve this question asked Oct 29, 2019 at 19:44 betabeta 20311 gold badge22 silver badges99 bronze badges 3

• The best practice in customizing any theme is to create a child theme first. You can then modify whatever you need to, such as CSS, without worrying about your changes being overwritten. I'm not sure you'll find a more in-depth answer regarding changing the position. You'll just need to test your child theme at various resolutions, as there are likely several media queries that affect the size and position of the header at different resolutions. – WebElaine Commented Oct 29, 2019 at 20:18
• 1 of course, i work with a child theme already. thanks for your answer though. – beta Commented Oct 29, 2019 at 20:22
• That's not a header image, but a logo, you would be better off referring to the official docs on adding a header image and doing that, rather than repurposing the logo ( aka remove the logo instead, and add a standard header ) – Tom J Nowell ♦ Commented Oct 29, 2019 at 20:37

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

In the header file for the child theme there is a div with class of "site-branding-container"

It contains an h1 element and a p element. Just ad an img element after the p element. i.e.

<div class="site-branding-container">
    <div class="site-branding">

        <h1 class="site-title"><a href="https://wp-themes/" rel="home">Theme Preview</a></h1>

        <p class="site-description">Previewing Another WordPress Blog</p>

        <img src="https://cnet3.cbsistatic/img/Yt768C55hXNi2eGSB9qOv-e7SQg=/2011/03/16/c7675aa8-fdba-11e2-8c7c-d4ae52e62bcc/Chrome-logo-2011-03-16.jpg">

     </div><!-- .site-branding -->
</div>

Then adjust with css.