Moving header image

The CSS for your header image is as follows:

.header-image
{
clear: both;
text-align: left;
}

The ‘clear: both;’ is forcing the header image to be below the menu. ‘clear: both;’ means ‘don’t allow any floating elements to the right or left of this’.

Replacing ‘clear: both;’ with ‘clear: none;’ will solve your problem. The menu will then be allowed to float to the right of the header image.

It’s best to work with Child Themes rather than edit the original parent theme files.

There is an ‘hgroup’ tag with a margin on it, causing unnecessary and unused space at the top of the page. Also your .header-image has a clear:both rule on it causing it to drop below the menu.

Removing those two things does this.

For css issues like this the developer tools within Google Chrome or Firebug within Firefox provide a good way to resolve these problems.

hello helpfulwebhosting,

Thanks a lot. I appreciate the explanation as well as I’m trying to learn.

Kind regards, Chris.

Hi Creatrix,
I do want it to move a bit more up indeed.
THanks, I’m currently checking the developer tool. (in all honesty didn’t know it was there)

Great help!!

My pleasure.

By the way, the ‘text-align: left;’ in your CSS for .header-image isn’t doing anything useful.

If you wanted to tell it to put the header on the left, you would use ‘float: left;’. But in your theme it will do this anyway so there’s no need to add it.

You might be wondering how overcome the ‘text-align: left;’ in a child theme now that you have been advised not to edit parent theme files and so you can’t delete the original line. Using ‘text-align: inherit;’ in a child theme would over-rule the setting from the parent theme to say ‘use the same text-align setting as the element that I’m in’