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.
<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:
<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
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
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:
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://www.codeply.com/go/ilJBKjJsEy
Responsive Navbar with 2 rows: https://www.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
How to make 2 rows in nav bootstrap?
The navbar is display:flex, so you can do something like this...
https://www.codeply.com/p/1c5SioiLUY
<nav class="navbar navbar-expand navbar-light bg-light flex-column">
<div class="col-12 d-flex justify-content-between">
<a class="navbar-brand" href="#"><img src="//placehold.it/40"></a>
<ul class="navbar-nav">
<li class="nav-item mr-2">
<a class="nav-link text-truncate" href="#">1 999 020-1200</a>
</li>
<li class="nav-item">
<a class="nav-link text-truncate" href="#">foo@bar.com</a>
</li>
</ul>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse col-12" id="navbarNav">
<ul class="navbar-nav nav-justified w-100">
<li class="nav-item">
<a class="nav-link active" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#projects">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#pricing">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#team">Team</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
bootstrap 4 fixed navigation bar with 2 rows with centered brand image in the first row
Checkout this working example :)
If you view the example here in stackoverflow, do view it full page :)
$(window).scroll(()=>{ let distance = $('#header').offset().top; if(distance > 150){ $('#logo').addClass('header-image-scroll'); $('#nav-collection').addClass('navbar-scroll'); } else { $('#logo').removeClass('header-image-scroll'); $('#nav-collection').removeClass('navbar-scroll'); }})#header { height: 120px;}
#nav-collection { transition: margin 300ms ease-in-out; font-size: .80rem;}
#nav-collection li { padding: 5px; margin-right: 30px;}
#logo{ height: 80%; width: auto; transition: transform 300ms ease-in-out;}
.header-image-scroll{ transform: scale(0.7);}
.navbar-scroll { margin-top: -25px;}
.content { height: 100vh;}<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-md navbar-light sticky-top bg-white"> <div class="container-fluid p-0"> <button class="navbar-toggler my-2" type="button" data-toggle="collapse" data-target="#navbarCollapse"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse flex-column align-items-center text-center ml-lg-2 ml-0" id="navbarCollapse"> <ul class="navbar-nav flex-row mb-md-1 mt-md-0 mb-3 mt-2"> <li class="nav-item"> <div id="header" class="d-flex align-items-center justify-content-center"> <img src="https://logos-download.com/wp-content/uploads/2016/11/The_New_Yorker_logo.png" id="logo"> </div> </li> </ul> <ul class="navbar-nav justify-content-center w-100 border-top border-bottom font-weight-bold" id="nav-collection"> <li class="nav-item active"> <a class="nav-link" href="#">News</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Culture</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Books</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Business & Tech</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Humor</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Cartoons</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Magazine</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Video</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Podcasts</a> </li> </ul> </div> </div></nav><div class="content"></div>Bootstrap 4 navbar with two rows, bottom row collapsible
The example below is a pure Bootstrap 4 solution to this problem.
Breakdown:
- We are using two
.navbars, one below the other. Both having the same.navbar-expand-{breakpoint}classes,.navbar-expand-lgin this case. - Title is positioned to center with the
.ml-auto .mr-autoclasses. That leaves the toggler button intact at the right edge. - In order to eliminate the border when the bottom navbar is collapsed (caused by the paddings of the bottom navbar),
.py-0is introduced on the navbar itself, and.my-2is added to the.navbar-collapseto re-gain the spacing. - Finally, applying
.sticky-topto both navbars. So, when only the top navbar is visible, it will stay fixed to top, however when the bottom navbar is visible too, that will be fixed to the top instead of the top navbar.
#content { height: 200vh;}<nav id="topnavrow" class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top"> <a class="navbar-brand ml-auto mr-auto" href="#">_________TITLE_________</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navcollapse" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button></nav>
<nav class="navbar navbar-expand-lg navbar-light bg-light py-0 sticky-top"> <div id="navcollapse" class="collapse navbar-collapse my-2"> <div class="navbar-nav"> <a class="nav-item nav-link active" href="#">Item 1</a> <a class="nav-item nav-link" href="#">Item 2</a> <a class="nav-item nav-link" href="#">Item 3</a> <a class="nav-item nav-link" href="#">Item 4</a> </div> </div></nav>
<section id="content"> [page content]</section>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/><script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>Related Topics
Vuejs Vue-Router Linking an External Website
Bootstrap Take Full Width for Select Drop Down
How to Make Ng-Select Remove-And-Read-Only
Is There a CSS Parent Selector
How to Combine :Nth-Child() or :Nth-Of-Type() With an Arbitrary Selector
Why Can't an Element With a Z-Index Value Cover Its Child
Is There a CSS Selector for Elements Containing Certain Text
How to Change Angular Material Table Row Height
How to Wrap or Truncate Long Strings in a Material-Ui Expansionpanelsummary
How to Make a Floated Div 100% Height of Its Parent
Canvas Has White Space At the Bottom and Scrolls Too Far
Ipad Safari Scrolling Causes HTML Elements to Disappear and Reappear With a Delay
Bootstrap 4 Carousel Responsive (Image and Text)
Align an Image and Some Text on the Same Line Without Using Div Width
Stretch Child Div Height to Fill Parent That Has Dynamic Height