Bootstrap 4 navbar - break / float right navbar

Question

Is there a way to achieve the following result with Bootstrap 4 (with centered menu items in second row):

This was made with Bootstrap 3 but I cant get it to work with Bootstrap 4 (the right navbar (Upgrade, govel, ...) does not float, instead a scroll bar is added when there is not enough space).

My Bootstrap 4 code: https://www.bootply.com/awN10dN1Ns

Any tips how to get the menu items float to a second row like on the screenshot above if there is not enough space for a one-line nav? How to center the menu items in the second row?

Link to Bootstrap 3 example is: https://www.lotsearch.de/

aflyzer · Answer 1 · 2018-10-15T15:32:02.897

0

you can change this:

@media (min-width: 768px) {
  .navbar-expand-md {
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
  }
}

by this:

@media (min-width: 768px) {
  .navbar-expand-md {
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
  }
}

this is what you expect?

Add this for ordering your nav:

@media (min-width: 768px) {
      .navbar-expand-md .navbar-nav{
        order:0
      }
    }

edited Oct 15 '18 at 15:32

answered Oct 15 '18 at 11:25

aflyzer

563
3
12

Thank you. Your code does partly work: The navbar gets 2-rowed if there is not enough space. But the right navbar is in second row instead being in first row (to the right of the brand logo) if the window is narrowed. Any way to get the right navbar into second row on narrow? – koseduhemak Oct 15 '18 at 14:18
yes add: "order:0" to ".navbar-expand-md .navbar-nav" (@media (min-width: 768px)) – aflyzer Oct 15 '18 at 15:05

Carol Skelly · Answer 2 · 2018-10-15T12:36:40.570

Wrap the 2 rows in separate d-flex divs, and use w-100 to make them fill the width of the navbar. The use flex-column in the navbar to make the 2 divs stack vertically.

<nav class="navbar navbar-expand-md navbar-light flex-column" id="header">
    <div class="w-100 d-flex">
        <a href="/" class="navbar-brand">
            <img src="/images/favicons/favicon_144x144.png" class="favicon-logo" alt="Logo">
        </a>
        <ul class="navbar-nav navbar-expand px-3 order-last">
            <li class="nav-item">
                <a class="nav-link text-nowrap nav-small-link" href="" title="Vorgemerkte Gebote auf Ihrer Bietliste">
                    <div class="icon-wrapper">
                        <i class="fa fa-gavel fa-fw"></i>
                        <span class="badge badge-orange" id="bidlist-counter">0</span>
                    </div>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link text-nowrap nav-small-link" href="" title="Merkzettel">
                    <div class="icon-wrapper">
                        <i class="fa fa-bookmark fa-fw"></i>
                        <span class="badge badge-orange" id="bookmark-counter">14</span>
                    </div>
                </a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link text-nowrap dropdown-toggle" href="#" id="navbarDropdownLanguage" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <span class="flag-icon flag-icon-de"></span>
                </a>
                <div class="dropdown-menu dropdown-langauge dropdown-menu-right" aria-labelledby="navbarDropdownLanguage">
                    <a class="dropdown-item text-nowrap" href="" hreflang="en">
                        <span class="flag-icon flag-icon-gb"></span> GB </a>
                </div>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle text-nowrap" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <i class="fa fa-user fa-fw"></i>
                </a>
                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="/user">
                        <i class="fa fa-user fa-fw"></i> Mein Account </a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="/bids/management/bidlist">
                        <i class="fa fa-user fa-fw"></i> Bietliste <span class="badge badge-orange" id="bidlist-counter">0</span>
                    </a>
                    <a class="dropdown-item" href="/bids/management/manual-bidlist">
                        <i class="fa fa-user fa-fw"></i> PDF-Gebote </a>

                    <a class="dropdown-item" href="/bids/management/placed-bidlist">
                        <i class="fa fa-user fa-fw"></i> Abgegebene Gebote </a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="/static/contact">
                        <i class="fa fa-envelope fa-fw"></i> Kontakt aufnehmen </a>
                    <a class="dropdown-item" href="/static/faq">
                        <i class="fa fa-graduation-cap fa-fw"></i> FAQ </a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="/user/logout">
                        <i class="fa fa-sign-out fa-fw"></i> Logout </a>
                </div>
            </li>
        </ul>

        <button class="navbar-toggler order-last" 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>
        <ul class="navbar-nav ml-auto">
            <li>
                <a class="nav-link text-nowrap orange" href="">
                    <i class="fa fa-arrow-circle-up"></i> Upgrade </a>
            </li>
        </ul>
    </div>
    <div class="navbar-collapse collapse w-100 justify-content-md-center justify-content-start" id="navbarSupportedContent">
        <ul class="navbar-nav">
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle text-nowrap" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <i class="fa fa-fw fa-search"></i> Suche <span class="caret"></span>
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="/">
                        <i class="fa fa-lightbulb-o fa-fw"></i> Suche (Aktuelle Auktionen) </a>
                    <a class="dropdown-item" href="/archive">
                        <i class="fa fa-archive fa-fw"></i> Suche (Archiv) </a>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link text-nowrap" href="/auction-catalogues">
                    <i class="fa fa-book fa-fw"></i> Kataloge </a>
            </li>
            <li class="nav-item">
                <a class="nav-link text-nowrap" href="/category"><i class="fa fa-list-alt fa-fw"></i> Kategorien                    </a>
            </li>
            <li class="nav-item">
                <a class="nav-link text-nowrap" href="/alert"><i class="fa fa-bell fa-fw"></i> Suchaufträge                    </a>
            </li>
            <li class="nav-item">
                <a class="nav-link text-nowrap" href="/artist"><i class="fa fa-bar-chart fa-fw"></i> Künstler / Analysen                    </a>
            </li>
            <li class="nav-item">
                <a class="nav-link text-nowrap" href="/blog"><i class="fa fa-newspaper-o fa-fw"></i> Blog                    </a>
            </li>
        </ul>
    </div>
</nav>

https://www.codeply.com/go/TyYjq0u7B0

Note: The hidden-* classes don't exist in Bootstrap 4.

Also see: How can I have Brand and Navbar on separate lines?

@mfuesslin I updated the navbar structure to improve responsive behavior — Carol Skelly, Oct 15 '18 at 12:37
Thank you. I tried your code and it looks very good! Is there a way to let the navbar fit to one row if there is enough space? So the navbar would only get two-rowed when there is not enough space... I try to avoid custom break-points as the navbar contents can differ slightly (if user is loggedin vs. not logged in) — koseduhemak, Oct 15 '18 at 14:12

stalinrajindian · Answer 3 · 2018-10-15T11:57:41.850

0

Please try below css.

    #navbarSupportedContent {
        text-align: center;
        display: block !important;
    }

    #navbarSupportedContent ul.navbar-nav {
      display: block !important;
    }

    #navbarSupportedContent ul.navbar-nav li {
        display: inline-block;
    }

edited Oct 15 '18 at 11:57

answered Oct 15 '18 at 11:51

stalinrajindian

1,363
1
14
22

Thank you. Your code does work partly well. Is there a way to get the main navbar ("Suche", "Kataloge", ...) wrap completely instead of item by item? So if there is not enough space the **whole** stuff gets in the second row? – koseduhemak Oct 15 '18 at 14:25
can you please share your link? or send jsfiddil or codeply link. – stalinrajindian Oct 15 '18 at 14:34

Bootstrap 4 navbar - break / float right navbar

3 Answers3