Bootstrap 4: Navbar with Logo and 2 Rows

Bootstrap 4: Navbar with logo and 2 rows

The Bootstrap 4 grid row>col-* aren't designed to be used inside the Navbar. Here is the supported content. Now that Bootstrap 4 uses flexbox, it's much easier to align Navbar content without using the grid row>col-*.

If you want a Navbar with logo and 2 rows, see this answer:
https://stackoverflow.com/questions/42635126/bootstrap-4-navbar-with-2-rows

<nav class="navbar navbar-expand navbar-dark fixed-top bg-dark">
    <div class="container">
        <h1 class="mb-0"><a href="#">Logo</a></h1>
        <div class="d-flex flex-column flex-wrap" id="navbarCollapse">
            <span class="navbar-text ml-auto py-0 px-lg-2">(00) 1234 5678</span>
            <ul class="navbar-nav mb-auto mt-0 ml-auto">
                <li class="nav-item active">
                    <a class="nav-link py-0" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link py-0" href="#">Product</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link py-0" href="#">Company</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link py-0" href="#">Blog</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

Examples:

Basic Navbar with 2 rows: https://codeply.com/go/ilJBKjJsEy

Responsive Navbar with 2 rows: https://codeply.com/go/DsfePuoZy0

The 2nd example collapses into a mobile stacked menu on small screens that can be toggled using the hamburger icon. Use the flexbox and spacing utility classes to position elements as desired. There are many ways to achieve what you want: https://www.codeply.com/go/pGE8fTf9dM

Bootstrap 4 navbar with 2 rows

You can use the flex-column flexbox utility class to stack the 2 navs vertically next to the icon. This sets flex-direction: column on the navbar-collapse div so that it's child elements stack vertically.

Sample Image

<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
    <div class="container">
        <button class="navbar-toggler navbar-toggler-right align-self-center mt-3" type="button" data-toggle="collapse" data-target="#navbarCollapse">
            <span class="navbar-toggler-icon"></span>
        </button>
        <h1 class="py-2 ml-lg-2 mx-3"><a href="#"><i class="fa fa-envelope-o fa-lg mt-2" aria-hidden="true"></i></a></h1>
        <div class="collapse navbar-collapse flex-column ml-lg-0 ml-3" id="navbarCollapse">
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Product</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Shop</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Events</a>
                </li>
            </ul>
            <ul class="navbar-nav flex-row mb-2">
                <li class="nav-item">
                    <a class="nav-link py-1 pr-3" href="#"><i class="fa fa-facebook"></i></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link py-1 pr-3" href="#"><i class="fa fa-instagram"></i></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link py-1 pr-3" href="#"><i class="fa fa-twitter"></i></a>
                </li>
            </ul>
        </div>
    </div>
</nav>

Demo - Bootstrap 4 navbar with 2 rows

Here's another variation with the 2 rows and right align search form:
Sample Image

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand my-auto" href="#">Brand</a>
    <div class="collapse navbar-collapse flex-md-column" id="navbarCollapse">
        <ul class="navbar-nav ml-auto small">
            <li class="nav-item active">
                <a class="nav-link" href="#">Shop</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Products</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Team</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">About</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Events</a>
            </li>
        </ul>
        <form class="form-inline ml-auto">
            ...
        </form>
    </div>
</nav>

Demo - Navbar with 2 rows on right

Update for Bootstrap 4.0.0:

https://www.codeply.com/go/05hEHoiUvv

Here is an alternate scenario with 2 navbars with one mobile toggler

Bootstrap 4.0 - Two NavBars that collapse into one toggle

How can I have Brand and Navbar on separate lines?

How move 'nav' element under 'navbar-brand' in my Navbar

How to place navbar below sticky navbar using bootstrap 4?

Bootstrap 4 Multiple fixed-top navbars

How can I do for two rows navbar in bootstrap4

To get your content in navbar in full-screen try with this: 

<nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top">
  <a class="navbar-brand nav-top" href="<?php echo home_url('/'); ?>">
      <img src="<?php echo render_custom_logo_url(); ?>" style="height: 40px;" class="d-inline-block align-top"><span class="pl-1 d-inline-block" style="font-size: 1.5em;">鴻協資訊耗材商城</span>
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
     <div class="collapse navbar-collapse" id="navbarText">
    <ul class="navbar-nav mr-auto">
       <li class="nav-item d-inline-block mr-2 ml-2">
        <a class="nav-link" href="tel:0961588602" role="button"><i class="fas fa-phone pr-1 contact-phone"></i><span class="pr-1"><u>聯絡電話：0961-588602</u></span></a>
      </li>
        <li class="nav-item d-inline-block mr-2 ml-2">
        <a class="nav-link" href="https://line.me/ti/p/iwN_aTYTiR"><i class="fab fa-line contact-line"></i>LINE帳號：pos0961588602</a>
      </li>
      <li class="nav-item d-inline-block mr-2 ml-2">
          <a class="nav-link" href="<?php echo esc_url( $woocommerce->cart->get_cart_url() ); ?>"><i class="fas fa-shopping-cart"></i><span class="badge badge-danger" style="vertical-align: super;"></span></a>
        </li>

    </ul>
      <span class="navbar-text">
         <form class="form-inline " style="right:0">
            <div class="search-block" style="display:inline-block;position:relative;">
      <div class="form-input-icon form-input-icon-right">
        <i class="fas fa-search"></i>
         <input name="s" type="search" class="form-control form-control-sm form-control-rounded" placeholder="輸入商品名稱" required >
       <button type="button" class="search-block-submit"></button>
    </div>
    </div>

  </form>
  </span>
  </div>

</nav>

I also change your search input, so that button search does not run away.
Here you have plunker with my solution, check also style.css

http://next.plnkr.co/edit/uQbiiFUtgt2H0ltX

Boostrap4 NavBar with 2 rows and centered logo collapsible

Note: I don't know what you mean by "the upper 3 links should collapse into the logo" so I just put them along with the other navbar items on small screens.

HTML

The navbar HTML should be straight forward. You can take a look at the Bootstrap documentation.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a href="#" class="navbar-brand">
    CompanyLogo
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".collapse">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse">
    <ul class="navbar-nav upper-controls">
      <li class="nav-item">
        <a class="nav-link" href="#">Country</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Language</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Sign up | Sign in</a>
      </li>
    </ul>
    <ul class="navbar-nav">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">
          Categories
        </a>
        <div class="dropdown-menu">
          <a class="dropdown-item">Cat 1</a>
          <a class="dropdown-item">Cat 2</a>
          <a class="dropdown-item">Cat 3</a>
          <a class="dropdown-item">Cat 4</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Live Auction</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Make Your Wish</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">How it works</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Purchase Bid Credits</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact us</a>
      </li>
    </ul>
  </div>
</nav>

On small screens

Again, I don't know what you meant by 3 links collapsing into the logo, so I just put them before the other navbar items.

The tricky part here is to center the logo. To do that, beside setting justify-content: center; on the navbar, I also need to change the button toggler to absolute positioning so that it won't take up any space to prevent the logo from staying in the center.

CSS

/* center the logo */
.navbar {
  justify-content: center;
}

/* in order to center the logo */
.navbar .navbar-toggler {
  position: absolute;
  right: 1rem;
  top: .5rem;
}

/* center all navbar items */
.navbar-nav {
  align-items: center;
}

Result

Sample Image

On larger screens (> 992px)

We can change navbar's flex-flow to column so that 2 rows would be displayed. Also we can change the upper 3 links (I assigned a custom css class "upper-controls" to it) to absolute positioning for the same reason we did on the button toggler above.

CSS

/* since it's expanding at lg */
@media(min-width: 992px) {
  /* in order to display in 2 rows */
  .navbar-expand-lg {
    flex-flow: column nowrap;
  }  

  /* same logic as the navbar-toggler above */
  .navbar-nav.upper-controls {
    position: absolute;
    right: 1rem;
    top: .5rem;
    font-size: 85%;
  }
}

Result

Sample Image

fiddle: https://jsfiddle.net/aq9Laaew/257205/

Is it possible to make 2 navbars with one logo and align both left and right on both bars?

First of all, you didn't specify how you want the navbar to look like in small screen so I am going to guess the placement of the search bar and the signup / login bar.

It looks like the signup / login bar will be always on top of the search bar. Hence the container that contains them could be a flexbox displayed as column.

And then the rest is easy. The collapsible navbar could be a flexbox displayed as column in small screens but as row with space-between justify content.

Layout

<nav>
    <a class="navbar-brand"></a>
    <button class="navbar-toggler"></button>
    <div class="collapse justify-content-md-between align-items-md-end">
        <ul class="navbar-nav">
            <a class="nav-link">Rentals</a>
            <a class="nav-link">FAQ</a>
            ...
        </ul>
        <div class="d-flex flex-column align-items-md-end">
            <ul class="navbar-nav small">
                <a class="nav-link">Sign Up</a>
                <a class="nav-link">Log In</a>
            </ul>
            <form>
                <div class="input-group">Search</div>
            </form>
        </div>
    </div>
</nav>
  • .justify-content-md-between forces the collapsible to display the main menu and the signup / login and search bar separately after md breakpoint.
  • .align-items-md-end forces the collapsible to display the items bottom aligned after md breakpoint.
  • .align-items-md-end on the signup /login and search bar container forces to display them as right justified after md breakpoint because the container is displayed as column.

Sample Image

demo: https://jsfiddle.net/davidliang2008/rxzyh6oe/16/

Search bar, login and then other menus for Mobile?

With the previous layout I mentioned, you can display the flex column on reverse order on the Signup / login and search bar container, as well as the collapsible for Mobile.

You can also change the layout to work that way first for Mobile, and then apply custom css classes to make them work the way you want for larger screens. I think this is called Progressive Advancement?

<nav>
    <a class="navbar-brand"></a>
    <button class="navbar-toggler"></button>
    <div class="collapse justify-content-md-between align-items-md-end flex-md-row-reverse">
        <div class="d-flex flex-column align-items-md-end flex-md-column-reverse">
            <form>
                <div class="input-group">Search</div>
            </form>
            <ul class="navbar-nav small">
                <a class="nav-link">Sign Up</a>
                <a class="nav-link">Log In</a>
            </ul>
        </div>
        <ul class="navbar-nav">
            <a class="nav-link">Rentals</a>
            <a class="nav-link">FAQ</a>
            ...
        </ul>
    </div>
</nav>
  • .flex-md-row-reverse on collapsible: reverse the sign in container and other menu items on larger screens
  • .flex-md-column-reverse on sign in container: reverse the sign up / login container and the search bar on larger screens

Sample Image

demo: https://jsfiddle.net/davidliang2008/rxzyh6oe/37/

Bootstrap 4 navbar with 2 rows and inline form

Just make sure both navbar-nav are full width. You can use w-100 for this...

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

<nav class="navbar fixed-top navbar-dark navbar-expand-sm">
  <a class="navbar-brand" href="#">
    <img src="//placehold.it/100x30" height=28 class="" />
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar">
        <span class="navbar-toggler-icon"></span>
      </button>
  <div class="collapse navbar-collapse flex-column" id="navbar">
    <ul class="navbar-nav nav my-1 w-100">
      <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#property-tab">PROPERTY</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#units-tab">UNITS</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#tenancies-tab">TENANCIES</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#pdfs-tab">PDFs</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#contacts-tab">CONTACTS</a>
      </li>
      <form class="form-inline ml-auto">
        <input class="form-control search" type="text" id="search-bar" placeholder="Search..." autocomplete="off" spellcheck="false" autocorrect="off" />
      </form>
    </ul>
    <ul class="navbar-nav nav my-1 w-100">
      <li class="nav-item">
        <a href="#" class="nav-link active">ALL</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">CURRENT</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">PAST</a>
      </li>
    </ul>
  </div>
</nav>

Then the ml-auto will work as expected to push the form right.

Related question:

Bootstrap 4 navbar with 2 rows

creating a Bootstrap 4 two row navbar custom design

I guess you can figure out the rest from here.
Basically, your first row of links, collapse buttons, logo, search box, user dropdown should all be directly under navbar. The navbar should be row and wrapped. From then on, it's mostly just rearranging the order. 

<div class="navbar navbar-light bg-light navbar-expand-md flex-row flex-wrap">
    <a class="navbar-brand flex-grow-1 justify-content-center order-sm-2 order-3 order-md-3" href="#" >Logo/Brand</a>
    <button class="navbar-toggler order-1 order-xs-1 order-md-4" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <button class="navbar-toggler order-3 order-xs-3 order-md-5" type="button" data-toggle="collapse" data-target="#search" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div id="navbar" class="navbar-collapse collapse flex-row w-100 order-5 order-sm-5 order-md-1">
    <ul class="navbar-nav justify-content-start flex-grow-1">
      <li class="nav-item"><a class="nav-link" href="#">LinkA</a></li>
      <li class="nav-item"><a class="nav-link" href="#">LinkB</a></li>
      <li class="nav-item"><a class="nav-link" href="#">LinkC</a></li>
      <li class="nav-item"><a class="nav-link" href="#">LinkD</a></li>
      <li class="nav-item"><a class="nav-link" href="#">LinkE</a></li>
    </ul>
    <ul class="navbar-nav justify-content-end flex-grow-1">
      <li class="nav-item"><a class="nav-link" href="#">Link1</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Link2</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Link3</a></li>
    </ul>

  </div><!--/.nav-collapse -->
  <div id="search" class="navbar-collapse collapse flex-row order-sm-4 order-4 order-md-2 ">
      <input type="text" />
      <button >Search</button>
    </div>

</div>

https://codepen.io/anon/pen/movbMy?editors=1000

Multi-Row Navbar with Bootstrap 4 with brand-image centered above nav

You could use 2 navbars with 1 toggler. Put the Brand, Address, Phone in the first navbar, and Links in the 2nd navbar. Then use the toggler from the first and target the 2nd navbar-nav that contains the links. Use the utility class to align items as needed.

<nav class="navbar navbar-expand-md navbar-light bg-light flex-row">
    <span class="navbar-text d-none d-md-block">Address</span>
    <a class="navbar-brand mx-md-auto mr-auto" href="/">
        Brand
    </a>
    <span class="navbar-text d-none d-md-block">Phone</span>
    <button class="navbar-toggler ml-lg-0" type="button" data-toggle="collapse" data-target="#navbarContent">
        <span class="navbar-toggler-icon"></span>
    </button>
</nav>
<nav class="navbar navbar-expand-md navbar-lightp-0">
    <div class="collapse navbar-collapse bg-light px-3" id="navbarContent">
        <ul class="navbar-nav mx-md-auto mx-0 w-50 align-items-start nav-fill">
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
</nav>

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


Related Topics

Font Awesome & Unicode

Why Certain Doctype Declarations Cause 100%-Height Tables and Divs to Stop Working

Fast and Responsive Interactive Charts/Graphs: Svg, Canvas, Other

How to Replace Radio Buttons with Images

Server-Sent Events Vs Polling

How to Load JavaScript Code Using <Link> Tag

How to Have Attributes on Closing Tags

Ordered List Showing All Zeros in Ie9

How to Use CSS Vars in CSS3 Selectors

Can HTML5 Websockets Connect 2 Clients (Browsers) Directly Without Using a Server? (P2P)

How to Remove The Space Between List Items

Angular4 - Scrolling to Anchor

How to Make Bootstrap 4 Columns All The Same Height

How to Write Content That Screen Readers Will Ignore

Load a Low-Res Background Image First, Then a High-Res One

HTML5 Drag and Copy

Href Without Http(S) Prefix

"Attribute Name Not Allowed on Element Div at This Point"


Leave a reply



Submit