0

I have a navbar with a logo in the middle with links on both sides of it. How do I prevent the logo from pushing down (adding margin/padding)? Basically... The navbar background height shouldn't expand. I would like the logo to sit on top and overlap.

If I was to make the logo positioning absolute that would probably solve the issue but I would need this to only happen inside the container itself. Not sure how to do that. Currently I just use li tag with an img tag inside. This way there are no hacky work-arounds. I am using Bootstrap 4 as you have probably already seen.

Navbar with logo

    <nav class="navbar fixed-top navbar-expand-md justify-content-between">
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="navbar-collapse collapse justify-content-center" id="collapsingNavbar">
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Link <span class="sr-only">Home</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#" data-toggle="collapse">Link</a>
                </li>
                <li class="nav-item">
                    <img src="img/logo-placeholder.png" id="logo"></img>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href="#">Link <span class="sr-only">Home</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#" data-toggle="collapse">Link</a>
                </li>
            </ul>
        </div>
    </nav>
j08691
  • 204,283
  • 31
  • 260
  • 272

3 Answers3

0

you can give .navbar-nav align-items: center; then it will be in the middle

plus your img shouldn't have ending tag change it from 

<img src="img/logo-placeholder.png" id="logo"></img>

to 

<img src="img/logo-placeholder.png" id="logo">

UPDATED

As i understood from your image

just define 2 ul each right and left and the image in the middle

style the .navbar-nav give it the following styles

  width: 100%;
  background-color: #eee;

then you can play around with the ul position them with 

.right {
  justify-content: flex-start;
}

.left {
  justify-content: flex-end;
}

.navbar-nav {
  align-items: center;
  width: 100%;
  background-color: #eee;
}

.right {
  justify-content: flex-start;
}

.left {
  justify-content: flex-end;
}

here you can check it on fiddle

Adel Elkhodary
  • 1,622
  • 1
  • 9
  • 11
  • Okay. That worked but I don't want the background of the nav to expand. Hopefully I am making sense. –  May 25 '18 at 12:41
  • can you please be more specific can you show me a result of what you want to achieve maybe an image of what exactly you want. or any example show exactly what you need – Adel Elkhodary May 25 '18 at 12:45
  • See picture. The background (grey) should end roughly at the red line. the logo will sit on top and overlap down. https://imgur.com/ePyoMzB –  May 25 '18 at 13:00
  • @Haz is that what you want ? https://imgur.com/a/3WOLNW7 – Adel Elkhodary May 25 '18 at 13:16
  • Yes! Please. Thank you! :) –  May 25 '18 at 13:30
  • @Haz i have updated the answer up check it out – Adel Elkhodary May 25 '18 at 13:31
  • Thank you! That is perfect but one slight issue. When I increase the logo size. It will push the whole navbar down? How do I prevent this? I really appreciate your help and time. https://i.imgur.com/iGEvm2C.png –  May 25 '18 at 13:42
  • @Haz give `.navbar-collapse { align-items: flex-start; }` then it will be up and i have done another fiddle here for you https://jsfiddle.net/f5tn58bt/2/ – Adel Elkhodary May 25 '18 at 13:49
  • Perfect. Thank you! –  May 25 '18 at 13:50
  • @Haz you are welcome please accept my answer and vote up ;) – Adel Elkhodary May 25 '18 at 13:53
0

HI to your navbar you can give the style .navbar{text-align:center;}because if you use the text-align center it will also align you image in center.

Sumit Kumar
  • 493
  • 2
  • 5
  • 16
0
add this in css

#navbar-primary .navbar-nav { 
//  background: #ededed;
  width: 100%;
  text-align: center;
  > li {
    display: inline-block;
    float: none;
    > a {
      padding-left: 30px;
      padding-right: 30px;
    }
  }
}

HTML file
<header role="banner">
<nav id="navbar-primary" class="navbar" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-primary-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="collapse navbar-collapse" id="navbar-primary-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#"><img id="logo-navbar-middle" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/32877/logo-thing.png" width="200" alt="Logo Thing main logo"></a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
</header><!-- header role="banner" -->
Mandar Dhadve
  • 371
  • 2
  • 12