Bootstrap 4 navbar-brand with image and text

HTML & CSS
1

I am looking for a way to have a navbar-brand with an image and text. This is where I’m after:

I was thinking of using the image and a div as inline-blocks like this:

<a class="navbar-brand" href="#">
	<img id="logo" class="d-inline-block mr-1" alt="Logo" src="images/logo-jetze-kunnen.png"> 
    <div class="d-inline-block mr-1">Jetze Kunnen<span>hoveniersbedrijf</span></div
</a>

But when I use that both the navbar-brand and the navbar are messed up as you can see in this image.

800×78 3.01 KB

What other approach should I take. Thank you in advance

2

Try this

 <a class="navbar-brand" href="#">
 <img id="logo" class="d-inline-block mr-1" alt="Logo" src="images/logo-jetze-kunnen.png"> 
    <span>Jetze Kunnen<br>hoveniersbedrijf</span></div
  </a>
3

That doesn’t change anything. I am using the span tag arround hoverniersbedrijf so I can set it as a block i.e.

.navbar-brand div span
{
	width: 100%;
	display: block;
	font-size: 50%;
	font-weight: 200;
	text-align: right;
}

I took the mr-1 class out of the div and that soloved the problem with the first nav-item . But the image and text are still not vertical aligned. And if I give a top margin to the div the img is pussed down as well

4

Hi,

You should really show a demo that we can work from for best answers otherwise I have to go through and build my own which I am loathe to do when I am busy :slight_smile:

Assuming you have default version of bootstrap4 then you can do it like this:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<style>
#logo {
	vertical-align:middle;
}
.navbar-brand span {
	font-size:2rem;
	line-height:1.2;
	font-weight: 200;
	display:inline-block;
	vertical-align:middle;
	padding:0 0 0 15px;
}
.navbar-brand b {
	display:block;
	font-size:50%;
	line-height:1;
}
.navbar-nav {
	margin-left:auto;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark"> 
  <!-- Brand --> 
  <a class="navbar-brand" href="#"> <img id="logo" alt="Logo" src="images/logo-jetze-kunnen.png" width="65" height="65"> <span>Jetze Kunnen<b>hoveniersbedrijf</b></span> </a> 
  
  <!-- Toggler/collapsibe Button -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button>
  
  <!-- Navbar links -->
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>
      <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>
      <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>
      <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>
    </ul>
  </div>
</nav>
</body>
</html>

The above is a working demo (unlike yours) which you can copy and paste and run straight away.:slight_smile:

1 Like
5

Hi Paul. Thank you very much that is working as a charm :smile:

1 Like
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.