In the following code, I do not see the checkbox if I put it after nav. Why?
<body>
<!-- If I remove nav completely, I see the checkbox, else I do not -->
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<a class="navbar-brand" 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>
</nav>
<input type="checkbox" id="ossm" name="ossm">
<label for="ossm">CSS is Awesome</label>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/popper.js/dist/umd/popper.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
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>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 months ago.
Improve this question
I have added a toggle element to my navbar, when I click on it it opens but won't close.
I've tried solutions found on other stackoverflow posts but nothing seems to work (sometimes it gets worse)
basic.html (where i add all my stylesheets)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.11.5/umd/popper.min.js"></script>
<script src="https://unpkg.com/#popperjs/core#2/dist/umd/popper.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js"
integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
<script src="/static/app/custom.js"></script>
{% block javascript %}
{% endblock javascript %}
navbar.html
<a class="close-navbar-toggler collapsed" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
</a>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top">
<div class="container-fluid">
<a class="navbar-brand" href="/"> <!--icon placement-->
<img src="{% static 'app/images/favicon.png' %}"
alt="computer display with dna in it" width="30" height="30">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
...
</div>
Change data-toggle="collapse" (Bootstrap 4) to data-bs-toggle="collapse" (Bootstrap 5).
Change data-target="#navbarNav" (Bootstrap 4) to data-bs-target="#navbarNav" (Bootstrap 5).
EDIT
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.11.5/umd/popper.min.js"></script>
<script src="https://unpkg.com/#popperjs/core#2/dist/umd/popper.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
<script src="/static/app/custom.js"></script>
<a class="close-navbar-toggler collapsed" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
</a>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top">
<div class="container-fluid">
<a class="navbar-brand" href="/">
<!--icon placement-->
<img src="{% static 'app/images/favicon.png' %}" alt="computer display with dna in it" width="30" height="30">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
...
</div>
</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 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>
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