Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Nick Roberts
5,465 PointsHow to insert a logo into the navbar of a Bootstrap Wordpress theme inline with the page titles?
I was trying my hand at another WordPress-Bootstrap project and I decided to try to replace the blog title text in the navbar with a logo image (which would also be a link to the home page).
The problem is that when I try to place an image in the "navbar-brand" section right there, it creates another line, pushes the page names down to the next line, and makes the whole navbar thicker.
I'm really trying to set the logo image navbar-brand in-line with the other page names--I'm trying to push them right, instead of down to the next line.
Does anyone have suggestions?
This is what my code looks like in header.php (the same one from the lecture "Bootstrap to Wordpress"):
...
<a class="navbar-brand" href="<?php bloginfo( 'url' ); ?>"><img class="img-responsive2" src="http://localhost:8888/KathieRobertsLaw/wp-content/uploads/2014/11/kbrlogo.png"></a>
...
And my css:
.img-responsive2 {
display: inline-block;
max-width: 20%;
height: auto;
}
8 Answers
Lee Shepherd
Full Stack JavaScript Techdegree Student 8,327 PointsWrap your anchor and image tags in a header or div tag with class "navbar-brand" It should look like this:
<h1 class="navbar-brand"> <a href="<?php bloginfo( 'url' ); ?>"><img class="img-responsive2" src="http://localhost:8888/KathieRobertsLaw/wp-content/uploads/2014/11/kbrlogo.png"></a> </h1>
for the css you will need to give the img a max-height instead of max-width.
Nick Roberts
5,465 PointsThanks! Did you mean to include some code here?
Lee Shepherd
Full Stack JavaScript Techdegree Student 8,327 Points<pre>
<h1 class="navbar-brand">
<a href="<?php bloginfo( 'url' ); ?>"><img class="img-responsive2" src="http://localhost:8888/KathieRobertsLaw/wp-content/uploads/2014/11/kbrlogo.png"></a>
</h1>
</pre>
John Lucey
9,592 PointsNick, I just used this code not long ago in a site using Bootstrap. You would adjust the percentage to get your image the correct size for your header space. This is much easier to help with if the site is live so we could see what you are seeing but if not I hope this helps.
<a class="navbar-brand" href="<?php bloginfo( 'url' ); ?>"><img src="http://localhost:8888/KathieRobertsLaw/wp-content/uploads/2014/11/kbrlogo.png"> </a>
.navbar-brand { margin-top: 15px; max-width: 30%; padding: 0; }
John Lucey
9,592 PointsYou also need to know to remove the img-responsive2 and to add the navbar-brand class back into the anchor tag.
Nick Roberts
5,465 PointsThank you! Problem solved.
Sarah Jee Watson
UX Design Techdegree Graduate 28,197 PointsI know this was a long time ago but I'm having similar issues.
Here's my code:
///
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<h1 class="navbar-brand">
<a href="<?php bloginfo( 'url' ); ?>"><img class="img-responsive logo" src="/images/studioblacklogo.png"></a>
</h1>
</div>
<div id="navbar" class="navbar-collapse collapse">
<?php
$args = array(
'menu' => 'header-menu',
'menu_class' => 'nav navbar-nav',
'container' => 'false'
);
wp_nav_menu( $args );
?>
</div><!--/.navbar-collapse -->
</div>
</nav>
///
The logo displays as a missing image! I think I must also make the nav bar bigger to accommodate it? Can anyone explain?
Lee Shepherd
Full Stack JavaScript Techdegree Student 8,327 PointsThe src needs to have the full location of the imge. http://yoursite/images/studioblacklogo.png
If you set a max height for your logo class you shouldn't have to resize the nav bar.
Sarah Jee Watson
UX Design Techdegree Graduate 28,197 PointsThank you Lee. That works a treat although it's not responsive. I have a class of .img-responsive.logo applied to it but the logo still doesn't resize with the browser. It appears to be fixed, but isn't.
I also have to add a height to the .navbar-header even if I set a max-height for my logo. I presume this wouldn't be necessary if the logo was being responsive?
Matthew Culloty
3,235 PointsI am trying accomplish this too! However, if I was to use this solution - then migrate my site to a different "live" site, the image would not show up because the file path would be pointing to the original location.
Is there a way we can point to the logo image dynamically using a built in wordpress function - similar to how we choose the featured image of a post when we want to use thumbnail images?
Lee Shepherd
Full Stack JavaScript Techdegree Student 8,327 PointsIf you keep your logo in a folder within your theme like images then you can use bloginfo('template_directory')
<img src="<?php bloginfo('template_directory');?>/images/logoimage.png">
'''
This way your logo is always in the same place if you move your site.
Matthew Culloty
3,235 PointsThank you Lee!
This worked great and I will be using this solution on other parts of the site as well.
I was also able to use the get_custom_logo function by following this tutorial:
http://www.mavengang.com/2016/06/02/change-wordpress-custom-logo-class/
This maybe more helpful if you are creating a theme, creating functionality to use the customize feature and select logos from your media library.
John Lucey
9,592 PointsJohn Lucey
9,592 PointsIs the site live so I could see a visual depiction of what you are referencing? Have you tried removing .img-responsive from the line of code? What is the effect?