Including my logo in the Header

[Doug Kaufman]

http://torahdude5.com/wp-content/uploads/2014/04/smallerlogo.jpg

I would like to include my logo in the navigation header on each of my pages.

[Bill Robbins]

Interesting idea Doug. I think this is how we would go about that:

1. Go to the Appearance section in your WordPress control panel and select Edit.
2. From the list of files on your right, choose header.php
3. Replace everything in the file with this:
   
   Be sure to copy the code directly from the forum instead of the notification email.

4. Save your changes.

That should move the logo for you beside the navigation bar. We may have to make some styling tweaks. Take a look at it once the code is moved and let me know how it turns out. Once that’s done, the styling should be easy to tackle.

Thanks,
Bill

[Doug Kaufman]

Including “Torahdude5” in the Navigation Header is not what I am hoping for.
Perhaps I am using incorrect terminology.
I would like to display my “logo” (which is the image with T D 5) to the far left of the Navigation Header.

If memory serves any “Search button” I wish to include in the future will appear to the far right of the same area. Is this correct?

On my original post I attempted to include the jpg of my logo but was unsuccessful.

I can certainly send it for the “fix” if needed. Just tell me how to accomplish this.
Thanks.

http://torahdude5.com/

[Doug Kaufman]

Updating:
I switched Text or Graphic Logo to “Image” with disastrous results.
I switched it back to “Text” and await your reply.

Thanks.

[Bill Robbins]

I believe I understand what you’re going for. Let’s go back to the original header that was in the theme. Edit the header.php file again. Replace everything there with this:

and save your changes. Now here’s how to add in your graphic to the header:

1. In the media section of your WordPress control panel, select add new and upload the image you’d like to use.
2. When the upload is complete, click the edit link. From the screen that opens up, look on the right and you’ll see the file URL. Copy that, we’ll need it just a minute.
3. Next go to the Theme Options page and select the Styling tab.
4. Scroll down to the Custom CSS box and paste this:

   
   #header-content {
   	background: url(https://yoursite.com/image.png) no-repeat left center;
   }
   
   ul#top-menu li:first-child {
   	margin-left: 50px;
   }
   

5. Replace the http://yoursite.com/image.png with the URL to the image you uploaded earlier.
6. Update your settings.

Check the front end of your site. You may need to move the navigation over a bit more in order to have room for the graphic. You can do that by adjusting the margin-left: 50px in the snippet above.

If you have any trouble, let me know.

Thanks,
Bill

[Doug Kaufman]

Other than removing “Torahdude5” from the Navigation Header that did not seem to change anything.
I adjusted the margin, per your instructions, from 50 to 40 and then from 40 to 60 with no change.

I have returned the margin back to 50 and await your instructions.

Thanks.

http://torahdude5.com/

[Bill Robbins]

We’re getting closer. It looks like the parentheses didn’t quite make it through. In your custom CSS make sure it looks like this:

#header-content {
background: url(http://torahdude5.com/wp-content/uploads/2014/05/smallerlogo.jpg) no-repeat left center;
}

ul#top-menu li:first-child {
margin-left: 50px;
}

Also since there’s only a small amount of space there, make sure to use a small image, probably no more than 80 pixels tall by at most 120 pixels wide.

Let me know how that turns out.

[Doug Kaufman]

OK — I went into the Media menu and selected “Edit Image” for this small logo.
Using the software provided I scaled the image down to 80 X 73.
I tried to use your dimensions but the software scaled the image automatically.
After saving this change I copied and pasted the “new” URL into the Custom CSS per your previous instructions.
Then I adjusted the left-margin also per your previous instructions.
The size of the logo is good.
So you can see what I am talking about I left the left-margin set at 75 px.

What I am hoping for is that the logo will appear on the far left of the page in the Navigation Header.
For lack of a better phrase, “Standing out apart from the menu items.”
You can see that at the current setting the word “Funerals” has moved to a second “line”.

I do not foresee this particular website having too many more pages so a second line of menu items will not be needed.

http://torahdude5.com/

Thanks so much.

[Bill Robbins]

We’re getting there it looks like. It’s possible to reduce the spacing there so it all lines up on one row. Try adding to this to your Custom CSS too:

#header-content .cbp-hrmenu li a {
	padding-left: 20px;
	padding-right: 20px;
}

You may also want to increase the left margin a little bit so it has some more space. If that bumps the menu onto another row, you can reduce the left and right padding in this last snippet so it lines up again.

Let me know if that doesn’t do the trick.

[Doug Kaufman]

That did the trick.
Addressing final details:
How can I remove that thin line of color under the logo? It makes it look like the image is misplaced / off center / etc.
And —
Is there any way to get the logo all the way to the left of the Navigation Header?

http://torahdude5.com/

Thanks so much.

[Bill Robbins]

You can move the icon all the way to the edge. Let’s change our code from earlier to this:

#header {
     background: url(https://torahdude5.com/wp-content/uploads/2014/05/smallerlogo.jpg) no-repeat left center;
}

Try making the image just a hair larger and see if that won’t take out the thin line there for you.

[Doug Kaufman]

That removed the image.

I just undid all our progress.

[Bill Robbins]

Hey Doug,

It looks like the closing bracket of the style above that one got accidentally deleted. Find this spot:

			h1.title {
        text-align: center;
#header {
     background: url(https://torahdude5.com/wp-content/uploads/2014/05/smallerlogo-e1399482816639.jpg) no-repeat left center;
}

and add a bracket before the #header so it looks like this:

h1.title {
        text-align: center;
}

#header {
     background: url(https://torahdude5.com/wp-content/uploads/2014/05/smallerlogo-e1399482816639.jpg) no-repeat left center;
}

and save your changes.

[Doug Kaufman]

I am going to start calling you “Doctor”.
All that worked.

I do have a question:
I made your most recent changes on my Mac, as opposed to the PC I have done all the previous work on, and noticed some differences.
Is there a difference between Safari / Firefox and Google Chrome?

I have to say that one of the differences is that the Navigation Header is transparent. That really looks cool.

Anyway, I await your response.

Thanks.

[Bill Robbins]

They should look pretty much the same. The major difference is that Firefox tends to render fonts a bit heavier than Chrome or Safari and sometimes a touch larger.

Which browser and version are you seeing the header bar transparent on?

[Doug Kaufman]

Interestingly enough, after this most recent change, all of them.

http://torahdude5.com/

When you look at the very top all the information that was included in the thin black line is also gone.

I have to admit that it looks much “cleaner” with that strip gone.
I have started to upload content on the “Wedding” page and I am very pleased.

I am still trying to wrap my head around the function of a “Slider”.
However, I have not read through the instructions for using one so I am sure it will work itself out.

Any advice for making the rest of my content more appealing would be wonderful.
Unless there is something that I need to address I believe you have helped me “fix” my issue.
Subsequently, this particular string may be at an end.
You have been a big help and I hope that what is included here helps others.

Thank you again.

[Bill Robbins]

The missing color is on me. We should have specified one while adding the background image. If you want to bring it back, you’d change this one more time:

#header {
     background: url(https://torahdude5.com/wp-content/uploads/2014/05/smallerlogo-e1399482816639.jpg) no-repeat left center;
}

to this:

#header {
     background: #dd3333 url(https://torahdude5.com/wp-content/uploads/2014/05/smallerlogo-e1399482816639.jpg) no-repeat left center;
}

which will add the color back in for you.

---

There’s a quick video at http://vimeo.com/72418138 that can walk you through how the slider works. You’ll need to use the home page template with it in order to have it displayed.

If you have any questions, let me know.

Thanks,
Bill

[Author]

Posts