How do I move the header to the title area?

I want to move the logo/header to where the site title is. Can you help?

  • Patrick
    • Support Monkey

    Hi there @Ocean Digital Corp

    I hope you're having a great day!

    The easiest way to get that done is to add the logo as a background image to the title area. Then remove it from the theme settings under Appearance > Customize so it does not display where it was designed to. :slight_smile:

    Let's try this CSS as a starting point:
    .header-text {background: url('') 0 0 no-repeat #da0000;}

    If you don't already have an area in your admin where you can add custom CSS, try this handy plugin for that:

    Let's work from there. :slight_smile:

  • Mike D
    • The Bug Hunter

    Thanks Patrick. I am pretty old school, I used to work with Joomla and always used Dreamweaver or some WYSIWYG editor to deal with templates.

    Wordpress is really stumping me and I have no idea about CSS... its like trying to file taxes.

    I see your code, but where do I put it?

    Also, I don't want to install many plugins because I have found that some can cause security issues and I want to keep headaches to a minimum.

    Can we do this without the plugin you suggested? Im able to edit the theme files in the dashboard if only I knew which file to edit.

  • Jorge Castro
    • The Incredible Code Injector

    Hello @Ocean Digital Corp

    You can simply edit styles.css in the theme root. But I would suggest doing the solution that Patrick gave because if you edit the files directly, when you do an update for the theme, you will loose all of the changes.

    The other solution is using a child-theme, if your theme came with a bundled one, because making one from scratch can be a little tricky.

    Another suggestion would be to take a look around your theme options panel, they normally come with a space for custom CSS where you can simply copy and paste the code Patrick gave.

    Hope it helps :slight_smile:

  • Predrag Dubajic
    • Support

    Hey @Ocean Digital Corp

    If you are using child theme like @Jorge Castro mentioned above (thanks Jorge) you can add this code to the child themes main style.css file.

    The plugin that Patrick suggested is a simple one that is being used my number of our users and we didn't have any complaints so far.

    You can always modify the original themes CSS but this is not recommended because your changes will be overwritten with the theme update.

    Let us know if you need more help with this.

    Best regards,

  • Mike D
    • The Bug Hunter

    Ok, I installed the plugin and inserted the given code into the first line of that plugin and it works! Pretty impressive.

    Im not sure if the theme I am using is a child or not. Maybe an orphan?

    How does that work?! I would like to now tweak the positioning of that logo and possibly add some text to the red area. The theme was displaying the Site Title where the logo now is and they were overlapping so I turned off 'show Site Title' which works for now but it would be nice to have that reappear somewhere.

    Any advice on getting that red header area looking sharp would be greatly appreciated.

  • Predrag Dubajic
    • Support

    Hey @Ocean Digital Corp,

    If you are planing on doing number of changes to the theme files I suggest that you learn more about child themes, you can start here. When using child theme you are not making any changes to the original theme and this can be a life saver when it comes to theme update.

    As for the header area, you can try adding this code to see if you like how it looks:

    .site-header .header-main {
    	overflow: hidden;
    .site-header .header-main .header-text {
    	padding: 18px 30px;
    	min-height: inherit;
    .site-header .header-main .header-text .site-title {
    	position: relative;
    	left: 360px;

    You can move the site title by changing value of 360px

    Have a great New Year! :slight_smile:

    Best regards,

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.