CODEWITHSUNDEEP
toggle
Muhammet Balcı
Muhammet Balcı

Reputation: 23

Bootstrap Horizontal Navbar Toggle

I prepared simple navbar menu with BS 4 documents. The toggle menu displays vertical when I clicked. Is it possible make horizontal with BS?

This is my navbar and codepen.io: vertical toggle

body {
  margin: 0 auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
  <a class="nav-brand" href="#">
    <img class="img-responsive" src="https://cdn2.iconfinder.com/data/icons/camping-outline-flat-pt-2/100/069_-_snowboard_snowboarding_board_1-128.png" width="55" height="55" alt="logo">
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNav">
    <span class="navbar-toggler-icon"</span>
  </button>
  <div class="collapse navbar-collapse" id="mainNav">
    <div class="navbar-nav ml-auto">
        <a class="nav-item nav-link active" href="#">ABOUT<span class="sr-only">(current)</span></a>
        <a class="nav-item nav-link " href="#">PORTFOLIO</a>
        <a class="nav-item nav-link " href="#">CONTACT</a>
    </div>
  </div>
</nav>

This is as I want but I couldn't figured out with source code: horizontal toggle

Upvotes: 1

Views: 4013

Answers (1)

sam
sam

Reputation: 2984

It's fairly simple to do that. Bootstrap has flex class options, so there's no need to create your own code.

Simply change:

<div class="navbar-nav ml-auto">

To:

<div class="navbar-nav flex-row ml-md-auto d-md-flex">

Also make sure to add p-2 to your nav-item that will give you some padding space between the elements.

That makes your code look like this:

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="nav-brand" href="#">
    <img class="img-responsive" src="https://cdn2.iconfinder.com/data/icons/camping-outline-flat-pt-2/100/069_-_snowboard_snowboarding_board_1-128.png" width="55" height="55" alt="logo">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNav">
    <span class="navbar-toggler-icon"</span>
</button>
<div class="collapse navbar-collapse" id="mainNav">
    <div class="navbar-nav flex-row ml-md-auto d-md-flex">
        <a class="nav-item nav-link p-2 active" href="#">ABOUT<span class="sr-only">(current)</span></a>
        <a class="nav-item nav-link p-2" href="#">PORTFOLIO</a>
        <a class="nav-item nav-link p-2" href="#">CONTACT</a>
    </div>
</div>
</nav>

Upvotes: 5

Related Questions