Aligning logo and header title in Distinction theme

Start off by putting the image in the #masthead or #branding div, whichever looks best. You may need to float it left to get the effect you want.

HTH

PAE

Thank you Peredur! I will give it a shot – I’m learning as I go ?? I’m very new to all of this.

Peredur, am I correct that you are talking about the CSS menu and not the header php menu? I added the image into the header.php menu, but nothing I’m doing in the CSS menu is working. Again, I’m very very new to this ??

No. I’m talking about the HTML. I don’t know what you’re referring to when you talk about menus. I’m talking about files. Exactly which file will depend on your theme.

If you wanted to do it solely via CSS, you could make your image absolutely positioned with respect to some convenient div (which would have to be non-statically positioned—relative is the usual technique), or the viewport. Or you could float it left, although that might give you problems with IE.

You would alter the CSS in the style.css file, preferably in a child theme.

Your HTML seems odd, though. The #header div surrounds the #logo, #wrapper and #footer divs. usually, the wrapper goes outside with the header, content and footer divs enclosed within in. This makes it a lot easier to deal with a header logo. What theme are you using? Is this the HTML that came with the theme?

Also, your logo is a 1120px x 1583px image scaled to 200 x 250. Your page would load a lot quicker if you scaled your image in an image manipulation program like the GIMP before uploading it.

HTH

PAE

I’m using the Distinction theme, and that is the HTML that came with it. I am going to fiddle with the logo more, but wanted to learn how to get it properly inserted and positioned. I must admit that I am completely confused about folders – I have been reading so much about inserting logos and haven’t read anything about that. All I’ve learned is that you insert the logo into the header.php and then manipulate the CSS as well. (my very generic lay mans explanation)

@jemmtru You have modified the theme so much you seem to have broken the layout. The Distinction theme is supposed to look like this: https://themes.wpninjas.net/distinction/.

@perdur There is the header div and then a wrapper div for everything else. @jenntru has modified the theme in some way that has broken the layout as you can see by viewing the link above.

@jenntru For your purposes the logo should be placed within the #branding div within the header.php file.

@james: Yes. That’s what I thought, but I was too polite to say ??

@jemmtru: I think I’d go back to square one (i.e. start over). You probably need to take from this what you can and then list the things you want to do to get the theme right for you. When you’ve done that, you can seek advice on each one in turn so that you don’t end up breaking the layout. If you validate your HTML you’ll see that there are some serious errors that might come back to bite you later on, especially in respect to cross-browser compatibility.

If you need to make sweeping changes to the template, you might ask yourself if this is the template for you.

HTH

PAE

Oh! And if you need to make changes like these it’s almost always better to do them in a child theme.

Cheers

PAE

Thank you both for your help, I appreciate your time.

?? yes, I learned that the hard way. Thank you again for all of your help and insight.