So I'm really new and taking this class on Udemy; but the navigation bar isn't working even though I am straight up copying the instructor at this point.
What I want it to do is that to list the list on the right side of the creen, which isn't happening.
<nav class="navbar bg-dark navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="">Tindog</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>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Download</a>
</li>
</ul>
</div>
</nav>
I think your code is working fine here
Please Check if you are using the correct CDN or version
Related
My navbar toggle is working accordingly but fails to show my text inputted when i click on it. The button works but the text inside the button isn't visible.
I tried checking the bootstrap docs to see if i'm missing any steps but i can't find any fault
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="">TinDog</a>
<button class="navbar-toggler" role="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 ml-auto">
<li class="nav-item">
<a class="nav-link" href="">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Download</a>
</li>
</ul>
</div>
</nav>
First of all, make sure you are including the required bootstrap.js file, without it the button does nothing except respond to viewport width.
Next, since you used .navbar-dark, the text color is white; you need to make sure it has a dark background color in order to read the text. In the following snippet I added .bg-dark.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="">TinDog</a>
<button class="navbar-toggler" role="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 ms-auto">
<li class="nav-item">
<a class="nav-link" href="">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Download</a>
</li>
</ul>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
Note:
I also corrected your misuse of .ml-auto in BS5+ it's .ms-auto (s for start, e for end) to support both LTR & RTL text directions.
I know there are already a lot of questions asked about how to do this, but I am not understanding where exactly should I place the class in my code. I am using Bootstrap 5.1.3.
Also, could someone identify if I am doing/including any "extra stuff" that is redundant or I can remove.
My Code:
<nav class="navbar navbar-light bg-light fixed-top navbar-expand-md mr-auto">
<div class="container-fluid">
<div class="navbar-brand">
Shubham Salunke
</div>
<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" href="#home"> Home </a> </li>
<li class="nav-item"> <a class="nav-link" href="#about"> About </a> </li>
<li class="nav-item"> <a class="nav-link" href="#projects"> Works </a> </li>
<li class="nav-item"> <a class="nav-link" href="#social"> Social Media </a> </li>
</ul>
</div>
</div>
</nav>
I have copied the navbar code from the Bootstrap 4.6 navbar documentation, and I just added an icon at the beginning of the navbar.
The problem is that whenever I decrease the size of the window and the collapse starts applying the anchor "smile" gets pushed into the middle, I want it to stay in its place after the collapse applies.
What caused this problem and how can I fix it?
My code:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<i class="far fa-laugh-beam text-white mt-1"></i>
<a class="navbar-brand ml-2" href="#">Smile</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</nav>
Without css code i can just guess. But i think it looks like justify-content:space-between;
Try to gave one of your classes in <nav> just justify-content:flex-start; or check it inline with <nav class="navbar navbar-expand-lg navbar-dark bg-dark" style="justify-content:flex-start;">
its been so nice with stack overflow.I am currently in a bootcamp of Angela Yu.using bootstrap is fun but in the navbar section i am facing some issues.I cant move my nav item to the right.in the ul ,I am using a class ml-auto but its not running.For your better experience I m putting full code-
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="">tinDog</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01" >
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#"> contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> download</a>
</li>
</ul>
</div>
</div>
i have put all other elements nicely!
can you guys give me a way or modify this code for my purpose?
The code above aligned it to the right for me when I tried it but I had to close out <nav>. In your code, you forgot to close it out with </nav>. Also, make sure you linked the bootstrap CDN properly by adding <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> in the head of your html.I fixed the toggle button which wasn't working in smaller screens. Here is my code with the bootstrap style sheet included. Copy it and run it to see if it works for you.
<nav class="navbar navbar-expand-sm fixed-top navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand text-white" href="#" >tinDog</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ml-auto ">
<li class="nav-item">
<a class="nav-link text-light" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="#">Download</a>
</li>
</ul>
</div>
</div>
</nav>
I'm using the Bootstrap navbar:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="who.html"><img src="../img/RP.png" id="brand-img"/></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">WHO <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="what.html">WHAT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="how.html">HOW</a>
</li>
</ul>
</div>
</nav>
Yet when I switch to pages what.html and how.html, the nav becomes slightly smaller. When I renamed index.html to who.html, I stopped seeing this bug. Any ideas?