I am trying to make a Bootstrap navbar that will display the items that can be seen in the code. All of my other links work and take me to their respected pages, but whenever I hit the dropdown in the navbar nothing happens. It is the dropdown portion that I can not get to work and I am not sure what else I need to add. Any help will be greatly appreciated.
This is Bootstrap5
<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #4f2fb6;">
<a class="navbar-brand" href="#">GCU</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"></button>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="tando.html">Course Matrix</a>
</li>
<li class="nav-item">
<a class="nav-link" href="media.html">Media</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Topics
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#topic1" data-bs-toggle="collapse">Topic 1</a></li>
<li><a class="dropdown-item" href="#topic2" data-bs-toggle="collapse">Topic 2</a></li>
<li><a class="dropdown-item" href="#topic3" data-bs-toggle="collapse">Topic 3</a></li>
<li><a class="dropdown-item" href="#topic4" data-bs-toggle="collapse">Topic 4</a></li>
<li><a class="dropdown-item" href="#topic5" data-bs-toggle="collapse">Topic 5</a></li>
<li><a class="dropdown-item" href="#topic6" data-bs-toggle="collapse">Topic 6</a></li>
<li><a class="dropdown-item" href="#topic7" data-bs-toggle="collapse">Topic 7</a></li>
</ul>
</li>
</ul>
</div>
</nav>
Related
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/static/nav.css"> <!—secondary bootstrap code—!>
<link rel="stylesheet" href="/static/bootstrap.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js"></script> </head>
<body>
<header>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="/link">Link</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
<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="/link">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Link</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="/link">Paid Services</a></li>
<li><a class="dropdown-item" href="/link">Flash Documentation</a></li>
<li><a class="dropdown-item" href="/link">SMS Bomb</a></li>
<li><a class="dropdown-item" href="/link">MDickie Projects</a></li>
<li><a class="dropdown-item" href="/link">BxPP</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Link</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="/link">Link</a></li>
<li><a class="dropdown-item" href="/link">Link</a></li>
<li><a class="dropdown-item" href="/link">Link</a></li>
<li><a class="dropdown-item" href="/link">Link</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Link</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="/link">Link</a></li>
<li><a class="dropdown-item" href="/link">Link</a></li>
<li><a class="dropdown-item" href="/link">Link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
</body>
</html>
Hello community of Stackoverflow. This bootstrap header doesn't dropdown on mobile devices. I have the JS and CSS, and I really don't know what do. Can someone help? Replace the "/" with atproducts.xyz since it triggered the spam filter.
The issue is in your local css. I've replace this rows
<link rel="stylesheet" href="/static/nav.css"> <!—secondary bootstrap code—!>
<link rel="stylesheet" href="/static/bootstrap.css">
With the official bootstrap CDN and it works.
So your page should be
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css">
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="/link">Link</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
<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="/link">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Link</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="/link">Paid Services</a></li>
<li><a class="dropdown-item" href="/link">Flash Documentation</a></li>
<li><a class="dropdown-item" href="/link">SMS Bomb</a></li>
<li><a class="dropdown-item" href="/link">MDickie Projects</a></li>
<li><a class="dropdown-item" href="/link">BxPP</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Link</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="/link">Link</a></li>
<li><a class="dropdown-item" href="/link">Link</a></li>
<li><a class="dropdown-item" href="/link">Link</a></li>
<li><a class="dropdown-item" href="/link">Link</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Link</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="/link">Link</a></li>
<li><a class="dropdown-item" href="/link">Link</a></li>
<li><a class="dropdown-item" href="/link">Link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
I've also moved the script at the bottom, before the body closing .
Add the following code to your <head> tag and it will work. Also do not download the single file of bootstrap instead download the whole bootstrap and then include it in your project.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
...
</head>
Also move the bootstrap JS link to the end of your <body> tag.
<body>
...
<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</body>
Bootstrap 5 navbar is used to create dropdown menu.
How to hightlight current menu item above opened dropdown like is windows desktop application so that user can see menu item where opened dropdown belongs.
Bootstrap 5 does not provide any highlight:
How to make Dropdown2 background lighter or darker or provide other indication if its drowndown is opened ?
Navbar
<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown1
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#"><u>A</u>ction</a></li>
<li><a class="dropdown-item" href="#">A<u>n</u>other action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#"><u>S</u>omething else here</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown2
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#"><u>A</u>ction</a></li>
<li><a class="dropdown-item" href="#">A<u>n</u>other action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#"><u>S</u>omething else here</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown3
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#"><u>A</u>ction</a></li>
<li><a class="dropdown-item" href="#">A<u>n</u>other action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#"><u>S</u>omething else here</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Testcase is in https://www.codeply.com/p/2U6C3qPw2x
Bootstrap 5, ASP.NET 6 MVC are used. Latest Jquery is also installed.
When clicked on dropdown is adding a .show class automaticaly, you can use this selector and define a style:
.nav-link.dropdown-toggle.show{
background:orange;
}
show result
I am building a website application for a final course using Flask on an IDE.
I have a layout.html which I am borrowing as part of other html pages as well.
I have an issue with my submenu where only one href is clickable on the website and leads to the required html page, whereas the second href just return back to the index while having 302 redirection(seen on the debugger).
All the other links in my menu are working flawlessly, but I can't get to solve the issue.
Here is part of my layout.html
<nav class="navbar navbar-expand-md navbar-dark bg-dark border">
<a class="navbar-brand" href="/"><span class="red">Stock Portfolio Manager</span></a>
<button aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbar" data-toggle="collapse" type="button">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar">
{% if session.user_id %}
<ul class="navbar-nav mr-auto mt-2">
<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">
Portfolio
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/quote">Quote</a>
<a class="dropdown-item" href="/buy">Buy</a>
<a class="dropdown-item" href="/sell">Sell</a>
<a class="dropdown-item" href="/history">History</a>
</div>
</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">
Build a Portfolio
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="/about">About</a></li>
<li><a class="dropdown-item" href="/build">Build</a></li>
<div class="dropdown-divider"></div>
<li class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" data-toggle="dropdown" href="#">User Guide</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="/expected returns">Expected Returns</a></li>
<li><a class="dropdown-item" href="/risk models">Risk Models</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul class="navbar-nav ml-auto mt-2">
<li class="nav-item"><a class="nav-link" href="/logout">Log Out</a></li>
</ul>
{% else %}
<ul class="navbar-nav ml-auto mt-2">
<li class="nav-item"><a class="nav-link" href="/register">Register</a></li>
<li class="nav-item"><a class="nav-link" href="/login">Log In</a></li>
</ul>
{% endif %}
</div>
</nav>
The href="/risk models" does the issues here but it's not because risk models.html has issues, because if I insert it instead of href="/expected returns" it will work fine.
Any help will be appreciated.
I wanted to add a droplist to the 4th element in my navbar .
Under "ESPACE PARTICULIER" I need to get 2 options .
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">A PROPOS NOUS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">COURS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">SERVICES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ESPACE PARTICULIER</a>
</li>
<li class="nav-item">
<a class="button-highlight" href="#">Sign in</a>
</li>
</ul>
</div>
You are using Bootstrap so it's easy to do it Jus take alook in this Bootstrap Dropdown
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">A PROPOS NOUS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">COURS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">SERVICES</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">ESPACE PARTICULIER</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="button-highlight" href="#">Sign in</a>
</li>
</ul>
</div>
You need to look at the manual
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<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 active" aria-current="page" href="#">A PROPOS NOUS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">COURS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">SERVICES</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">ESPACE PARTICULIER</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
I am trying to get a full-width dropdown on a bootstrap 4 navbar. I am using a standard boot4 Navbar.
This is the navbar I am using
Here is how I need it to look :
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="index.html">Start Bootstrap</a>
<button class="navbar-toggler navbar-toggler-right" 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 class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="services.html">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownPortfolio" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Portfolio
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownPortfolio">
<a class="dropdown-item" href="portfolio-1-col.html">1 Column Portfolio</a>
<a class="dropdown-item" href="portfolio-2-col.html">2 Column Portfolio</a>
<a class="dropdown-item" href="portfolio-3-col.html">3 Column Portfolio</a>
<a class="dropdown-item" href="portfolio-4-col.html">4 Column Portfolio</a>
<a class="dropdown-item" href="portfolio-item.html">Single Portfolio Item</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownBlog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Blog
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownBlog">
<a class="dropdown-item" href="blog-home-1.html">Blog Home 1</a>
<a class="dropdown-item" href="blog-home-2.html">Blog Home 2</a>
<a class="dropdown-item" href="blog-post.html">Blog Post</a>
</div>
</li>
<li class="nav-item dropdown show">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownBlog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Other Pages
</a>
<div class="dropdown-menu dropdown-menu-right show" aria-labelledby="navbarDropdownBlog">
<a class="dropdown-item" href="full-width.html">Full Width Page</a>
<a class="dropdown-item" href="sidebar.html">Sidebar Page</a>
<a class="dropdown-item" href="faq.html">FAQ</a>
<a class="dropdown-item" href="404.html">404</a>
<a class="dropdown-item" href="pricing.html">Pricing Table</a>
</div>
</li>
</ul>
</div>
</div>
Replace your class container with container-fluid
Delete ml-auto from navbar-nav