Collapsible bootstrap navbar with icons

Question

I am trying to create a collapsible navbar for small and medium screen devices.

I've seen this being implemented on bootstrap's documentation page:

On the bootstrap documentation page whenever the screen is resized it aligns everything perfectly.

However in my case here: https://jsfiddle.net/u3cdbg09/

I can't seem to get the hamburger icon to properly align with the menu icon on drop-down.

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-12 no-space">
      <nav class="navbar navbar-dark bg-dark justify-content-around">
        <div class="container">
          <a class="navbar-brand" href="#">LOGO</a>

          <form class="form-inline my-2 my-lg-0">
              <span class="fa fa-search search-span"></span>
               <input
              class="form-control mr-sm-2 search"
              type="search"
              placeholder="Search.."
              aria-label="Search"
            />
          </form>

          <div class="dropdown">

          <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" >
          <i
            class="fa fa-user-o fa-lg"
            aria-hidden="true"
            style="color: #fff;"
          ></i>
          </button>

          <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
              <a class="dropdown-item" href="#">My Account</a>
              <a class="dropdown-item" href="#">My Profile</a>
              <a class="dropdown-item" href="#">Logout</a>
            </div>

        </div>
      </div>
      </nav>
           </div>
                       </div>
                                   </div>

Any idea how can I make it collapsible on medium and smaller screens?

Thanks in advance!

Answer 1

Use navbar-collapse

 <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">LOGO</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent"></div>
</nav>

 body { background-color: #fff; font-family: "Poppins"; } .white { color: #fff !important; } .no-space { padding: 0; margin: 0; } .border { border: 4px solid red !important; } .card-margin { margin: 35px 0px; } .uname { font-size: 14px; font-weight: bold; margin-left: 5px; } .avatar-small { border-radius: 100%; border: 2px solid #ed4956; padding: 2px; } .like-indicator { height: 25px; } .like { font-size: 21px; vertical-align: middle; color: #212529; } .like-counter { font-size: 14px; font-weight: bold; margin-left: 3px; vertical-align: middle; } .desc { margin: 10px 0px; font-size: 14px; } .timeframe { text-transform: uppercase; font-size: 10px; color: #999; margin-left: 3px; margin-bottom: 3px; } a.view-more { text-transform: uppercase; font-size: 10px; margin-left: 4px; margin-bottom: 17px; color: #999; text-decoration: underline; } .card-body { background-color: #fff; } .profile { margin-top: 35px; margin-left: 92px; } .prof-container { width: 124px; height: 124px; margin: 26px auto 10px auto; display: block; } .img-prof { border-radius: 100%; border: 2px solid #dedede; padding: 2px; } .name { text-align: center; font-weight: bold; font-size: 17px; margin-bottom: 2px; } .uname-prof { font-size: 12px; color: #939393; text-align: center; font-weight: bold; } .prof-text { text-align: center; font-size: 13px; color: #5e5e5e; padding: 0px 10px; } a.load { text-transform: uppercase; font-size: 14px; color: #999 !important; text-align: center !important; margin: 0 auto 30px auto; display: block; } button#dropdownMenuButton, button#dropdownMenuButton:hover, button#dropdownMenuButton:active { background-color: #343a40 !important; border: none; outline: none; } footer { padding: 18px 0px 3px 0px; background: #343a40; } footer p { color: #dedede; text-align: center; font-size: 13px; } input.form-control.mr-sm-2.search { outline: none; border: none; font-size: 12px; border-radius: 2px; padding: 0px 10px 0px 30px; } .search-span { float: left; margin-right: -25px; margin-top: -2px; position: relative; z-index: 2; color: #000; font-size: 12px; } .dropdown-menu { font-size: 13px; } .bd-image { padding: 5px; background-color: #fff; border: 1px solid #dee2e6; border-radius: 2px; } .bpadding { margin: 40px 30px; } .profile-box { background: #f7f7f7; border: 1px solid #dee2e6; border-radius: 2px; margin: 20px; padding: 5px; } .desc { margin: 10px 0px; font-size: 15px; } .boundary { margin: 40px 0px; } .x-lmargin { margin-left: -7px; } .x-tmargin { margin-top: 10px; } a.dropdown-item:hover, a.dropdown-item:active { background-color: #ed4956; color: #fff; } .sign-box { background: #f7f7f7; border: 1px solid #dee2e6; border-radius: 2px; padding: 20px; margin: 24vh; } .fixvh { margin: 10vh; } .sign-logo { display: block; margin: 15px auto; } .sign-box h3 { font-size: 17px; text-align: center; margin: 15px 0px; } .sign-box p { font-size: 12px; margin: 10px auto !important; text-align: center !important; } .sign-box a { color: #c53541; font-weight: bold; } .sign-box input, .sign-box textarea { font-size: 13px; resize: none; } .sign-box input:focus, .form-control:focus { border-color: #ed4956; outline: #ed4956; -webkit-box-shadow: none; box-shadow: none; } .sign-box button { width: 100%; font-size: 15px; background: #ed4956; outline: none; border: none; font-weight: 500; } .sign-box button:hover, .sign-box button:hover { background: #c53541; } input.file-center { margin: 0 auto !important; display: block; } @media only screen and (max-width: 992px) { .profile { display: none; } .bpadding { margin: 0px; } .boundary { margin: 0px; } .bd-image { margin: 15px 0px; } .name, .uname-prof, .prof-text { text-align: center !important; } .profile-box { padding: 20px 10px 10px 0px; } } 

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="#">LOGO</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <nav class="navbar navbar-dark bg-dark w-100"> <div class="container-fluid"> <form class="form-inline m-auto"> <span class="fa fa-search search-span"></span> <input class="form-control mr-sm-2 search" type="search" placeholder="Search.." aria-label="Search" /> </form> <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" > <i class="fa fa-user-o fa-lg" aria-hidden="true" style="color: #fff;" ></i> </button> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton"> <a class="dropdown-item" href="#">My Account</a> <a class="dropdown-item" href="#">My Profile</a> <a class="dropdown-item" href="#">Logout</a> </div> </div> </div> </nav> </div> </nav>