Documentation: https://getbootstrap.com/docs/4.3/components/navbar/#external-content
Code:
<div class="pos-f-t">
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<h5 class="text-white h4">Collapsed content</h5>
<span class="text-muted">Toggleable via the navbar brand.</span>
</div>
</div>
<nav class="navbar navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
</div>
The default is for him to come up, but I want to leave him on the right. As?
Related
<nav class="navbar navbar-expand bg-light navbar-light fixed-top">
<div class="fixed-top">
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<h5 class="text-white h4">Collapsed content</h5>
<span class="text-muted">Toggleable via the navbar brand.</span>
</div>
</div>
<nav class="navbar navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
</div>
</nav>
I don't know why, but the data-toggle simply does not work in my Angular codebase, although I have also installed and imported Bootstrap and JQuery in angular.json. The toggler icon simply does not show up. Do you guys have an idea how to check why it is the case?
Hi you need to run below command to into your angular application:
npm install popper.js --save
after it also add popper.js file path into your angular.json script section
Therichpost
Thanks
<div class="fixed-top">
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<h5 class="text-white h4">Collapsed content</h5>
<span class="text-muted">Toggleable via the navbar brand.</span>
</div>
</div>
<nav class="navbar navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-
expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
</div>
Hi so i got this from boostrap 4.5 navbar. My issue is that when i click on the menu picture it drops to the bottom left corner upon collapse. I want it to stay on the top left corner how do i do that? thanks
place the id=navbarToggleExternalContent after the button navbar-toggler - like in the snippet below:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<div class="fixed-top">
<nav class="navbar navbar-dark navbar-expand-lg bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria- expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar content -->
<div class="collapse navbar-collapse" id="navbarToggleExternalContent">
<ul class="navbar-nav">
<div class="bg-dark p-4">
<h5 class="text-white h4">Collapsed content</h5>
<span class="text-muted">Toggleable via the navbar brand.</span>
</div>
</ul>
</div>
</nav>
</div>
My bootstrap navbar is always visible on mobile. No matter if navbar-toggler is collapsed or not.
Here is the code.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="/"><i class="fas fa-blog"></i> Tech Info</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="d-flex flex-row-reverse collapse navbar-collapse" id="navbarSupportedContent1">
<ul class="nav justify-content-end">
<% if(!user) { %>
<li class="nav-item">
<a class="nav-link my-2 my-sm-0" href="/login">Sing In</a>
</li>
<li class="nav-item">
<a class="nav-link btn btn-outline-primary my-2 my-sm-0" href="/register">Sign Up</a>
</li>
<% } %>
</ul>
</div>
</div>
</nav>
The d-flex class is overriding the navbar-collapse behavior. If you want to reverse the flex direction use it on the nav element instead...
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="/"><i class="fas fa-blog"></i> Tech Info</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent1">
<ul class="nav justify-content-end flex-row-reverse">
<li class="nav-item">
<a class="nav-link my-2 my-sm-0" href="/login">Sing In</a>
</li>
</ul>
</div>
</div>
</nav>
Demo: https://www.codeply.com/p/MgNaErmlWm
The target of the button must be equal to the div id you want to collapse, and remove the d-flex from the div.navbar-collapse
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1"
aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation">
...
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent1">
...
</div>
navbar should not be a container generally. Try taking div class="container " out.
I have a scenario where I need to display a footer just like navbar(i.e; need to hide list items of ul list using some button is responsive, on click of that button need to display list items), here I am using bootstrap navbar, but instead of hamburger I need some other customized button. Is it possible?
Here is my code:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">list1</li>
<li>list2</li>
<li>list3</li>
</ul>
</div>
</div>
</nav>
Any help would be appreciated.
Thanks in Advance.
From Bootstrap documentation ... You should be able to change the icon here
https://getbootstrap.com/docs/4.0/components/navbar/
External content
Sometimes you want to use the collapse plugin to trigger hidden content elsewhere on the page. Because our plugin works on the id and data-target matching, that’s easily done!
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="pos-f-t">
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<h4 class="text-white">Collapsed content</h4>
<span class="text-muted">Toggleable via the navbar brand.</span>
</div>
</div>
<nav class="navbar navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
</div>
I have a navbar header,the Brand Name and a navbar toggler button done in bootstrap but the problem I'm facing not is,it is not inline. I tried all the possibilities but couldn't find a solution.
here is the code.
<nav class="navbar navbar-inverse bg-inverse">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<h1 class="navbar-brand mb-0">Navbar</h1>
</nav>
It looks like you're using the latest Bootstrap Alpha 6 which is not yet stable. You'd need to use navbar-toggler-right
<nav class="navbar navbar-inverse bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<h1 class="navbar-brand mb-0">Navbar</h1>
</nav>
http://www.codeply.com/go/RzbJNIMm1b