I have a code: Codepen.io.
<div class="container-fluid h-100">
<div class="row wrapper h-100">
<aside class="col-12 col-sm-3 p-0 bg-dark">
<nav class="navbar navbar-expand-sm navbar-dark bg-dark align-items-start flex-sm-column flex-row">
<a class="navbar-brand" href="#"><i class="fa fa-bullseye fa-fw"></i> Brand</a>
<a href class="navbar-toggler" data-toggle="collapse" data-target=".sidebar">
<span class="navbar-toggler-icon"></span>
</a>
<div class="collapse navbar-collapse sidebar">
<ul class="flex-column navbar-nav w-100 justify-content-between">
<li class="nav-item">
<a class="nav-link pl-0" href="#"><i class="fa fa-heart-o fa-fw"></i> <span class="">Link</span></a>
</li>
<li class="nav-item">
<a class="nav-link pl-0 dropdown-toggle text-nowrap" href="#m1" data-parent="#navbar1" data-toggle="collapse" data-target="#m1" aria-expanded="false">
<i class="fa fa-address-card-o fa-fw"></i> <span class=""> Link</span>
</a>
<div class="collapse" id="m1">
<ul class="flex-column nav">
<a class="nav-link px-0 text-truncate" href="#">Sub</a>
<a class="nav-link px-0 text-truncate" href="#">Sub longer</a>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link pl-0" href="#"><i class="fa fa-book fa-fw"></i> <span class="">Link</span></a>
</li>
<li class="nav-item">
<a class="nav-link pl-0" href="#"><i class="fa fa-heart fa-fw"></i> <span class="">Link</span></a>
</li>
</ul>
</div>
</nav>
</aside>
<main class="col bg-faded py-3">
</main></div></div>
But I need to set fixed width left sidebar for all resolutions, except in mobile view I need to see like now (top menu with hamburger).
What I need to do?
Use a media query for Bootstrap's sm breakpoint and set min/max width in the "sidebar"...
#media (min-width: 768px) {
aside.col-sm-3 {
min-width: 200px;
max-width: 200px;
}
}
https://www.codeply.com/go/LsMGLozRq0
Also see: Bootstrap 4: responsive sidebar menu to top navbar
Related
I'm trying to extend my navbar data-toggle dropdown to the full width of the screen. For some reason, it still leaves white space on the left side when I set the viewport width to 100. I'm using bootstrap and setting a media query in my CSS which I'll show below.
<nav class="navbar navbar-expand-sm navbar-dark fixed-top bg-primary">
<div class="container">
<a class="navbar-brand text-white">Vince Clicks</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggler"
aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse bg-primary" id="navbarToggler">
<ul class="navbar-nav text-center mx-auto mb-2 mb-sm-0">
<li class="nav-item">
<a class="nav-link active" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#skills">Skills</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
<div class="d-none d-sm-flex">
<a class="btn btn-social-icon btn-linkedin" href="#"><i
class="fab fa-2x fa-github-square"></i></a>
<a class="btn btn-social-icon btn-linkedin" href="http://www.linkedin.com/in/"><i
class="fab fa-2x fa-linkedin"></i></a>
</div>
</div>
</div>
</nav>
#media (max-width: 576px){
.navbar-nav{
margin-top: 11px;
max-height: 158px;
width: 100vw
}
.nav-link{
border-top: 1px solid black;
}
}
The .container has left and right padding (x-axis), remove it by adding .px-0 and your example works. There is no need to set the width in your media query.
In the following snippet, in order to compensate for the lost padding
I have added margins to .navbar-brand and .navbar-toggler
with .ms-3 and .me-3, respectively:
#media (max-width: 576px) {
.navbar-nav {
margin-top: 11px;
max-height: 158px;
}
.nav-link {
border-top: 1px solid black;
}
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<nav class="navbar navbar-expand-sm navbar-dark fixed-top bg-primary">
<div class="container px-0">
<a class="navbar-brand text-white ms-3">Vince Clicks</a>
<button class="navbar-toggler me-3" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse bg-primary" id="navbarToggler">
<ul class="navbar-nav text-center mx-auto mb-2 mb-sm-0">
<li class="nav-item">
<a class="nav-link active" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#skills">Skills</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
<div class="d-none d-sm-flex">
<a class="btn btn-social-icon btn-linkedin" href="#"><i class="fab fa-2x fa-github-square"></i></a>
<a class="btn btn-social-icon btn-linkedin" href="http://www.linkedin.com/in/"><i class="fab fa-2x fa-linkedin"></i></a>
</div>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
This is my code of the navbar
<nav class="navbar navbar-dark navbar-expand-sm fixed-top navbar-custom" id="header-nav">
<div class="container">
<div class="row">
<div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="col-4 col-sm-2">
<a class="navbar-brand mr-auto" href="./index.html"><h2 class="tagline">Subh</h2></a>
</div>
<div class="collapse navbar-collapse col-sm-6" id="navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item"><a class="nav-link" href="./index.html"><span class="fa fa-home fa-lg"></span> Home</a>
</li>
<li class="nav-item"><a class="nav-link" href="#"><span class="fa fa-list fa-lg"></span>Menu</a>
</li>
<li class="nav-item"><a class="nav-link" href="#"><span class="fa fa-user fa-lg"></span> Login</a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="fa fa-cart-plus fa-lg"></i> Cart</a></li>
</ul>
</div>
<div class="col-5 col-sm-4 ml-auto">
<ul class="navbar-nav">
<li class="input-group margin-bottom-sm">
<span class="input-group-addon"><i class="fa fa-search fa-lg"></i></span>
<input class="form-control" type="text" placeholder="Search">
</li>
</ul>
</div>
</div>
</nav>
As you can see in the picture I have marked the vacant space and you see my search bar in center I want to push it to the right but if I increase col-sm-4 to col-sm-5 or put an offset search bar goes to next line which I do not want.
What can be done for this? You see other columns marked by white border.
From here,
class="navbar-brand mr-auto"
Change Mr-auto to ml-auto
It can be placed in the extreme right position, if you specify the float propertty of css...
.col-5 col-sm-4 ml-auto {
float: right;
}
or you can specify its right margin to be zero as given below-
.col-5 col-sm-4 ml-auto {
margin-right: 0px;
}
it will solve the problem I guess...
Greetings,
Om Chaudhary
This is a question similar to this one, but it is for Bootstrap 4.
I am not able to add right-justified entries on the BS4 navbar that stay visible both when collapsed and not collapsed. I spent one full afternoon without success.
This is my goal:
Here my current code (that works only when not collapsed):
<nav class="navbar navbar-light navbar-expand-xl border-bottom mainmenu sticky-top">
<a class="navbar-brand text-capitalize text-blur" href="/">
<img class="mr-1" src="/images/logo/favicon-32x32.png" alt="Logo">
<span class="">Portami in Pista</span>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myTopMenu"
aria-controls="collapsableTopMen" aria-expanded="false" aria-label="[Menu]">
<span class="sr-only">[Menu]</span>
<span class="navbar-toggler-icon" title="[Menu]"/>
</button>
<div class="collapse navbar-collapse" id="collapsableTopMen">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="/Schools/">
<i class="fa fa-motorcycle fa-rotate-315 text-danger" aria-hidden="true"/>
<span class="text-blur-danger">PiP Reparto Corse</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/Tracks/">
<i class="fa fa-flag-checkered text-primary" aria-hidden="true"/>
<span>Piste</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/Blog/le-guide-del-giovedi/">
<i class="fa fa-mortar-board text-primary" aria-hidden="true"/>
<span>Le guide del giovedì</span>
</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<!- START of section should be always visible -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownLang" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="famfamfam-flags it" title="Italiano"/>
<span class="d-inline d-xl-none">Italiano</span>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownLang">
<a class="dropdown-item" href="/AbpLocalization/ChangeCulture?cultureName=en&returnUrl=/">
<i class="famfamfam-flags gb" aria-hidden="true"/>
<span class="">English</span>
</a>
</div>
</li>
<!- END of section should be always visible -->
<li class="nav-item">
<a class="nav-link" href="/Account/Login"><i class="fa fa-sign-in"/> Log in</a>
</li>
</ul>
</div>
</nav>
Since you're using Bootstrap 4, this answer is more relevant to your question:
https://stackoverflow.com/a/41513784/171456 (see the last part)
The part that you always want to keep visible needs to be separate from any of the collapsible parts. Then use the order-* classes to position the items as desired:
Demo: https://codeply.com/p/ylDhhZtpiH
<nav class="navbar navbar-light navbar-expand-xl border-bottom mainmenu sticky-top justify-content-start">
<a class="navbar-brand text-capitalize text-blur" href="/">
<img class="mr-1" src="//placehold.it/32" alt="Logo">
<span class="">Portami in Pista</span>
</a>
<button class="navbar-toggler order-2 ml-1" type="button" data-toggle="collapse" data-target=".collapsable" aria-controls="collapsableTopMen" aria-expanded="false" aria-label="[Menu]">
<span class="sr-only">[Menu]</span>
<span class="navbar-toggler-icon" title="[Menu]"></span>
</button>
<!-- 1st collapse menu -->
<div class="collapse navbar-collapse collapsable flex-grow-0 flex-xl-grow-1 order-last" id="collapsableTopMen">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="/Schools/">
<i class="fa fa-motorcycle fa-rotate-315 text-danger" aria-hidden="true"></i>
<span class="text-blur-danger">PiP Reparto Corse</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/Tracks/">
<i class="fa fa-flag-checkered text-primary" aria-hidden="true"></i>
<span>Piste</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/Blog/le-guide-del-giovedi/">
<i class="fa fa-mortar-board text-primary" aria-hidden="true"></i>
<span>Le guide del giovedì</span>
</a>
</li>
</ul>
</div>
<!-- always visible portion -->
<ul class="navbar-nav order-1 order-xl-last ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownLang" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-flag it" title="Italiano"></i>
<span class="d-inline d-xl-none">Italiano</span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownLang">
<a class="dropdown-item" href="#">
<i class="fas fa-flag-usa gb" aria-hidden="true"></i>
<span class="">English</span>
</a>
</div>
</li>
</ul>
<!-- 2nd collapse menu -->
<div class="collapse navbar-collapse collapsable flex-grow-0 order-last">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/Account/Login"><i class="fa fa-sign-in"></i> Log in</a>
</li>
</ul>
</div>
</nav>
https://codeply.com/p/ylDhhZtpiH
I did a small important fix to the good answer from Zim.
I fixed the "always visible" portion of the menu as he did not overlap the whole menu when it was collapsed.
Adding a custom .navbar-always-overlapped class, fixed it.
<nav class="navbar navbar-light navbar-expand-lg border-bottom mainmenu sticky-top justify-content-start">
<!-- same code from Zim here>
...
<!-- always visible portion. Note the 'navbar-always-overlapped' -->
<ul class="navbar-nav navbar-always-overlapped order-1 order-lg-last ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownLang" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-flag it" title="Italiano"></i>
<span class="d-inline d-lg-none">Italiano</span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownLang">
<a class="dropdown-item" href="#">
<i class="fas fa-flag-usa gb" aria-hidden="true"></i>
<span class="">English</span>
</a>
</div>
</li>
</ul>
<!-- 2nd collapse menu -->
<div class="collapse navbar-collapse collapsable flex-grow-0 order-last">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/Account/Login"><i class="fa fa-sign-in"></i> Log in</a>
</li>
</ul>
</div>
</nav>
and the code for .navbar-always-overlapped:
.navbar-always-overlapped .dropdown-menu {
position: absolute !important;
}
See https://codeply.com/p/9deLYTGblZ
i am creating a navbar in bootstrap and the issue is that when i resize my browser it shows navigation toggle button and if the page is inspected in chrome or opera navigation toggle button is not shown and full menu is displayed.
i uploaded the site on a domain and looked it from a phone but there was no toggle button and simply complete nav menu.
my issue's screenshots link is http://zian.tk/pictures/Capture01.jpg
HTML for the code is:
<nav class="nav navbar navbar-expand-md bg-dark navbar-dark">
<div class="row w-100">
<div class="col-lg-2">
<h1`enter code here` class="text-white text-center">
LOGO
</h1>
</div>
<button class="navbar-toggler w-100" 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>
<div class="col-lg-8">
<div class="collapse navbar-collapse text-center mx-auto justify-content-center" id="navbarSupportedContent">
<ul class="navbar-nav text-centre mt-2" >
<li class="nav-item dropdown pr-4">
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
home
</li>
<li class="nav-item pr-4">
about
</li>
<li class="nav-item pr-4">
blog
</li>
<li class="nav-item pr-4">
Insights
</li>
<li class="nav-item pr-4">
contact
</li>
<li class="nav-item">
Services
</li>
</ul>
</div>
</div>
<div class="col-lg-2 col-md-12 pt-3 float-right justify-content-end ">
<div class="text-center">
<i class="fab fa-twitter"></i>
<i class="fab fa-facebook pr-2 mb-0"></i>
<i class="fab fa-instagram pr-2 mb-0"></i>
<i class="fab fa-behance pr-2 mb-0"></i>
<i class="fab fa-google pr-2 mb-0"></i>
<i class="fab fa-pinterest"></i>
</div>
</div>
</div>
</nav>
This question already has answers here:
Bootstrap NavBar with left, center or right aligned items
(14 answers)
Center an element in Bootstrap Navbar
(10 answers)
Closed 4 years ago.
I need to achieve the brand logo in left, menu items to be center and couple of buttons in the right. I have tried using the flexbox approach but the center items does not align well. and also the brand logo has a wide space with a clickable link.
JS Fiddle
<nav class="navbar navbar-light navbar-expand-md bg-faded justify-content-center">
<div class="container">
<img src="assets/logo/" alt="logo">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar3">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse w-100 ml-auto" id="collapsingNavbar3">
<ul class="navbar-nav w-100 justify-content-center">
<li class="nav-item active">
<a class="nav-link" href="#">How it works</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Become a tutor</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
<ul class="nav navbar-nav ml-auto w-100 justify-content-end">
<li class="nav-item">
<a class="btn btn-link" href="#">Sign In</a>
</li>
<li class="nav-item">
<a class="btn btn-primary" href="#">Sign Up</a>
</li>
</ul>
</div>
</div>
</nav>
Answering my own question few months later.
<nav class="navbar navbar-light navbar-expand-md bg-white justify-content-center main--navigation dark-header">
<a href="#" class="navbar-brand d-flex w-50 mr-auto">
<img src="assets/images/logo-header.svg" class="navigation__logo" alt="Logo" />
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse w-100" id="collapsingNavbar">
<ul class="navbar-nav w-100 justify-content-center">
<li class="nav-item active">
<a class="nav-link" href="#">Browse</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="#">Become a tutor</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Prices</a>
</li>
</ul>
<ul class="nav navbar-nav ml-auto w-100 justify-content-end">
<li class="nav-item dropdown no-arrow mx-1 nav-link px-0">
<button id="bookmarksDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button" class="btn btn-outline-secondary btn-outlined" data-original-title="Bookmarks"><img src="assets/icons/bookmark-header-dark.svg"></button>
<div class="dropdown-list dropdown-menu dropdown-menu-right" aria-labelledby="alertsDropdown">
<h6 class="dropdown-header">
Bookmarks
</h6>
</div>
</li>
<li class="nav-item dropdown no-arrow mx-1 nav-link px-0">
<button id="messagesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button" class="btn btn-outline-secondary btn-outlined" data-original-title="Notifications"><img src="assets/icons/bell-header-dark.svg"></button>
<div class="dropdown-list dropdown-menu dropdown-menu-right" aria-labelledby="notificationsDropdown">
<h6 class="dropdown-header">
You do not have any notifications yet
</h6>
</div>
</li>
<li class="nav-item dropdown no-arrow mx-1 ml-3 mr-0 nav-link px-0">
<a class="nav-link dropdown-toggle pr-0" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<div class="header__profile__title d-inline-block text-right align-middle">
<span class="mr-2 d-none d-block header__profile__name">Aaron Alexander</span>
<span class="mr-2 d-none d-block header__profile__role">Student</span>
</div>
<div class="header__profile d-inline-block">
<img class="img-profile rounded" src="assets/images/andrew-franklin.jpeg" alt="Aaron Alexander">
</div>
</a>
<div class="dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="userDropdown">
<a class="dropdown-item" href="#">
<i class="fas fa-user fa-sm fa-fw mr-2"></i>
Profile
</a>
<a class="dropdown-item" href="#">
<i class="fas fa-cogs fa-sm fa-fw mr-2"></i>
Settings
</a>
<a class="dropdown-item" href="#">
<i class="fas fa-list fa-sm fa-fw mr-2"></i>
Activity Log
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">
<i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
Logout
</a>
</div>
</li>
</ul>
</div>
</nav>
That container div you added after the nav makes you loose the flexbox attributes.
You also set the logo with the class "w-100" which takes all possible width.
I removed those and got a nicely aligned navbar.
<nav class="navbar navbar-light navbar-expand-md bg-faded justify-content-center align-items-center">
<img src="assets/logo/" alt="logo">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar3">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse w-100 ml-auto" id="collapsingNavbar3">
<ul class="navbar-nav w-100 justify-content-center">
<li class="nav-item active">
<a class="nav-link" href="#">How it works</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Become a tutor</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
<ul class="nav navbar-nav ml-auto w-100 justify-content-end">
<li class="nav-item">
<a class="btn btn-link" href="#">Sign In</a>
</li>
<li class="nav-item">
<a class="btn btn-primary" href="#">Sign Up</a>
</li>
</ul>
</div>
</nav>
Here's a fiddle with the results.
here is my working example.
You just need to put all content into single div in order to Justify content with bootstrap classes. Also, I am using navbar-brand and making them show hide depending on screen resolution. You can do that with js which might be smoother once the page loads completely.
#media only screen and (max-width: 991px) {
.logo {
display: flex;
}
.collapse .navbar-brand {
display: none
}
}
#media only screen and (min-width: 992px) {
.logo {
display: none;
}
.collapse .navbar-brand {
display: none;
}
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<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>
<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-lg navbar-light bg-light d-flex ">
<a class="navbar-brand logo" href="#">Navbar</a>
<button class="navbar-toggler" 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>
<div class="collapse navbar-collapse justify-content-between" id="navbarSupportedContent">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>