Net 6.0 Hamburger menu Bootstrap - bootstrap-5

Hi I have an issue with a bootstrap hamburger menu the menu expands, however when I try to collapse the menu it just will not work, the data target class is correct, is there something I am doing wrong here or have I over looked something. Thanks
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-info border-bottom box-shadow mb-3">
<div class="container-fluid">
<a class="navbar-brand text-light" asp-area="" asp-controller="Home" asp-action="Index">PobalScoil</a>
<button class="navbar-toggler text-light" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-light bg-info" asp-area="" asp-controller="Home" asp-action="About_Us">About |</a>
</li>

Related

Vertically align image and nav item in navbar in Bootstrap 5

I am trying to align an image and a nav-link vertically centre in Bootstrap 5. But the nav-link with button never aligns to the navbar and the other links.
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="/css/site.css?v=47DEQpj8HBSa-_TImW-5JCeuQeRkm5NMpJWZG3hSuFU" />
</head>
<body class="d-flex flex-column min-vh-100 bg-dark">
<header>
<nav b-kcycjqi1p7 class="navbar navbar-expand-sm navbar-toggleable-sm navbar-dark bg-primary box-shadow mb-3 py-2">
<div b-kcycjqi1p7 class="container-fluid">
<a class="navbar-brand" href="/">
Logo
</a>
<button b-kcycjqi1p7 class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span b-kcycjqi1p7 class="navbar-toggler-icon"></span>
</button>
<div b-kcycjqi1p7 class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<ul b-kcycjqi1p7 class="navbar-nav flex-grow-1">
<li b-kcycjqi1p7 class="nav-item">
<a class="nav-link" href="/">Home</a>
</li>
<li b-kcycjqi1p7 class="nav-item">
<a class="nav-link" href="/home/privacy">Privacy</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item d-inline-block">
<a class="nav-link btn btn-danger" href="#" role="button" >
hello
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<img src="data:image/png;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAwADADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDBtdJ1tdTF5EbpVV2Cgxsw687vTiori+ntddEk8rQ+W+TbgbyT6Y9PrU+r6p4nlc6PBHcRJJzvLEu4+v8ASsuDS9Re582WCSacH5pQ+cN0Oaw5fd1PPa6s2n1uSS9SMiaGAkHL8DntxXe22i2F0IPPnmnW5+aN9m0EjqPwrzvT08Ua2ZhpHkQw2r+QGdQCWB5NbkWu+JPBt3HbeIXje3nUrDOhzg/iO9ZvBU+ZNPX+vM2+pStzI07jTJooZLSzHm3UcuXmJJH+6p6YxSRW3lzgSyupEe90wQRXR2sMTeRcPPdRs2NixyjbIG5Hy/5xTrsxm5NuSYxKxSQsOee2eta00o+6iKdRw0PL2vYZvEUumzSyt9ptlmS5jc+bHcYyCp9M9qoalHd+INIF7G6jU7Xi9WE7HkA/iK+o7kVgx3sbatM+HEgZo0cnuOlJb389r4ka6RnSdlbaB3OK6dC3CzO48OQ3+yzdNeTT4b2R3uEyOfVvT6fWtWPSBrdhd6dqOvNqUofdAH5CEc5ViTjI4yOOa47RvPvtJmkvbGQ2ce5knZSFBJwVDEY684rtPB/h99dlmFgpt7VoWSScnIDFCowccnpwPSsJuSdkerTlH2abL1uy6lodxLbzyGWFifLjILxoD1APXgdRUK+KJdQWOQRLKU/dvOASA3QfjjvU2qQ32j6ZZajcRNaaqluLe9ixwSDgSAjgjIBz71zFlLPPJJ9jm8ieeTLozBEYdyB0yawlGNOyvY8Rx1OIsdDvtb1waVaxyG8urzbGNnCJyWcn0A5r6o0bQdD0iGODTtOt1aNApm8ob392bGSTjmuN+Fnh8obzXLhNpZmt7fI+YqD8zHI4yeOPSu3gnX7bdxiTgFVPI54yK6m+h2Ju1yzf2sd/CbaVVMLDBUgEflS2FhbWSbYVwe4z/TpTBdD7WlqBhxEZcD0zgf1pt1ctJlIJBGVI3MRSdtxpjtTtdM1awe1v4EuYX/5Zkcn6d/xFcPL4W0vS9ZjuGkzY3EbR+XIAwjccgbsemfyrtbeF5lF7udQ4yEGBlR0yeuD1wMda5/xxNHb6RbGeVoke5AQqM/wMeQc5FK13cVSKav1P/9k=" alt="Akshay Gollahalli" width="40" height="40" class="rounded-circle">
</a>
<ul class="dropdown-menu dropdown-menu-dark dropdown-menu-end">
<li><a class="dropdown-item bg-danger" href="/microsoftidentity/account/signout">Sign out</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
</body>
</html>
That's the hello button. Is there a way to make then vertically aligned to other links? Any help on this is appreciated.

navbar-nav has display: flex; so you can use the align-items-center utility class to the <ul> element.
<ul class="navbar-nav align-items-center">
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="/css/site.css?v=47DEQpj8HBSa-_TImW-5JCeuQeRkm5NMpJWZG3hSuFU" />
</head>
<body class="d-flex flex-column min-vh-100 bg-dark">
<header>
<nav b-kcycjqi1p7 class="navbar navbar-expand-sm navbar-toggleable-sm navbar-dark bg-primary box-shadow mb-3 py-2">
<div b-kcycjqi1p7 class="container-fluid">
<a class="navbar-brand" href="/">
Logo
</a>
<button b-kcycjqi1p7 class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span b-kcycjqi1p7 class="navbar-toggler-icon"></span>
</button>
<div b-kcycjqi1p7 class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<ul b-kcycjqi1p7 class="navbar-nav flex-grow-1">
<li b-kcycjqi1p7 class="nav-item">
<a class="nav-link" href="/">Home</a>
</li>
<li b-kcycjqi1p7 class="nav-item">
<a class="nav-link" href="/home/privacy">Privacy</a>
</li>
</ul>
<ul class="navbar-nav align-items-center">
<li class="nav-item">
<a class="nav-link btn btn-danger" href="#" role="button" >
hello
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<img src="data:image/png;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAwADADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDBtdJ1tdTF5EbpVV2Cgxsw687vTiori+ntddEk8rQ+W+TbgbyT6Y9PrU+r6p4nlc6PBHcRJJzvLEu4+v8ASsuDS9Re582WCSacH5pQ+cN0Oaw5fd1PPa6s2n1uSS9SMiaGAkHL8DntxXe22i2F0IPPnmnW5+aN9m0EjqPwrzvT08Ua2ZhpHkQw2r+QGdQCWB5NbkWu+JPBt3HbeIXje3nUrDOhzg/iO9ZvBU+ZNPX+vM2+pStzI07jTJooZLSzHm3UcuXmJJH+6p6YxSRW3lzgSyupEe90wQRXR2sMTeRcPPdRs2NixyjbIG5Hy/5xTrsxm5NuSYxKxSQsOee2eta00o+6iKdRw0PL2vYZvEUumzSyt9ptlmS5jc+bHcYyCp9M9qoalHd+INIF7G6jU7Xi9WE7HkA/iK+o7kVgx3sbatM+HEgZo0cnuOlJb389r4ka6RnSdlbaB3OK6dC3CzO48OQ3+yzdNeTT4b2R3uEyOfVvT6fWtWPSBrdhd6dqOvNqUofdAH5CEc5ViTjI4yOOa47RvPvtJmkvbGQ2ce5knZSFBJwVDEY684rtPB/h99dlmFgpt7VoWSScnIDFCowccnpwPSsJuSdkerTlH2abL1uy6lodxLbzyGWFifLjILxoD1APXgdRUK+KJdQWOQRLKU/dvOASA3QfjjvU2qQ32j6ZZajcRNaaqluLe9ixwSDgSAjgjIBz71zFlLPPJJ9jm8ieeTLozBEYdyB0yawlGNOyvY8Rx1OIsdDvtb1waVaxyG8urzbGNnCJyWcn0A5r6o0bQdD0iGODTtOt1aNApm8ob392bGSTjmuN+Fnh8obzXLhNpZmt7fI+YqD8zHI4yeOPSu3gnX7bdxiTgFVPI54yK6m+h2Ju1yzf2sd/CbaVVMLDBUgEflS2FhbWSbYVwe4z/TpTBdD7WlqBhxEZcD0zgf1pt1ctJlIJBGVI3MRSdtxpjtTtdM1awe1v4EuYX/5Zkcn6d/xFcPL4W0vS9ZjuGkzY3EbR+XIAwjccgbsemfyrtbeF5lF7udQ4yEGBlR0yeuD1wMda5/xxNHb6RbGeVoke5AQqM/wMeQc5FK13cVSKav1P/9k=" alt="Akshay Gollahalli" width="40" height="40" class="rounded-circle">
</a>
<ul class="dropdown-menu dropdown-menu-dark dropdown-menu-end">
<li><a class="dropdown-item bg-danger" href="/microsoftidentity/account/signout">Sign out</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
</body>
</html>

How to add event handling in BootStrap menu/dropdown menu

I am building a Single page Application in JavaScript. I am following this example to use BootStrap 5 menu and dropdown menu.
How can I add code to handle when user select a menu and an item in the drop down menu?
Here is the example of my menu bar:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</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-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>

When a user selects a dropdown item, a click event is triggered.
Therefore, you can add an event listener to all dropdown-item of dropdown-menu, in order to add your code for handling.
const dropdownItems = document.querySelectorAll(".dropdown-menu .dropdown-item")
dropdownItems.forEach(item => {
item.addEventListener("click", function(e) {
// your code here
})
})

Bootstrap 5 navbar dropdown-menu leaves screen

I have a menu that is aligned to the right. The last menu is a dropdown menu. But the dropdown menu items doesn't stay on the screen. Half of it leaves the screen. I have been googling but I can't find the class that kepps it on screen.
<nav class="navbar navbar-expand-md navbar-light bg-light">
<div class="container-fluid">
<div class="ms-auto order-0">
<a class="navbar-brand mx-auto" href="#"><img src="./img/BMB-logo.svg" width="75" height="75"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#">Right</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-bs-toggle="dropdown" aria-expanded="false">
<i class="fas fa-user"></i>
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Login</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>

As you can see in an older question, the dropdown-menu needs to be right aligned. In Bootstrap 5, dropdown-menu-right has changed to dropdown-menu-end...
<nav class="navbar navbar-expand-md navbar-light bg-light">
<div class="container-fluid">
<div class="ms-auto order-0">
<a class="navbar-brand mx-auto" href="#"><img src="//placehold.it/75" width="75" height="75"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#">Right</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-bs-toggle="dropdown" aria-expanded="false">
<i class="fas fa-user"></i>
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Login</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Demo

The accepted answer doesn't work for me due to the following CSS style:
.dropdown-menu[style] {
right: auto !important;
}
which overrides the right:0; property of .dropdown-menu-end. Removing the !important or adding it to the .dropdown-menu-end forces the dropdown to align right as intended.

How to get the language selectbox and login text on the same line?

I have a code like this for displaying menu, login, register and select language on the same line. How do I get the Language selectbox on the same line?
The missing code is implemented here.
Screenshot
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#*<a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">xxxxx</a>*#
<a class="navbar-brand" href="/WebZenter" tabindex="-1">
<span style="padding-left: 30px">xxxxxx</span>
<img alt="Brand" src="~/CustomerFiles/BeoTjenester/WebZenter50x50.png" width="20" height="20" style="margin-top: -20px;" />
</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a asp-area="" asp-controller="xxxxxxxx" asp-action="Jobs">xxxxxh</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">DinnerOut<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a asp-area="" asp-controller="DinnerOut" asp-action="Index">Create Bill</a></li>
<li><a asp-area="" asp-controller="DinnerOut" asp-action="Select">Select Bill</a></li>
</ul>
</li>
</ul>
#if (SignInManager.IsSignedIn(User))
{
<form asp-area="" asp-controller="Account" asp-action="LogOff" method="post" id="logoutForm" class="navbar-right">
<ul class="nav navbar-nav navbar-right">
<li>
<a asp-area="" asp-controller="Manage" asp-action="Index" title="Manage">#Localizer["Hello"] #UserManager.GetUserName(User)!</a>
</li>
<li>
<button type="submit" class="btn btn-link navbar-btn navbar-link"><span class="glyphicon glyphicon-log-out"></span>Log off</button>
</li>
</ul>
</form>
}
else
{
<ul class="nav navbar-nav navbar-right">
<li><a asp-area="" asp-controller="Account" asp-action="Register"><span class="glyphicon glyphicon-user"></span> #Localizer["Register"]</a></li>
<li><a asp-area="" asp-controller="Account" asp-action="Login"><span class="glyphicon glyphicon-log-in"></span> #Localizer["Login"]</a></li>
<li>
<div title="#Localizer["Request culture provider:"] #requestCulture?.Provider?.GetType().Name" class="collapse navbar-collapse">
<form id="selectLanguage" asp-controller="ChangeLanguage"
asp-action="SetLanguage" asp-route-returnUrl="#Context.Request.Path"
method="post" class="form-horizontal" role="form">
#Localizer["Language"] <select name="culture"
onchange="this.form.submit();"
asp-for="#requestCulture.RequestCulture.UICulture.Name" asp-items="cultureItems"></select>
</form>
</div>
</li>
</ul>
}
</div>
</div>
Missing code is added.

Bootstrap logo + navbar items onto same line for mobile view

Goal: Display on mobile the Logo + Navbar items onto the same line. (I don't want these Navbar items inside the navbar-toggle collapsed)
1) The icons('search', 'message', 'globe') began hidden in the navbar-toggle collapsed
[navbar-toggle collapsed][1][1]: https://i.stack.imgur.com/LjtPr.png
2) The icons('search', 'message', 'globe') have been extracted from the navbar-toggle collapsed, but I've been unable to display them inline with the branding.
[Icons extracted from navbar-toggle collapsed][1] [1]: https://i.stack.imgur.com/5eomO.png
Note on img two:
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
Has been replaced with 'user-o' fa icon.
The following bootstrap navbar is used:
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>

Resources