How can I make a navbar with a centered logo?

Question

Is there a way I can make a navbar something like this?

Navbar centered logo

I am using Bootstrap 4 for this.

Here is my current HTML code:

<ul class="d-flex">
<li><a href="#">Link 1</a></li>
<li><a href="#"><img src="logo.png"></a></li>
<li><a href="#">Link 3</a></li>
</ul>

I can already center the links and logo but I cannot seem to make the background make it look like an outline.

Progress

If you are using Bootstrap, I recommend you read their section on the Navbar component: https://getbootstrap.com/docs/4.0/components/navbar/ — freefall, Nov 04 '20 at 03:28
I can already center the logo and links but I cannot make the background show the shape of the logo at the bottom part — Kate Martin, Nov 04 '20 at 03:42
yes, and the background to only fill the space occupied by the logo off the bottom. https://i.stack.imgur.com/ChQL8.png — Kate Martin, Nov 04 '20 at 04:05

score 1 · Accepted Answer · answered Nov 04 '20 at 04:55

Bootstrap doesn't natively provide overflows like that. Some CSS will be needed to make it happen.

.logo {
  position: relative;
  width: 4.5em;
  height: 0;
}
.logo .wrapper {
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  border-radius: 100%;
}
.logo img {
  width: 100%;
  padding: 0.5em;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar bg-dark justify-content-center">
<ul class="nav">
<li class="nav-item"><a class="nav-link" href="#">Link 1</a></li>
<li class="nav-item"><a class="nav-link logo" href="#"><div class="wrapper bg-dark"><img src="https://freesvg.org/img/CircularFrameColour.png"></div></a></li>
<li class="nav-item"><a class="nav-link" href="#">Link 3</a></li>
</ul>
</nav>

Of course, you would need to provide additional tuning for responsiveness and accessibility.

score 0 · Answer 2 · answered Nov 04 '20 at 04:17

0

try this code

<ul class="d-flex justify-content-between w-100">
   <li><a href="#">Link 1</a></li>
   <li><a href="#" class="d-block text-center w-100"><img src="logo.png"></a></li>
   <li><a href="#">Link 3</a></li>
</ul>

answered Nov 04 '20 at 04:17

Qrolic Technologies

41
3

How can I make a navbar with a centered logo?

2 Answers2