11

I would like to add a logo to the top navbar within the navbar-brand. I would like it to scale with the viewport size so I'm using img-responsive2 class.

It appear that both the image and the text in the navbar-brand are wrapping to the next line.

This page can be viewed at http://digitalponddesign.com/dev/

Thanks in advance for you help.

Here is my code:

Html

   <h2 class="navbar-brand brand-name">
       <a href="index.html"><img class="img-responsive2"       
       src="images/DigitalPondlogo.png">DigitalPond</a>
   </h2>

CSS

.navbar {
margin: 10px 0;

}
.navbar-default {
background-color: #fff;
border-color: #fff;
}
.brand-name {
font-family: 'Josefin Slab', serif;
font-size: 47px;
font-weight: bold;
color: #444;
text-decoration: none;
}

.nav-container {
padding-top: 8px;
}

.navbar-custom {
font-size: 20px;
background-color: #FFF;

}
1

7 Answers 7

15

I found a solution on another thread that works - use the pull-left class:

 <a href="#" class="pull-left"><img src="/path/to/image.png"></a> 

Thanks to Michael in this thread:

Bootstrap - How to add a logo to navbar class?

2
  • 1
    How is it possible to use both the image and logo using this approach? Can you gradually reduce the size of text when you resize to mobile browsers? Feb 9, 2015 at 2:13
  • pull-left and pull-right are not css classes from bootstrap, I believe they are added with font-awesome
    – AaA
    Apr 15, 2020 at 8:06
5

You can just display both the text and image as inline-blocks so that they dont stack. using floats like pull-left/pull-right can cause undesired issues so they should be used sparingly

<a class="navbar-brand" href="#">
  <img src="mylogo.png" style="display: inline-block;">
  <span style="display: inline-block;">My Company</span>
</a>
2

For those using bootstrap 4 beta you can add max-width on your navbar link to have control on the size of your logo with img-fluid class on the image element.

 <a class="navbar-brand" href="#" style="max-width: 30%;">
    <img src="images/logo.png" class="img-fluid">
 </a>
2

Enter the image and give height:100%;width:auto then just change the height of navbar itself to resize image. There is a really good example in codepen. https://codepen.io/bootstrapped/pen/KwYGwq

1
  • I'm not getting these examples to work with bootstrap5 though :) Sep 30, 2021 at 6:18
0

I would suggest you to use either an image or text. So, Remove the text and add it in your image(using Photoshop, maybe). Then, Use a width and height 100% for the image. it will do the trick. because the image can be resized based on the container. But, you have to manually resize the text. If you can provide the fiddle, I can help you achieve this.

6
0
<a class="navbar-brand" href="#" style="padding:0px;">
  <img src="mylogo.png" style="height:100%;">
</a>

For including a text:

<a class="navbar-brand" href="#" style="padding:0px;">
  <img src="mylogo.png" style="height:100%;display:inline-block;"><span>text</span>
</a>
1
  • 2
    It appears that your answer does not include any text. Also, please add an explanation to your answer.
    – Loren
    Apr 9, 2017 at 17:42
0

Use a image style width and height 100% . This will do the trick, because the image can be resized based on the container.

Example:

<a class="navbar-brand" href="#" style="padding: 4px;margin:auto"> <img src="images/logo.png" style="height:100%;width: auto;" title="mycompanylogo"></a>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.