Bootstrap nav mr-auto not working as expected - html

I have the bootstrap nav snippet below:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<nav class="navbar bg-secondary navbar-dark">
<div class="container">
<nav class="navbar navbar-expand-lg"><a class="navbar-brand text-white" href="/">Test Site 2</a><button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarMain" aria-controls="navbarMain" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse d-flex" id="navbarMain">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" role="button" id="navbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">View Categories</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<div class="container container-sm">
<div class="row">
<a class="dropdown-item" href="/categories/5cfe472022a68840484a3652" style="white-space: normal;">Category 1</a><a class="dropdown-item" href="/categories/5dc7ff6bac641e2548a9e279" style="white-space: normal;">Category 2</a><a class="dropdown-item" href="/categories/5dc7ffa1ac641e2548a9e27a" style="white-space: normal;">Category 3</a>
</div>
</div>
</div>
</li>
<li class="nav-item"><a class="nav-link" href="/pages/about-us">About Us</a></li>
<li class="nav-item"><a class="nav-link" href="/pages/contact-us">Contact Us</a></li>
<li class="nav-item"><a class="nav-link" href="/pages/finding-us">Finding Us</a></li>
</ul>
<ul class="navbar-nav">
<li class="nav-item mr-2">
<form class="form-inline" method="get" action="/search">
<div class="input-group input-group-sm mt-1"><input class="form-control" type="search" placeholder="Search..." name="term">
<div class="input-group-append"><button class="btn btn-success" type="submit">Go</button></div>
</div>
</form>
</li>
<li class="nav-item"><a class="nav-link" href="/login">Login / Register</a></li>
</ul>
</div>
</nav>
</div>
</nav>
I have copied their example on the bootstrap documentation site where possible.
I want to get the second <ul> pushed to the right so am using mr-auto as they do in their example however it's not working for me like it is in the example, I don't understand why. I even tried adding the class d-flex to the #navbarMain div but still no luck.
Even running through the values in the inspector shows everything the same as in the example as far as I can see.
Can someone tell me why this isn't working?


What you want from image you attached:
What my code produces to match your image:
Updated Code: Demo on JsFiddle
<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<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">
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark justify-content-end">
<a class="navbar-brand" href="#">Navbar</a>
<a class="navbar-item text-white pr-2" href="#">Home</a>
<a class="navbar-item text-white pr-2" href="#">Link</a>
<div class="dropdown">
<button class="btn text-white dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<button class="btn btn-disabled text-white pr-2" disabled>Disabled</button>
<nav class="navbar navbar-dark bg-dark ml-auto mr-1">
<form class="form-inline">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</nav>
</nav>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>


Found the issue, it was where I had used a container to constrain the nav elements:
<nav class="navbar bg-secondary navbar-dark">
<div class="container">
<nav class="navbar navbar-expand-lg">
You can have nested nav's but shouldn't have nested navbar classes, removing the additional <nav class="navbar"> made everything work:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg bg-secondary navbar-dark">
<div class="container">
<a class="navbar-brand text-white" href="/">Test Site 2</a><button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarMain" aria-controls="navbarMain" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse d-flex" id="navbarMain">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" role="button" id="navbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">View Categories</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<div class="container container-sm">
<div class="row">
<a class="dropdown-item" href="/categories/5cfe472022a68840484a3652" style="white-space: normal;">Category 1</a><a class="dropdown-item" href="/categories/5dc7ff6bac641e2548a9e279" style="white-space: normal;">Category 2</a><a class="dropdown-item"
href="/categories/5dc7ffa1ac641e2548a9e27a" style="white-space: normal;">Category 3</a>
</div>
</div>
</div>
</li>
<li class="nav-item"><a class="nav-link" href="/pages/about-us">About Us</a></li>
<li class="nav-item"><a class="nav-link" href="/pages/contact-us">Contact Us</a></li>
<li class="nav-item"><a class="nav-link" href="/pages/finding-us">Finding Us</a></li>
</ul>
<ul class="navbar-nav">
<li class="nav-item mr-2">
<form class="form-inline" method="get" action="/search">
<div class="input-group input-group-sm mt-1"><input class="form-control" type="search" placeholder="Search..." name="term">
<div class="input-group-append"><button class="btn btn-success" type="submit">Go</button></div>
</div>
</form>
</li>
<li class="nav-item"><a class="nav-link" href="/login">Login / Register</a></li>
</ul>
</div>
</div>
</nav>

Related

My bootstrap 4 dropdown doesn't work and I'm not sure how to resolve it

I'm very new to HTML and have been struggling to get my dropdown to work for a few hours now. I've searched many posts facing similar issues but I still can't find and resolve the issue. I'm unsure if the issue is caused by my scripts as well
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleleapis.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.2/js/bootstrap.min.js"></script>
<header class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#" id="logo">Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
<span class="navbar-toggler-icon"></span>
</button>
<nav class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item"><a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item">
<div class="dropdown">
Dropdown
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
Action
Another action
<div class="dropdown-divider"></div>
Something else here
</div>
</div>
</li>
<li class="nav-item"><a class="nav-link" href="#">Disabled</a></li>
</ul>
</nav>
</header>
Thanks in advance!
I tried replacing data-toggle="dropdown" with data-bs-toggle="dropdown" but it didn't work since I'm using bootstrap 4, copied and pasted the codes directly from bootstrap and it still failed

The CDN isn't working for your jQuery. Bootstrap needs this to run. You get a clue for this in your console, there should be an error saying that it needed jQuery. So you can:
Replace this
https://ajax.googleleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js
With this
https://code.jquery.com/jquery-3.6.1.min.js

You need to add bootstrap jQuery
use this code snippet for done
HTML Code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css">
<title>Hello, world!</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<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>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Bootstrap navbar toggle is not working (expanding)

I am struggling with my navbar that was made out of HTML CSS and Bootstrap. I had followed some tutorials on youtube but I can seem to expand the toggle button when the screen size is reduced to the smallest. Since I'm starting a new project, I applied all of this with HTML CSS, and Bootstrap and opened the HTML file in my local directory. Please help me! I have been stuck for hours.
Below are the codes that I did:
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link rel="stylesheet" href="bootstrap.min.css"/>
<link rel="stylesheet" href="title.css" />
<title>Document</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
<button class="navbar-toggler" data-toggle="collapse" data-target="#collapse_target">
<span class="navbar-toggler-icon></span>
</button>
<div class="collapse navbar-collapse" id="collapse_target">
<a class="navbar-brand>Logo</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link href="#">Link 3</a>
</li>
</ul>
</div>
</nav>
</body>
My results are as below:
I will get the toggler icon as above but I will not be able to click it and get 'Home', 'Categories', 'About', and 'Contact'. I don't know where I did wrong.
Thank you for your time.

You missed JS, their CDN is available in getbootstrap.com
I add two responsive navbar in the following. These codes are used from getbootstrap.com
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<a class="navbar-brand" href="#">Expand at sm</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExample03">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown03" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown03">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-md-0">
<input class="form-control" type="text" placeholder="Search">
</form>
</div>
</nav>
<hr class"m-5">
<nav class="navbar navbar-expand-xl navbar-dark bg-dark">
<a class="navbar-brand" href="#">Expand at xl</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample06" aria-controls="navbarsExample06" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExample06">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown06" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown06">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-md-0">
<input class="form-control" type="text" placeholder="Search">
</form>
</div>
</nav>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
</body>
</html>

Bootstrap requires JavaScript to function properly. You should add the scripts Bootstrap requires. Source: https://getbootstrap.com/docs/4.5/getting-started/introduction/#js
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

It looks like you are missing "type: button" in your button tag as seen below:
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapse_target">

Your problem in Javascript. Please add Boostrap JS into your code.
You can run this code to your page.
Example:
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<title>Document</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light container">
<a class="navbar-brand" href="#">Boostrap</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="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Now<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Can</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Use</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Donate Me</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Searching</button>
</form>
</div>
</nav>
</body>
</html>

Bootstrap 4 navigation bar is not sliding down when clicking the dropdown menu

I'm trying to get the bootstrap 4 navigation bar when toggled, to slide down upon clicking a dropdown menu. It slides when the toggle button is pressed, but then when a dropdown menu is clicked, it just expands normally with no transitioning. Any help or guidance would be greatly appreciated.
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"/>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #122a38;">
<a class="navbar-brand" href="#">
<img src="#" width="80" height="40" alt="">
</a>
<span class="navbar-brand mb-0 h1">Project</span>
<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="navbar-collapse" id="navbarNav" style="height:auto;">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 1</a>
</li>
<li class="nav-item dropdown">
<a class= "nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Projects
</a>
<div class="dropdown-menu animate__animated animate__slideInUp" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Project 1</a>
<a class="dropdown-item" href="#">Project 2</a>
<a class="dropdown-item" href="#">Project 3</a>
<a class="dropdown-item" href="#">See All</a>
</div>
</li>
</ul>
<div class="d-none d-lg-block">
<form class="form-inline">
<div class="input-group input-group-sm mr-sm-2">
<input type="email" class="form-control mr-sm-2" aria-label="Username" type="email" placeholder="Email" aria-label="Email">
<input type="password" class="form-control" aria-label="Password" type="Password" placeholder="Password" aria-label="Password">
</div>
<button class="btn btn-sm btn-success my-2 my-sm-0 mr-sm-2" type="submit">Login/Logout</button>
<button class="btn btn-sm btn-primary my-2 my-sm-0" type="submit">Sign Up</button>
</form>
</div>
<div class="d-block d-lg-none">
<ul class="navbar-nav ">
<li class="nav-item">
<a class="nav-link" href="#">Sign Out/In/Up</a>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>
Sliding Menu
Thanks kindly everyone!
Please see the attached image for reference.
What should happen

i remove the classes .animate__animated .animate__slideInUp from your div wich contains a list
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"/>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #122a38;">
<a class="navbar-brand" href="#">
<img src="#" width="80" height="40" alt="">
</a>
<span class="navbar-brand mb-0 h1">Project</span>
<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="navbar-collapse" id="navbarNav" style="height:auto;">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 1</a>
</li>
<li class="nav-item dropdown">
<a class= "nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Projects
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Project 1</a>
<a class="dropdown-item" href="#">Project 2</a>
<a class="dropdown-item" href="#">Project 3</a>
<a class="dropdown-item" href="#">See All</a>
</div>
</li>
</ul>
<div class="d-none d-lg-block">
<form class="form-inline">
<div class="input-group input-group-sm mr-sm-2">
<input type="email" class="form-control mr-sm-2" aria-label="Username" type="email" placeholder="Email" aria-label="Email">
<input type="password" class="form-control" aria-label="Password" type="Password" placeholder="Password" aria-label="Password">
</div>
<button class="btn btn-sm btn-success my-2 my-sm-0 mr-sm-2" type="submit">Login/Logout</button>
<button class="btn btn-sm btn-primary my-2 my-sm-0" type="submit">Sign Up</button>
</form>
</div>
<div class="d-block d-lg-none">
<ul class="navbar-nav ">
<li class="nav-item">
<a class="nav-link" href="#">Sign Out/In/Up</a>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>

I put data-toggle="collapse" and data-target="#collapsibleNavbar" from button to top tag.
Now, it's working. please have a look at it. it's work same as you want
or not.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark " data-toggle="collapse" data-target="#collapsibleNavbar">
<a class="navbar-brand" href="#">Project</a>
<button class="navbar-toggler bg-dark d-lg-none d-xl-none" type="button" >
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Project 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Project 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Project 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Project 4</a>
</li>
<li class="nav-item ">
<a class="nav-link float-lg-right" href="#">Sign Out/In/Up</a>
</li>
</ul>
</div>
</nav>
</body>
</html>

Why is Navbar Collapse button always showing on my webpage?

<nav class="navbar navbar-expand-lg navbar-expand-md sticky-top">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">Website </a>
<button class="navbar-toggle collapsed " data-toggle="collapse" data-target="#navbarNavDropdown" aria-expanded="false">
<i class="fa fa-bars"></i>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNavDropdown">
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.html"> Home </a>
</li>
<li class="nav-item">
<a class="nav-link" href="link1.html"> Link1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="link2.html"> Link2</a>
</li>
</ul>
</div>
</div>
</nav>
The button which is supposed to show up only when window is resized to small size, is always showing on the right of the Website name. It is looking ugly in fullscreen, that is, while viewing in computer mode. I want to remove it from showing in high resolution devices. Tell me where am I making mistake.

Because the correct class name for the Bootstrap 4 Navbar is navbar-toggler, not navbar-toggle.
<nav class="navbar navbar-light navbar-expand-lg navbar-expand-md sticky-top">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">Website </a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarNavDropdown" aria-expanded="false">
<i class="fa fa-bars"></i>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNavDropdown">
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.html"> Home </a>
</li>
<li class="nav-item">
<a class="nav-link" href="link1.html"> Link1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="link2.html"> Link2</a>
</li>
</ul>
</div>
</div>
</nav>
https://www.codeply.com/go/9uKT2H0EgP

Only use class navbar-expand-sm if you want the icon to show up only on narrow viewports. Find an overview in the documentation. Also you use a wrong class for the hamburger icon: class="navbar-toggler", like
Zim already said.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<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">
<title>Hello, world!</title>
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<a class="navbar-brand" href="#">Expand at sm</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExample03">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="https://example.com" id="dropdown03" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown03">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-md-0">
<input class="form-control" type="text" placeholder="Search">
</form>
</div>
</nav>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

Twitter bootstrap v4: Vertically aligning breadcrumb element with navbar content

I have the below code snippet where in my navbar I have tried to include a breadcrumb with dropdown elements. I am trying to align the breadcrumb with the other elements of my navbar.
Please note: The below code snippet loads in mobile viewport which is fine - however, in col-lg and larger, the breadcrump element isn't vertically aligned with the other elements (i.e. navbar-brand and form-inline).
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<body>
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse fixed-top">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand py-0" href="#">EXAMPLE</a>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<ol class="nav-item breadcrumb">
<li class="nav-item py-0 breadcrumb-item nav-item py-0">Level 0</li>
<li class="breadcrumb-item dropdown">
<a class="breadcrumb-itemnav-link dropdown-toggle" href="#" id="Level1Dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Level 1</a>
<div class="dropdown-menu" aria-labelledby="Level1Dropdown">
<a class="dropdown-item" href="http://www.example.com/Level1a">Level 1a</a>
<a class="dropdown-item" href="http://www.example.com/Level1b">Level 1b</a>
<a class="dropdown-item" href="http://www.example.com/Level1c">Level 1c</a>
</div>
</li>
<li class="breadcrumb-item dropdown">
<a class="breadcrumb-itemnav-link dropdown-toggle" href="#" id="Level2Dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Level 2</a>
<div class="dropdown-menu" aria-labelledby="Level2Dropdown">
<a class="dropdown-item" href="http://www.example.com/Level2a">Level 2a</a>
<a class="dropdown-item" href="http://www.example.com/Level2b">Level 2b</a>
<a class="dropdown-item" href="http://www.example.com/Level2c">Level 2c</a>
</div>
</li>
<li class="breadcrumb-item dropdown">
<a class="breadcrumb-itemnav-link dropdown-toggle" href="#" id="Level3Dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Level 3</a>
<div class="dropdown-menu" aria-labelledby="Level3Dropdown">
<a class="dropdown-item" href="http://www.example.com/Level3a">Level 3a</a>
<a class="dropdown-item" href="http://www.example.com/Level3b">Level 3b</a>
<a class="dropdown-item" href="http://www.example.com/Level3c">Level 3c</a>
</div>
</li>
</ol>
</ul>
<li class="nav-item py-0 active"><a class="nav-link" href="http://www.example.com/Button1">Button1</a></li>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search..." aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
<li class="nav-item py-0"><a class="nav-link" href="http://www.example.com/admin:index">Admin</a></li>
</div>
</nav>
</body>