Add Logo Image Beside the Nav Menu in a Thesis Website

by Rick Anderson on December 23, 2011

Thesis Simple Header Widgets Plugin

Let’s begin by going to the dashboard of our site and opening the Thesis Simple Header Widgets plugin. Now that we know how to add widgets to the header area, we’ll be adding a logo image and beside that we are going to place a navigation menu. Then we’ll add a background image and a search bar to the header. And finally, we’ll add the Facebook Like and Tweet buttons to the header.

In order to put a logo beside our navigation menu we need the left and right header area side by side. We’ll begin by specifying a width for the left header area but we don’t need a specific height for this. Make the left header area 325 pixels wide and hit save.

Thesis Defaults in the Header Area

Before we go any further I want to show you this choice for Thesis defaults. Click the plus next to Thesis Defaults here under Left Header Area and put a check mark next to “Retain Default Thesis Header Function in this Header Area?” When this is checked the Thesis default Title and Tagline will be displayed in this area and the area will no longer be widgetized.

Let’s leave this choice as it is, hit save and let’s take a look at it. Return to the page with the plugin and refresh it. You can see we’ve maintained our 325 pixel width but it’s no longer a widgetized area and it gets the name of the blog and the tag line which is the default Thesis behavior. We still have a right header area.

Go to Appearance and then Widgets. You now see the left header is gone and only the right header area widgets remain. So you have that ability to retain Thesis default behavior if you wish. We’ll come back over to our plugin options and let’s remove the Thesis default behavior.

Insert Logo Image in the Header

Now let’s insert our own logo image. We’ve already given it a width. We’re not going to change the margin and padding or background or text alignment at this point. Hit save.  To add our logo image I’m going to the widgets panel and then add the logo image using a text widget. So just grab a text widget and drag it over to the sidebar. I’m going to use a sandbox page to create the HTML for the text widget.

I’m going to Pages and then open up my sandbox page. I’ve already put this logo image in my Media Library so all I have to do is select Add Image and then look in the Library. This is the image I want to add so I hit show. I want this image to be the full size so I’ll select that. I want it to float to the left. I’ve already given it the title, “Go back to our homepage.”

Now we just need to make sure that the URL here links to the homepage. Right now, it links to the image itself. Delete that and add the url for which is the homepage of the site. This title up here will become the tool tip for our image and then we can add some alternate text here.

Using a text widget to insert the image allows me to add both the title and the alt text with the image. Alt text can be helpful for SEO and so that’s why I’ve chosen to do it this way. Now we select the insert it into post button. Okay, we’re back at the sandbox page and I’ve got all my HTML here that I need to display an image. I’m going to copy that, return to text widget and paste it and hit save.

Let’s return to the page using the Thesis Simple Header Widgets plugin and refresh it. And now, my image is right here. If I hover over the image it says, “Go back to our homepage.” If I come over to a different page and click on it, it takes me back to the homepage. So it’s a clickable banner with a title plus it’s got SEO alt text associated with it.

Add the Navigation Menu to the Header

Next we’re going to take the navigation menu and put it beside the logo. And we’ll add that in the right header area. Under Thesis defaults, we have a couple more choices. We’ll select “Place the Thesis Nav Menu in this Header Area?” and that will automatically remove it from above or below the header and will place in this section.

You can see that after we checked that box a new dialogue box shows up called Menu Settings. Inside of menu settings, you have the choice of where you want the menu to show up and we’re going to place it at the bottom of that header area. And we’ll leave the rest of these options blank for the moment and just hit save.

Let’s return to our page and hit refresh. Now we have the navigation menu placed down here below this widget area inside the header. At the moment we don’t want this right header area widget to display and the easiest way to make it go away is simply to drag a blank text widget there. We will add content to this text widget as we go along but for now we don’t want it to show.

Let’s return to Widgets and add a blank text widget there. Return to the page and refresh it. You can see nothing is showing. The nav menu is showing up seemingly at the top of the header but that’s only because there’s nothing above it any longer. So in order to move this downward, we’re going to use margin to bring this down to the right spot. We’ll do that in the next video  and we’ll also show how to add a background image to the Thesis header. That’s where we’re going to start using some of the tools that the plugin has in for arrange content in the header.

{ 0 comments… add one now }

Leave a Comment

Previous post:

Next post: