Keep some items in Bootstrap navbar from collapsing-Twitter bootstrap

abalter
October 11, 2017
143 views
0 votes
2 Answers

I’m trying to create a Bootstrap navbar with the nav items on the left, and social/contact icons on the right. I would like the nav items to collapse, but the social/contact items to not collapse. They should be right there to click on for mobile users.

I’ve looked over some answers to similar questions, but unfortunately, Bootstrap v4 is not backward compatible, and the solutions no longer work.

My code seems pretty straightforward. If I put the social/contact items in their own div, outside of the collapse div, they lay out funny. However, if I put them into the collapse div, they line up just fine. But, they collapse, which I don’t want. I tried messing a bit with flex parameters, but that only seemed to make things worse.

In an ideal world, in mobile view, I’d have just the social/contact icons, and the hamburger menu button on the right.

#phone-number {
  padding: 0 1em;
  font-weight: bold;
}

.navbar-right {
  flex-direction: row;
}

@media (max-width: 767px) {
  #phone-number {
    display: none;
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Navbar</a> <button aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarTogglerDemo02" data-toggle="collapse" type="button"><span class="navbar-toggler-icon"></span></button>
  <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
    <div class="navbar-nav mr-auto mt-2 mt-lg-0">
      <a class="nav-item nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Link</a> <a class="nav-item nav-link" href="#">Disabled</a>
    </div>
  </div>
  <div class="nav navbar-nav navbar-right">
    <a class="nav-item nav-link" href="#"><i class="fa fa-envelope fa-lg"></i></a>
    <a class="nav-item nav-link" href="#"><i class="fa fa-phone fa-lg"></i><span id='phone-number'>509-123-4567</span></a>
    <a class="nav-item nav-link" href="#"><i class="fa fa-twitter color-twitter fa-lg"></i></a>
    <a class="nav-item nav-link" href="#"><i class="fa fa-facebook color-facebook fa-lg"></i></a>
    <a class="nav-item nav-link" href="#"><i class="fa fa-linkedin color-linkedin fa-lg"></i></a>
  </div>
</nav>

<br/><br/><br/>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Navbar</a> <button aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarTogglerDemo02" data-toggle="collapse" type="button"><span class="navbar-toggler-icon"></span></button>
  <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
    <div class="navbar-nav mr-auto mt-2 mt-lg-0">
      <a class="nav-item nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Link</a> <a class="nav-item nav-link" href="#">Disabled</a>
    </div>
    <div class="nav navbar-nav navbar-right">
      <a class="nav-item nav-link" href="#"><i class="fa fa-envelope fa-lg"></i></a>
      <a class="nav-item nav-link" href="#"><i class="fa fa-phone fa-lg"></i><span id='phone-number'>509-123-4567</span></a>
      <a class="nav-item nav-link" href="#"><i class="fa fa-twitter color-twitter fa-lg"></i></a>
      <a class="nav-item nav-link" href="#"><i class="fa fa-facebook color-facebook fa-lg"></i></a>
      <a class="nav-item nav-link" href="#"><i class="fa fa-linkedin color-linkedin fa-lg"></i></a>
    </div>
  </div>
</nav>

Answers

Here is my answer hopefully it helps you Thank’s

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1" name="viewport">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" type="text/css">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
  <style>
  .nav-colapse{float: left;flex-basis: 70% !important;}
    #phone-number {
      padding: 0 1em;
      font-weight: bold;
    }
    
    .navbar-right {
      flex-direction: row;
    }
    
    @media (max-width: 767px){
      #phone-number {
        display: none;
      }
	  .nav-colapse{flex-basis: 100% !important;}
    }
  </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">Navbar</a> <button aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarTogglerDemo02" data-toggle="collapse" type="button"><span class="navbar-toggler-icon"></span></button>
    <div class="collapse navbar-collapse nav-colapse" id="navbarTogglerDemo02">
      <div class="navbar-nav  mt-2 mt-lg-0">
        <a class="nav-item nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
        <a class="nav-item nav-link" href="#">Link</a> <a class="nav-item nav-link" href="#">Disabled</a>
      </div>
    </div>
    <div class="nav navbar-nav navbar-right nav-social">
      <a class="nav-item nav-link" href="#"><i class="fa fa-envelope fa-lg"></i></a> 
      <a class="nav-item nav-link" href="#"><i class="fa fa-phone fa-lg"></i><span id='phone-number'>509-123-4567</span></a>
      <a class="nav-item nav-link" href="#"><i class="fa fa-twitter color-twitter fa-lg"></i></a> 
      <a class="nav-item nav-link" href="#"><i class="fa fa-facebook color-facebook fa-lg"></i></a> 
      <a class="nav-item nav-link" href="#"><i class="fa fa-linkedin color-linkedin fa-lg"></i></a> 
    </div>
  </nav>

<br/><br/><br/>

 
  </nav>
</body>
</html>

i dont know why it showing error here but its working fine check fiddle

            example here[https://jsfiddle.net/radiantahmed/q2yysw7u/][1]

add nav navbar-nav navbar-right after the button and then #navbarTogglerDemo02

Working fiddle https://jsfiddle.net/j2pwtj5x/

  <style>
    #phone-number {
      padding: 0 1em;
      font-weight: bold;
    }
    
    .navbar-right {
      flex-direction: row;
    }
    
    @media (max-width: 767px){
      #phone-number {
        display: none;
      }
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>

    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">Navbar</a> <button aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarTogglerDemo02" data-toggle="collapse" type="button"><span class="navbar-toggler-icon"></span></button>
    <div class="nav navbar-nav navbar-right">
      <a class="nav-item nav-link" href="#"><i class="fa fa-envelope fa-lg"></i></a> 
      <a class="nav-item nav-link" href="#"><i class="fa fa-phone fa-lg"></i><span id='phone-number'>509-123-4567</span></a>
      <a class="nav-item nav-link" href="#"><i class="fa fa-twitter color-twitter fa-lg"></i></a> 
      <a class="nav-item nav-link" href="#"><i class="fa fa-facebook color-facebook fa-lg"></i></a> 
      <a class="nav-item nav-link" href="#"><i class="fa fa-linkedin color-linkedin fa-lg"></i></a> 
    </div>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
      <div class="navbar-nav mr-auto mt-2 mt-lg-0">
        <a class="nav-item nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
        <a class="nav-item nav-link" href="#">Link</a> <a class="nav-item nav-link" href="#">Disabled</a>
      </div>
    </div>
    
  </nav>

<br/><br/><br/>

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">Navbar</a> <button aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarTogglerDemo02" data-toggle="collapse" type="button"><span class="navbar-toggler-icon"></span></button>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
      <div class="navbar-nav mr-auto mt-2 mt-lg-0">
        <a class="nav-item nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
        <a class="nav-item nav-link" href="#">Link</a> <a class="nav-item nav-link" href="#">Disabled</a>
      </div>
      <div class="nav navbar-nav navbar-right">
        <a class="nav-item nav-link" href="#"><i class="fa fa-envelope fa-lg"></i></a> 
        <a class="nav-item nav-link" href="#"><i class="fa fa-phone fa-lg"></i><span id='phone-number'>509-123-4567</span></a>
        <a class="nav-item nav-link" href="#"><i class="fa fa-twitter color-twitter fa-lg"></i></a> 
        <a class="nav-item nav-link" href="#"><i class="fa fa-facebook color-facebook fa-lg"></i></a> 
        <a class="nav-item nav-link" href="#"><i class="fa fa-linkedin color-linkedin fa-lg"></i></a> 
      </div>
    </div>
  </nav>

Please signup or login to give your own answer.

Click here to cancel reply.