how to create a hamburger menu for this code?
<div class="container-fluid h-100">
<div class="row h-100">
<div class="collapse d-md-flex h-100 box">
<ul class="nav flex-column flex-nowrap h-100">
<li class="nav-item h-25"><a class="nav-link h-100 " href="#">A </a></li>
<li class="nav-item h-25 "><a class="nav-link h-100 " href="#">B</a></li>
<li class="nav-item h-25"><a class="nav-link h-100 " href="#l">C</a></li>
<li class="nav-item h-25"><a class="nav-link h-100" href="#">D</a></li>
</ul>
</div>
</div>
</div>
can anyone help please?
Basically, you should follow the documentation. Your code should look like this.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">A</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">B</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">C</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">D</a>
</li>
</ul>
</nav>
Related
<body>
<div class="container mt-3">
<h2>Vertical Nav</h2>
<p>Use the .flex-column class to create a vertical nav:</p>
<ul class="nav flex-column">
<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 disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</body>
How do you make the navbar in bootstrap this way with more options on the right of the sidebar as in the picture?
enter image description here
You can check out the Examples page from the Bootstrap site.
https://getbootstrap.com/docs/5.1/examples/
Check out the DEMO below:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<div class="container">
<div class="row p-5">
<div class="col">
<h5>Section</h5>
<ul class="nav flex-column">
<li class="nav-item mb-2">Link</li>
<li class="nav-item mb-2">Link</li>
<li class="nav-item mb-2">Link</li>
<li class="nav-item mb-2">Link</li>
</ul>
</div>
<div class="col">
<h5>Section</h5>
<ul class="nav flex-column">
<li class="nav-item mb-2">Link</li>
<li class="nav-item mb-2">Link</li>
</ul>
</div>
<div class="col">
<h5>Section</h5>
<ul class="nav flex-column">
<li class="nav-item mb-2">Link</li>
<li class="nav-item mb-2">Link</li>
</ul>
</div>
</div>
</div>
In the extra-small size screen, I want to have the navbar-brand and navbar-nav vertically stacked.
<nav class="navbar navbar-dark navbar-expand-sm bg-primary fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Ristorante Con Fusion</a>
<ul class="navbar-nav mr-auto">
<li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="./aboutus.html">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Menu</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</nav>
But for some reason, it looks like this
How can I have the navbar-nav under the navbar-brand in an extra-small size screen?
Do you want the nav items to stack vertically too? I think you're looking for this...
<nav class="navbar navbar-dark navbar-expand bg-primary fixed-top">
<div class="container flex-column flex-sm-row">
<a class="navbar-brand" href="#">Ristorante Con Fusion</a>
<ul class="navbar-nav mr-sm-auto mr-0">
<li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="./aboutus.html">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Menu</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</nav>
https://codeply.com/p/UNjoLoEnSn
Use .collapse class and button toggler.
UPDATE
Just add flex-column flex-lg-row classes in your nav tag.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<nav class="navbar navbar-expand-lg navbar-light bg-light flex-column flex-lg-row">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="navbar-nav mr-auto">
<li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="./aboutus.html">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Menu</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</nav>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
I am currently having trouble creating 2 rows and getting align logo(heading) to the left, 'Home' and 'User' menu links to the top right corner. The second row should display 'Link1', 'Link2', 'Link3' menu in the center. The following code doesn't seem to align properly.
I have tried to use 'navbar-nav mr-auto' for logo but it didn't work. Also tried 'Home', 'About' links 'ml-auto'. It doesn't work.
*******************************************************************************************
Home About User
Logo Heading1
Link1 Link2 Link3 Link4
*******************************************************************************************
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="container">
<a class="navbar-brand mr-auto" href="">
<img style="width: 72px; height: 71px;" src="logo-1.png">Heading
</a>
<div class="d-flex flex-column flex-wrap" id="navbarCollapse">
<ul class="navbar-nav mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="ace.aspx">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="About.aspx" >About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="User.aspx" >User</a>
</li>
</ul>
<div id="divSubMenu" runat="server" >
<ul class="navbar-nav mx-auto mt-auto">
<li class="nav-item active" id="liDashboard" runat="server">
<a class="nav-link" href="Dashboard.aspx">Link1</a>
</li>
<li class="nav-item" id="liaint" runat="server">
<a class="nav-link" href="ation.aspx">Link2</a>
</li>
<li class="nav-item" id="liign" runat="server">
<a class="nav-link">Link3</a>
</li>
<li class="nav-item" id="lise" runat="server">
<a class="nav-link" href="Search.aspx">Link4</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
Try this code. hope will help You.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-between align-items-center w-100" id="navbarNavDropdown">
<ul class="navbar-nav mx-auto text-md-center mt-5">
<li class="nav-item active" id="liDashboard" runat="server">
<a class="nav-link" href="Dashboard.aspx">Link1</a>
</li>
<li class="nav-item" id="liaint" runat="server">
<a class="nav-link" href="ation.aspx">Link2</a>
</li>
<li class="nav-item" id="liign" runat="server">
<a class="nav-link">Link3</a>
</li>
<li class="nav-item" id="lise" runat="server">
<a class="nav-link" href="Search.aspx">Link4</a>
</li>
</ul>
<div class="nav-item flex-row justify-content-md-center justify-content-start flex-nowrap">
<ul class="navbar-nav mb-5">
<li class="nav-item">
<a class="nav-link" href="ace.aspx">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="About.aspx" >About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="User.aspx" >User</a>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
Hope below code will help you
<div class="container">
<div class="row">
<div class="col-12">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#">Logo Heading1</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav mx-auto">
<li class="nav-item active" id="liDashboard" runat="server">
<a class="nav-link" href="Dashboard.aspx">Link1</a>
</li>
<li class="nav-item" id="liaint" runat="server">
<a class="nav-link" href="ation.aspx">Link2</a>
</li>
<li class="nav-item" id="liign" runat="server">
<a class="nav-link">Link3</a>
</li>
<li class="nav-item" id="lise" runat="server">
<a class="nav-link" href="Search.aspx">Link4</a>
</li>
</ul>
<div class="nav-item">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="ace.aspx">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="About.aspx" >About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="User.aspx" >User</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
If u want out put like you have provided text above logo above middle on below
<div class="container">
<div class="row">
<div class="col-12">
<nav class="navbar navbar-expand-lg navbar-light align-items-start">
<a class="navbar-brand" href="#">Logo Heading1</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav mx-auto mt-5">
<li class="nav-item active" id="liDashboard" runat="server">
<a class="nav-link" href="Dashboard.aspx">Link1</a>
</li>
<li class="nav-item" id="liaint" runat="server">
<a class="nav-link" href="ation.aspx">Link2</a>
</li>
<li class="nav-item" id="liign" runat="server">
<a class="nav-link">Link3</a>
</li>
<li class="nav-item" id="lise" runat="server">
<a class="nav-link" href="Search.aspx">Link4</a>
</li>
</ul>
<div class="nav-item">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="ace.aspx">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="About.aspx" >About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="User.aspx" >User</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
You can try stacking multiple navbars in bootstrap 4 as shown below. Please see if this answer is acceptable for you requirements. Hope this helps!
EDIT: Updated my code to only have two rows as requested in the question. Good luck champ..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Stack Answer</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark py-0">
<div class="container">
<div class="collapse navbar-collapse" id="navbarResponsive1">
<ul class="navbar-nav ml-auto">
<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="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">User</a>
</li>
</ul>
</div>
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark pt-0">
<div class="container">
<ul class="navbar-nav">
<li class="nav-item">
<a class="navbar-brand" href="#">
<img style="width: 72px; height: 71px;" src="http://placehold.it/72x71?text=Logo">
Stack Answer
</a>
</li>
</ul>
<ul class="navbar-nav mx-auto">
<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>
<li class="nav-item">
<a class="nav-link" href="#">Link4</a>
</li>
</ul>
</div>
</nav>
<!-- Page Content -->
<!-- Bootstrap core JavaScript -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
</body>
</html>
Currently I try to build a Navbar that is responsive. I use Bootstrap for my css. What I want is that: On a small viewport all links but the Navbar-brand is listed within one row. The Navbar on a large viewport looks like this (as expected):
But when I shrink the viewport the Navbar looks like this:
I already managed some viewport configurations, that e.g the username is not displayed on a small viewport. The HTML looks as follows (Btw. I will only show some mocked nav-items, since this is not important for the question:
HTML
<nav class="navbar navbar-expand fixed-top navbar-dark bg-dark flex-column flex-md-row">
<div class="navbar-nav flex-row">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="navbar-brand mr-0 mr-md-2">
<img src="assets/loading-skull.png" width="30px" height="auto">
Scare-me.com
</a>
</li>
</ul>
</div>
<div class="navbar-nav">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link">Stories</a>
</li>
</ul>
</div>
<div class="mx-auto">
<a class="navbar-brand mx-auto hide-on-small-viewport" href="#">Show your threads!</a>
</div>
<div class="navbar-nav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link">Log In</a>
</li>
<li *ngIf="!isLoggedIn" class="nav-item">
<a class="nav-link">Sign Up</a>
</li>
<li class="nav-item">
<button class="btn mt-1 mb-3 mb-md-0 ml-md3">Logout</button>
</li>
</ul>
</div>
</nav>
It seems a bit difficult to achieve what you want without drastically changing the whole html structure of your navbar. I am not sure if you are up for that. So I would suggest keeping 2 buttons for "Stories". Show one button in mobile view and the other in desktop view. This will ensure minimal regression impact to your html structure.
Button for desktop views
<ul class="navbar-nav mr-auto d-none d-md-block">
<li class="nav-item">
<a class="nav-link">Stories</a>
</li>
</ul>
Button for mobile view
<ul class="navbar-nav mr-auto d-none d-md-block">
<li class="nav-item">
<a class="nav-link">Stories</a>
</li>
</ul>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<nav class="navbar navbar-expand fixed-top navbar-dark bg-dark flex-column flex-md-row">
<div class="navbar-nav flex-row">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="navbar-brand mr-0 mr-md-2">
<img src="assets/loading-skull.png" width="30px" height="auto"> Scare-me.com
</a>
</li>
</ul>
</div>
<div class="navbar-nav">
<ul class="navbar-nav mr-auto d-none d-md-block">
<li class="nav-item">
<a class="nav-link">Stories</a>
</li>
</ul>
</div>
<div class="mx-auto">
<a class="navbar-brand mx-auto hide-on-small-viewport" href="#">Show your threads!</a>
</div>
<div class="navbar-nav">
<ul class="navbar-nav mr-auto d-md-none">
<li class="nav-item">
<a class="nav-link">Stories</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link">Log In</a>
</li>
<li *ngIf="!isLoggedIn" class="nav-item">
<a class="nav-link">Sign Up</a>
</li>
<li class="nav-item">
<button class="btn mt-1 mb-3 mb-md-0 ml-md3">Logout</button>
</li>
</ul>
</div>
</nav>
This question already has answers here:
Bootstrap align navbar items to the right
(24 answers)
Closed 4 years ago.
I am trying to achieve to divide my navbar in two equal parts. In which the right side should be my menu and left side should be my icon and search bar. And on click the search bar it should extend to the rest of the half in left part. I have successfully use the fixed navabar. But I am facing issue in aligning my menu to the right side.
This is how it's look.
As you can see the menu is not completely right align. And after following the post on SO looks like float : right won't and didn't work.
I am not sure how can I fix this.
Here is my code:
<nav class="navbar fixed-top navbar-expand navbar-light bg-light">
<div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
<img src="images/some_logo.png" class="img-rounded" alt="some_logo" style="height: 40px; width: 80px">
<div class="px-2">
<form>
<input type="text" name="search" placeholder="Search ...">
</form>
</div>
</div>
<div class="navbar-collapse collapse w-100 order-4 order-md-0 dual-collapse2">
<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="#/product">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#/services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#/career">Career</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#/contact">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" onclick="openNav()" style="width: 60px; font-size: 25px; margin-top: -7px">☰</a>
</li>
</ul>
</div>
</nav>
In Elements in browser I tried setting with margin-right but these values are going in negative, which I don't think is right way to do.
Also I am new to front end development and bootstrap framework which I am finding very confusing. So any help would be highly appreciated.
ul.navbar-nav{
position:absolute;
right:0px;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js" integrity="sha384-feJI7QwhOS+hwpX2zkaeJQjeiwlhOP+SdQDqhgvvo1DsjtiSQByFdThsxO669S2D" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar fixed-top navbar-expand navbar-light bg-light">
<div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
<img src="images/some_logo.png" class="img-rounded" alt="some_logo" style="height: 40px; width: 80px">
<div class="px-2">
<form>
<input type="text" name="search" placeholder="Search ...">
</form>
</div>
</div>
<div class="navbar-collapse collapse w-100 order-4 order-md-0 dual-collapse2">
<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="#/product">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#/services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#/career">Career</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#/contact">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" onclick="openNav()" style="width: 60px; font-size: 25px; margin-top: -7px">☰</a>
</li>
</ul>
</div>
</nav>
</body>
</html>
Alright - I had a similar problem not too long ago and the solution is using the built in bootstrap mr-auto and ml-auto classes on your uls. Though this would solve the problem, ideally you'd have an ul for every section of the navbar (i.e. a ul for the search and another for the links on the right)
<nav class="navbar fixed-top navbar-expand navbar-light bg-light">
<div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2 mr-auto">
<img src="images/some_logo.png" class="img-rounded" alt="some_logo" style="height: 40px; width: 80px">
<div class="px-2">
<form>
<input type="text" name="search" placeholder="Search ...">
</form>
</div>
</div>
<div class="navbar-collapse collapse w-100 order-4 order-md-0 dual-collapse2">
<ul class="navbar-nav ml-auto">
<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="#/product">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#/services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#/career">Career</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#/contact">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" onclick="openNav()" style="width: 60px; font-size: 25px; margin-top: -7px">☰</a>
</li>
</ul>
</div>
</nav>
After following #ZimSystem's answer here, ml-auto push item to right in bootstrap 4 beta.
Finally got this code working.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<nav class="navbar fixed-top navbar-expand navbar-light bg-light">
<div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
<img src="images/some_logo.png" class="img-rounded" alt="some_logo" style="height: 40px; width: 80px">
<div class="px-2">
<form>
<input type="text" name="search" placeholder="Search ...">
</form>
</div>
</div>
<div class="navbar-collapse collapse w-100 order-4 order-md-0 dual-collapse2">
<ul class="navbar-nav ml-auto">
<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="#/product">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#/services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#/career">Career</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#/contact">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" onclick="openNav()" style="width: 60px; font-size: 25px; margin-top: -7px">☰</a>
</li>
</ul>
</div>
</nav>