Replace header with logo

I’m still having a hard time finding any help. Anyone out there?

are you capable of editing files?
If so, find the theme folder sliding door and open the “header.php” file

Edit where it says

<!-- BEGIN wrapper --> 

<div id="welcomeheading">
        <h1><a href="https://www.heleloa.com/"> 

        Heleloa        </a></h1>
</div><!-- END welcomeheading --> 

<div class="description">The #1 online directory for Hawaiian businesses in Southern California</div>

and replace it with something like:

<!-- BEGIN wrapper --> 

<div id="welcomeheading">
<h1><a href="https://www.heleloa.com/"><img src="IMAGEFILEHERE"></a></h1>
</div><!-- END welcomeheading --> 

<div class="description">The #1 online directory for Hawaiian businesses in Southern California</div>

Replace where it says “IMAGEFILEHERE” with the location of the file. If it is in your themes image folder it will be something like
images/IMAGENAME.jpg

alternativly, if you don’t want the tagline to be text, but a part of the image, delete the
<div class="description">The #1 online directory for Hawaiian businesses in Southern California</div>
from the header

Thank you brettlewis, that did work. However, I had to resize the image so that it was the same width as the image menu. If I were to use the original size (which is about 300px wider) it aligns with the left side of the image menu and extends far to the right – I hope my explanation makes sense. Is there any way I can center the logo image across the entire page? rather than have it flush to one side of the menu?

The width of the header is limited by your wrapper. which right now is set at 940px. You have two options. Either make the wrappers width larger, which will cause your entire page to widen (which I don’t think you want)

or you can move the header:

<div id="welcomeheading">
        <h1> 

        <img src="https://i.imgur.com/h1jW9.png">
        </h1>
</div>

to be above the wrapper and change the style of the “welcomeheading” element.

here is my line by line code recommendation:

find this in header.php:

<div id="wrapper"> 

<!-- BEGIN wrapper --> 

<div id="welcomeheading">
        <h1> 

        <img src="https://i.imgur.com/h1jW9.png">
        </h1>
</div><!-- END welcomeheading -->

replace it with this

<div id="welcomeheading">
<img src="https://i.imgur.com/h1jW9.png">
</div><!-- END welcomeheading -->
<!-- BEGIN wrapper -->
<div id="wrapper">

If you do this you will also have to edit a few lines in your style.css file to properly align your header.

on line 52 of style.css you will see this:

#welcomeheading {
        text-align: center;
}

replace it with something like this:

#welcomeheading {
        width:XXXpx;
        margin: 0 auto;
}

enter the width of the image in the XXX field.
declaring “margin: 0 auto” tells the header that it needs to be centered on the page now that it is not in a wrapper.

hope that helps.

That definitely helps! Thank you for being so detailed and quick to respond!