I'm trying to use a dropdown menu and include both signup and signin pages in it, but it doesnt work with me, the dropdown is not dropping down, even if I add a link in the ( <a class="nav-link dropdown-toggle" href="#" ....) it doesnt do anything... I appreciate your help in advance.
<--! Code: -->
<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">
Sign-in / Sign-up
</a>
<div class="dropdown-menu drop" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="LoginPage.php">Sign-in</a>
<a class="dropdown-item" href="Signup.php">Sign-up</a>
<div class="dropdown-divider"></div>
</div>
</li>
Related
example photo sidebar
I looking for solution for create sidebar like on above photo.
photo2
After click icon sidebar then display menu.
I have somelike this but I need to add extra menu after click like first screen:
https://www.codeply.com/p/yRugA2FB3I
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
Dropdown link
</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>
</li>
Put this as dropdown list, try to edit css of the dropdown item.
or use this as well:
<!-- Default dropright button -->
<div class="btn-group dropright">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropright
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
it is the element of bootstrap 4 that do dropdown on the right.
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
This is the code to my nav bar. The list items all click through fine to their respective pages, but actually clicking on the nav bar titles for each page doesn't allow for clicking through to the entire page (I created a work around when testing by adding the homepages for each section in the list, but obviously don't want that).
<container-fluid>
<!-- Navigation add new page links to the href and replace #-->
<nav class="navbar navbar-expand-lg navbar-light bg-light" id="navbar-corrie">
<a class="navbar-brand" href="./main.html">
<!--connect to landing page-->
<img src="./images/Logo.png" width="100" height="100" class="d-inline-block align-top" alt="" />
</a>
<button class="navbar-toggler" type="button" href="#" 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 mt-2 mt-lg-0 ">
<li class="nav-item dropdown">
<a class="nav-link active dropdown-toggle" href="./main.html" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Home
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="./main.html">Home</a>
<a class="dropdown-item" href="#introduction">Introduction</a>
<a class="dropdown-item" href="#introduction">Mission</a>
<a class="dropdown-item" href="#audience">Audience</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link active dropdown-toggle" href="./resources.html" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Resources
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="./resources.html">Resources</a>
<a class="dropdown-item" href="#needhelp">Need Help Now?</a>
<a class="dropdown-item" href="#mrusupports">MRU Supports & Services</a>
<a class="dropdown-item" href="#accessibility">Accessibility</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link active dropdown-toggle" href="./campusstructure.html" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Campus Structure
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="./campusstructure.html">Campus Structure</a>
<!--This is page location ex: ./pagename.html-->
<a class="dropdown-item" href="#supportchannels">Systematic Support Channels</a>
<!-- This is section location call id name ex: #sectionIDName-->
<a class="dropdown-item" href="#healthpolicies">Health Policies</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link active dropdown-toggle" href="./studentsupport.html" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Student Support
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="./studentsupport.html">Student Support</a>
<a class="dropdown-item" href="#earlyindicators">Early Indicators</a>
<a class="dropdown-item" href="#crisismanagement">Crisis Management</a>
<a class="dropdown-item" href="#selfhelp">Self-Help</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link active dropdown-toggle" href="./research.html" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Research
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="./research.html">Research</a>
<a class="dropdown-item" href="#">Students & Mental Health</a>
</div>
</li>
</ul>
</div>
</nav>
Good morning community
I am building my first application in Django and I have a problem with the navbar. The "login link" placed in the navbar does go to the URL when I click on it. The links that are on the dropdown menu work just fine. Any hints?
Hereunder is my code,
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://127.0.0.1:8000/login" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Login
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="http://127.0.0.1:8000/logout">Logout</a></li>
<li><a class="dropdown-item" href="{% url 'simple_investing:register' %}">Register</a>
</ul>
</li>
<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>
...