CODEWITHSUNDEEP
htmlcsstwitter-bootstrapnavbar
Jamgreen
Jamgreen

Reputation: 11069

Create navbar and sub-navbar in Bootstrap 4

I am using Bootstrap v4 and I am creating a fixed-top navbar according to http://v4-alpha.getbootstrap.com/components/navbar/.

But what I want is to create another line in the navbar. So I actually want 2 navbars just next to each other.

I have tried doing it simply with

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    // first line
  </div>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    // second line
  </div>
</nav>

but it doesn't get a new line. It just tries to add it side-by-side.

One way would be to just create two navbars after each other, but I want the second line to be just like the first line.

Upvotes: 0

Views: 6930

Answers (1)

Obsidian Age
Obsidian Age

Reputation: 42384

You have three problems with the above code. First, you missed closing the first <div>, which is probably why the navbars are sitting next to each other. Second, you use duplicate IDs navbarSupportedContent. Third, you don't actually have any button to toggle your navbar, so they won't appear on mobile display at all.

To solve the issue of being able to toggle multiple navbars on mobile, what you need is to have navbar-collapse as a single parent div that contains the two navbar divs.

So, you're actually probably looking for something like this:

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon">Toggle Navigation</span>
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <div>
    // first line
    </div>
    <div>
    // second line
    </div>
  </div>
</nav>

I've created a BootPly showcasing this here.

EDIT:

By default, Bootstrap 4 uses flex for navbars, but doesn't actually add the required flex-flow by default. You can work around this by adding:

.navbar-collapse {
  flex-flow: row wrap;
}

Note that you will also need to add a flex-direction to your rows, and specify that they should occupy 100% of the width of the flex. I've given the DIVs the class flex-row for this (the default name in flex.scss):

.flex-row {
  flex-direction: row;
  width: 100%;
}

I've created a new BootPly covering this here.

Hope this helps! :)

Upvotes: 1

Related Questions