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;
}
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With