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
Related
I'm recreating the mac OS navbar and would like to resize the navbar height, and the text size (to around 12px). It's the very first time I'm using bootstrap so any help would be amazing, please. Also, let me know about where I could find information about how to use bootstrap other than their website.
<body>
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa-solid fa-power-off"></i>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">About ziko OS</a>
<a class="dropdown-item" href="#">Settings</a>
<a class="dropdown-item" href="#">Log out</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
File</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Open</a>
<a class="dropdown-item" href="#">Close Window</a>
<a class="dropdown-item" href="#">Get info</a>
<a class="dropdown-item" href="#">Move to trash</a>
<a class="dropdown-item" href="#">Find</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Edit</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Undo</a>
<a class="dropdown-item" href="#">Redo</a>
<a class="dropdown-item" href="#">Cut</a>
<a class="dropdown-item" href="#">Copy</a>
<a class="dropdown-item" href="#">Paste</a>
<a class="dropdown-item" href="#">Select All</a>
<a class="dropdown-item" href="#">Emojis & Symbols</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Help</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">ziko OS help</a>
<a class="dropdown-item" href="#">Search</a>
</div>
</li>
</ul>
</div>
</nav>
</body>
Basically you need to add css height to navbar class.
<style>
.navbar{ height: 48px;}
.navbar a{font-size:12px;}
</style>
Please check this codepane Demo
I have a simple navbar in which is there are multiple items i just need to center and make the last div to end.
My code
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul class="navbar-nav ms-auto mt-2 mt-lg-0 justify-content-center">
<li class="nav-item">
<a class="nav-link" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">WHO WE ARE</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
WHAT WE DO
</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 dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
MEDIA
</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" href="#">CONTACT</a>
</li>
</ul>
<div class="form-inline my-2 my-lg-0">
<div class="dropdown drp-user" ngbDropdown placement='auto'>
<a href="javascript:" ngbDropdownToggle data-toggle="dropdown">
<i class="icon feather icon-settings"></i>
</a>
<div class="dropdown-menu dropdown-menu-right profile-notification" ngbDropdownMenu>
<div class="pro-head">
<img src="assets/images/user/avatar-2.jpg" class="img-radius" alt="User-Profile-Image">
<span>{{userTitle}}</span>
<a href="javascript:" class="dud-logout" title="Logout" (click)="logout()">
<i class="feather icon-log-out"></i>
</a>
</div>
<ul class="pro-body">
<li *ngIf="user?.userTypeId == this.userTypeIdEnum.ADMIN"><a href="javascript:" class="dropdown-item"
routerLink="/manageprofile"><i class="feather icon-user"></i> Manage Profile</a></li>
<li><a href="javascript:" class="dropdown-item" routerLink="/auth/change-password"><i
class="feather icon-lock"></i> Change Password</a></li>
</ul>
</div>
</div>
</div>
</div>
In image i have marked red item which i need to do center if i am wrapping it to div then its not showing in a row.
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>
I have created a header , with inside a navbar
I would like to have an element wihich become a dropdown-menu. But I don't understand why is not appearing my item.
I see on the link, that it seem easy:
https://getbootstrap.com/docs/4.0/components/navs/
Pills with dropdowns
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<header>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<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 class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
<header>
ITEC-EP
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html">Applications<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="wiki.html">Wiki</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<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 class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
</ul>
</div>
I dont have any error message.
When i click to my drop down menu, nothing happens. The inner element are not appearing.
I am trying to not use css, but only bootstrap. I chosed to use this template:
https://bootswatch.com/materia/
What am I mistaking?
In the future how can i debug in the developer mode in mozilla?
I imagine the issue is not having the correct javaScript packages installed. I had this when I first used Bootstrap, and I was missing popper.js
<ul class="nav navbar-nav">
<li class="nav-item-dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
SLIDES
</a>
<div class="dropdown-menu" aria-labelledby="Preview">
<a class="dropdown-item" href="#">Événements Importants</a>
<a class="dropdown-item" href="#">Rappels des bonnes pratiques</a>
<a class="dropdown-item" href="#">Ecran Sonar</a>
</div>
</li>
<li class="nav-item-dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
BANDEAU
</a>
<div class="dropdown-menu" aria-labelledby="Preview">
<a class="dropdown-item" href="#">Rappel CRA</a>
<a class="dropdown-item" href="#">Visite Client</a>
<a class="dropdown-item" href="#">Nouvelle version</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">POP-UP</a>
</li>
</ul>
Here's my code
The problem is that there's no padding, is it normal ? Here's a picture of what it renders :
http://img4.hostingpics.net/pics/248061Screenshotfrom20160804155752.png
Other problem is that it can display you 2 links on the same line :/
I fail to make your dropdown work, but you can add some padding to your a elements like this:
In HTML:
...
<a class="dropdown-item pad15" href="#">Événements Importants</a>
...
In CSS:
.pad15 {
padding: 15px;
}
It is very simple, but I guess it is what you are looking for.
UPDATE: Without CSS file
...
<a class="dropdown-item" style="padding:15px;" href="#">Événements Importants</a>
...