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).

enter image description here

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).

enter image description here

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.

  • 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 Oct 29 '19 at 20:18
  • 1
    of course, i work with a child theme already. thanks for your answer though. – beta Oct 29 '19 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 Oct 29 '19 at 20:37

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.com/" rel="home">Theme Preview</a></h1>

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

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

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

Then adjust with css.
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.