Logo in header

Hi, rzul. You could have still replied to the other post and I could have replied there. Marking it “resolved” just means I had provided an answer. You’re almost there as far as what you need to do.

There is this code in header.php that outputs the site title (“name”) wrapped in a link:

// Site title (Bootstrap "brand") in navbar. Shown by default. Customizer will
// let you hide it if you want.
$navbar .= '<a class="navbar-brand" href="'
		.esc_url( home_url( '/' ) )
		.'" rel="home">'
		.get_bloginfo( 'name' )
		.'</a>';

You want this code instead for the logo and link:

<a class="navbar-brand" rel="home" href="https://candtconstruction.com">
<img width="155" height="50" alt="CandTConstruction" src="https://candtconstruction.com/wp-content/themes/pratt/images/logo-50.gif"></a>

So the new code in header.php should look something like this. Note that the code for the link and rel=”home” is already handled. All you are doing is replacing out the name with an image:

// Site title (Bootstrap "brand") in navbar. Shown by default. Customizer will
// let you hide it if you want.
$navbar .= '<a class="navbar-brand" href="'
		.esc_url( home_url( '/' ) )
		.'" rel="home">'
		.'<img width="155" height="50" alt="CandTConstruction" src="https://candtconstruction.com/wp-content/themes/pratt/images/logo-50.gif">'
		.'</a>';

Hi Tim,

Your themes are great!

I’ve used this code to replace the text with my logo. However, I would like my logo to be moved up a couple of pixels. It currently starts at where the text for my navbar begins. As a result, the logo bleeds past the navbar on mobile and looks awkward on a desktop resolution. I want it aligned as perfectly as your Spot screenshot. I’ve tried adding this code style="vertical-align:middle"
to .'<img width=”…”>, but it doesn’t work. Can you help?

Thanks in advance!

In general, its really hard to align things in the center vertically with CSS. For example, here is a lengthy discussion about it: Stack Overflow

However, since I assume you have a hard-coded image size, can’t you just adjust the top and bottom padding? The navbar is 50px high. The .navbar-brand, which is where the original text and now your image is contained, has has 14px top and bottom padding because the font-size is 22px.

If your image is let’s say 32px high, then you could add this css:
.navbar-brand { padding-top: 9px; padding-bottom: 9px; }

The css that you mentioned isn’t working. I put it after .<img… correct?

I get this message:
Parse error: syntax error, unexpected ‘:’ in /home/wp-content/themes/flat-bootstrap/header.php on line 96

Hi, You would need to add that CSS to the style.css file or use the Jetpack Custom CSS module and add it there. If this is the only change you are making and you just want to “hard-code” that style right in the php file, you’d apply an inline style like this:

// Site title (Bootstrap "brand") in navbar. Shown by default. Customizer will
// let you hide it if you want.
$navbar .= '<a class="navbar-brand" href="'
		.esc_url( home_url( '/' ) )
		.'" rel="home" style="padding-top: 9px; padding-bottom: 9px;">'
		.'<img width="155" height="50" alt="CandTConstruction" src="https://candtconstruction.com/wp-content/themes/pratt/images/logo-50.gif">'
		.'</a>';

Thank you! This solved my issue. I’d spent a couple of hours working on it.

damn, it doesn’t work for me ??

I use the Spot theme and commented out the “red-spot-function” to replace it with your code. No there is the site title but the logo isn’t displayed. Do you have an idea how I can solve this?

Tim,

I have an open post about the class ‘navbar-brand’. My site is amberlynnbenton.com.

I’m using the Genesis Simple Hooks plugin to place the logo over the header as I have a custom header background image.

Am I correct in assuming that this div is not set to the width of the entire header? I want to center the logo horizontally on the header but it Is remaining on the left. Since I have set it to align ‘middle’ I’m assuming it is aligned in the div, but the div is just shorter than the header.

I unhooked the defualt header and placed this code inside the appropriate box in the plugin:

<div class="navbar-brand">
            <h1 class="logo">
               <a href="https://www.amberlynnbenton.com/">
<img src="https://www.amberlynnbenton.com/wp-content/uploads/2015/09/amberlynnheader.png" alt="Amber Lynn Benton" align="middle">
</a>
            </h1>
        </div>

Thoughts?

I think that the navbar-brand is a bootstrap class? Anyway it’s not listed in my css so I had to find an html fix. There is probably a better way, but to fix this issue I added a style with a margin-left value of 25%. Check it out: amberlynnbenton.com

<div class="navbar-brand">
            <h1 class="logo" style="margin-left:25%;">
               <a href="https://www.amberlynnbenton.com/">
<img src="https://www.amberlynnbenton.com/wp-content/uploads/2015/09/AmberLynnYellow.png" alt="Amber Lynn Benton" align="middle">
</a>
            </h1>
        </div>

@b1mb4m, I’d need a link to your site. You should enable Developer Mode in your Browser, so you can view the page source and see what HTML code is being output.

@amberlynnbenton, navbar-brand is definitely a Bootstrap class. You wouldn’t need it for your theme, but its fine to use it if you want since you’ll be styling it with inline CSS. I wouldn’t add a 25% margin, though, as your logo won’t be centered on smaller browser widths or mobile devices. Instead I’d use this technique to center the image. Note that you need to put this style on the <img> itself, not the container (navbar-brand).

style="display: block; margin: 0 auto;"