<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
Related
I am trying to change the background-color of the following bootstrap navbar. I have loaded my own CSS file after Bootstrap CSS is loaded, so my CSS styles should have priority. However, this CSS style is NOT applied, unless I remove the bg-dark class from the <nav> tag. Why is this the case? If I am loading my CSS after bootstrap, shouldn't my CSS rules override Bootstrap's?
.navbar {
background-color: red;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Fixed navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
If you inspect the document you'll see that Bootstrap's background color is applied using !important, probably due to some cascade challenge they had. We need to add that. However, that's still not enough because we need a selector that's at least as specific as theirs. Here I'm using .navbar.bg-dark, but body .navbar would also work.
A better solution still would be to create a custom class to extend Bootstrap's background classes and use that, as .navbar.bg-vivid. This makes it a little more apparent to your future self and other developers what styling was applied.
.navbar.bg-dark,
.navbar.bg-vivid {
background-color: red !important;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar (original classes)</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
<nav class="navbar navbar-expand-md navbar-dark bg-dark bg-vivid mt-2">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar (cusom background class)</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
<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>
I’m start working on a project based on database designing using HTML website. I'm making a website for the purpose of online food order system.
while working on navbar of website’s homepage, how to add title at the left side of navbar and logout button with an image?
I have worked on the following code but I do not get desired outcome.
<nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
<div class="container">
<a class="navbar-brand" href="#">
<img src="http://placehold.it/150x50?text=Logo" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
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 problem with my navigation bar.
I'm using Bootstrap 4 Beta. My problem is when i change the navbar-expand-...
The navbar-brand goess something like this.
COMPANY
NAME
But i want it like this.
COMPANY NAME
EDIT:
Code navbar:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" role="navigation">
<!-- Navigation Bar Brand -->
<span class="h2" class="navbar-brand mb-0">COMPANY NAME</span>
This should solve the problem. Tested on all screen sizes -lg -md -sm
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<a class="navbar-brand" href="#">Company Name</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>
</nav>