<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="#">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>
New to bootstrap. Here's the code based on the Bootstrap example. Right now the dropdown shows up but you're not able to click on the dropdown itself. I want to be able to make all the parent nav links work. Similar to this website: https://eastcfashion.com/
Where clicking on for example: men's collection brings you to all the collection for that area. But the dropdown menu, you're able to just go on specific items.
I'm trying to implement it in a way that the main parent nav would say Projects. and the dropdown menu for projects would show specific pages for each project like project 1, project 2, etc. But clicking on Projects would take you to a page where project 1, project 2, and the collection of projects would be showing as a group and not individually.
jQuery(function($) {
if ($(window).width() > 769) {
$('.navbar .dropdown').hover(function() {
$(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function() {
$(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp();
});
$('.navbar .dropdown > a').click(function() {
location.href = this.href;
});
}
});
#media only screen and (min-width:769px) {
.dropdown:hover .dropdown-menu {
display: block;
}
.dropdown-submenu {
position: relative !important;
}
.dropdown-submenu>.dropdown-menu {
top: 0 !important;
left: 100% !important;
margin-top: -6px !important;
margin-left: -1px !important;
border-radius: 0 !important;
}
.dropdown-submenu:hover>.dropdown-menu {
display: block !important;
}
.dropdown-submenu>a:after {
display: block;
content: "\f105";
font-family: 'FontAwesome';
margin-top: -18px;
right: 15px;
position: absolute;
font-weight: 300;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://v4-alpha.getbootstrap.com/dist/js/bootstrap.min.js"></script>
<link href="https://v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" 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>
<a class="navbar-brand" href="#">Navbar</a>
<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="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<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-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
The easiest way to do it is by deleting the "data-toggle" attribute from the parent element!
edit: thx for the tip, here is a code example:
I changed this:
<a class="p-2 text-dark dropdown-toggle" data-toggle="dropdown" style="font-size:1.25rem;" href= {% url 'link' %}>Link</a>
to this:
<a class="p-2 text-dark dropdown-toggle" style="font-size:1.25rem;" href= {% url 'link' %}>Link</a>
so, in essence, I simply deleted the data toggle attribute and thus converted a hoverable dropdown into a hoverable dropdown with a clickable parent link.
I tried to keep the code simple. My solution is to detect the second click on the dropdown button/link and follow the link at that point.
$('.navbar .dropdown > a').click(function() {
if (!$(this).hasClass("parent-clicked")) {
$(this).addClass("parent-clicked");
} else {
location.href = this.href;
}
});
This works in the collapsed view as well.
I took Joe's answer and improved it to my needs
/*
* Only go to the link when dropdown is already open (if the dropdown is a link)
*/
$('.navbar ul.navbar-nav > .dropdown > a[href]').click(function() {
var dropdown = $(this).next('.dropdown-menu');
/*
* The dropdown can be non-existent
* The dropdown can be already open by css
* (for instance display: block from a custom :hover setting)
* or a "show" class on the element which also sets a display: block;
*/
if (dropdown.length == 0 || $(dropdown).css('display') !== 'none') {
if (this.href) {
location.href = this.href;
}
}
});
The Bootstrap 4 html for this is
<header class="navbar">
<ul class="nav navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link" href="/planning" data-toggle="dropdown">
Planning
</a>
<ul class="dropdown-menu">
<li class="dropdown-item">
Day planning
</li>
</ul>
</li>
</ul>
</header>
Clickable dropdown link in Bootstrap 4
I hide the original dropdown triangle icon and make a new plus icon because the original icon is very small and made with pseudo-class :after, it's hard for user to point the cursor and click it.
So the parent href link will work as normal but when user click on plus icon it will open the dropdown.
/* -----------------------------------------------------------------------
Make Bootstrap dropdown "a" link clickable
But when clicking plus icon, show the dropdown
--------------------------------------------------------------------------- */
function clickableDropdownLink() {
if (window.matchMedia("(max-width: 992px)").matches) {
const dropdownToggle = $('.navbar .dropdown > a');
dropdownToggle.append('<span class="dropdown-icon"></span>');
dropdownToggle.removeAttr('data-toggle');
$('.navbar .dropdown > a').click(function(e) {
e.preventDefault();
if ((e.target.tagName == 'A')) {
const route = $(this).attr("href");
window.location.href = route == '/' || route == '#' ? window.location.href : route;
return;
}
})
const dropdownIcon = $('.navbar .dropdown > a > span.dropdown-icon');
dropdownIcon.click(function() {
const parentLink = $(this).parent("a.nav-link");
parentLink.parent(".nav-item").toggleClass("show");
parentLink.next(".dropdown-menu").toggle();
})
}
}
clickableDropdownLink();
/* ------------------------------------------------------------------------------------
This is optional, this could make your app slower
If you want to make a dropdown link clickable after user resizing screen, you can add this. This could make your app slower
----------------------------------------------------------------------------------------- */
$(window).resize(function() {
clickableDropdownLink();
})
/* ------------------------------------------------------------------------------------
This is optional
If you also want the dropdown link work in Desktop size.
----------------------------------------------------------------------------------------- */
if (window.matchMedia("(min-width: 992px)").matches) {
$('.navbar .dropdown > a').click(function() {
location.href = this.href;
});
}
.dropdown .dropdown-icon{
display: none;
position: absolute;
padding: 15px;
background: #fff;
right: 10px;
top: 8px;
}
.dropdown .dropdown-icon:before{
transition: all ease 0.5s;
background: #444;
height: 2px;
width: 16px;
top: 14px;
left: 7px;
content: "";
position: absolute;
}
.dropdown .dropdown-icon:after{
transition: all ease 0.5s;
background: #444;
content: "";
height: 16px;
left: 14px;
position: absolute;
top: 7px;
width: 2px;
}
.dropdown.show .dropdown-icon:after{
transform:rotate(-90deg);
}
.dropdown.show .dropdown-icon:before{
transform:rotate(-180deg);
}
.navbar .dropdown .dropdown-toggle .dropdown-icon{
display:none;
}
#media(max-width:992px){
.navbar .dropdown .dropdown-toggle::after{
display:none;
}
.navbar .dropdown .dropdown-toggle .dropdown-icon{
display:block;
}
.navbar .dropdown .dropdown-menu .dropdown-item{
white-space:pre-wrap;
}
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Clickable Dropdown Link</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css'><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<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 dropdown">
<a class="nav-link dropdown-toggle" href="https://www.google.com" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown1
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action 1</a>
<a class="dropdown-item" href="#">Another action 1</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here 1</a>
</div>
</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="https://www.google.com" 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="#">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>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.1/umd/popper.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js'></script><script src="./script.js"></script>
</body>
</html>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
This snippet toggles the dropdown but on click event and href is used to toggle the dropdown menu. So According to your need -
Redirect href to the general project page and add hover event to display the dropdown menu using jquery or CSS.To display the Dropdown menu just add open class to <li class="nav-item dropdown">
Using CSS,
Using Jquery
Here is my solution. The idea is to detect the area that the user clicked on the dropdown button/link and redirect to that url.
// clickable dropdown menu parent
$('.navbar .dropdown > a').on('click', function(e) {
let elementBegin = $(this).offset()['left']; // get link position X
// get the width of the menu by text's length
// you need to contain the text inside a span tag
let spanWidth = $(this).find("> span").width();
let clickAreaLength = spanWidth * 0.9; // 90% of width = clickable area
let clickPositionX = e.pageX; // position of the click
// if click position is inside the clickable area, then redirect
if (clickPositionX < elementBegin + clickAreaLength) {
location.href = this.href;
}
});
This works in the collapsed view (mobile) as well.
//Fix bootstrap dropdown parent click
let clicked = 0;
document.querySelector('.dropdown-toggle').addEventListener('click',(e)=>{
clicked++;
if(clicked > 1 && e.target.classList.contains('show')){
location.href = e.target.href
clicked = 0;
}
})
Simple javascript only solution, second click on parent will redirect to location IF dropdown contains the open class.
Related
I have a navbar it works well on large screens but on a small screen but when open collapse and scroll down navbar be disappearing and when scrolling up navbar appears with the open collapse
now how can stop the navbar when collapsing open
you can check the code from here: https://codepen.io/El7raq/pen/abwZORa
HTML
<nav class="navbar smart-scroll navbar-expand-lg navbar-light">
<div class="container">
<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 m-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="#">Product</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./business-unit.html">Business Unit</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./business-partners.html">Business Partners</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">
Solutions
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="./zoom.html">Zoom</a></li>
<li><a class="dropdown-item" href="./jabra.html">Jabra</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">News & Events</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="#">Login</a>
</li>
</ul>
</div>
</div>
</nav>
CSS
body {
height: 1000px;
}
.smart-scroll{
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 1030;
}
.scrolled-down{
transform:translateY(-100%); transition: all 0.5s ease-in-out;
}
.scrolled-up{
transform:translateY(0); transition: all 0.5s ease-in-out;
}
JS
$('body').css('padding-top', $('.navbar').outerHeight() + 'px')
// detect scroll top or down
if ($('.smart-scroll').length > 0) { // check if element exists
var last_scroll_top = 0;
$(window).on('scroll', function() {
scroll_top = $(this).scrollTop();
if(scroll_top < last_scroll_top) {
$('.smart-scroll').removeClass('scrolled-down').addClass('scrolled-up');
}
else {
$('.smart-scroll').removeClass('scrolled-up').addClass('scrolled-down');
}
last_scroll_top = scroll_top;
});
}
In .scrolled-down class, the transform CSS property has an attribute of translateY(-100%). This implies scrolling up by 100% of the rendered height of nav bar .smart-scroll. Thus, the implementation would work as expected when the nav-bar is horizontal but fail when the nav-bar is vertical (on smaller screen widths) as the rendered height is much larger than the line height.
Solution:
JS
$(window).on('scroll', function() {
scroll_top = $(this).scrollTop();
if(scroll_top < last_scroll_top) {
$('.smart-scroll').removeClass('scrolled-down').addClass('scrolled-up');
}
else {
var upOffset = $('.navbar-brand').height; //Added code
$('.scrolled-down').css('transform', 'upOffset'); //Added code
$('.smart-scroll').removeClass('scrolled-up').addClass('scrolled-down');
}
last_scroll_top = scroll_top;
});
CSS
.scrolled-down{
/*transform:translateY(-100%); Remove this property*/
transition: all 0.5s ease-in-out;
}
The .navbar-brand class references to the navbar icon and is the closest to the line height of nav bar. Thus, the above implementation works well in a responsive environment.
I try to add active class to a menu when I click on its sub-menu. I have menu bootstrap menu below.
// active navigation
const currentLocation = location.href;
const menuItem = document.querySelectorAll('.nav-link');
const menuLength = menuItem.length;
for (let i = 0; i < menuLength; i++) {
if (menuItem[i].href === currentLocation) {
menuItem[i].classList.add("active");
}
}
.active {
color: #FF0000;
border-bottom: 2px solid #FF0000;
}
<ul class="navbar-nav m-auto">
<li class="nav-item ">
<a class="nav-link active" href="index.html">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
About
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item " href="about.html">About me</a>
<a class="dropdown-item" href="myportfolio.html">My portfolio</a>
<a class="dropdown-item" href="contact.html">Contact</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="demo.html">Demo</a>
</li>
</ul>
I want to make a parent menu active even I click on its sub-menu and redirect to any page.
Anyone can help, please?
You need to add a click event using addEventListener...
const dropdown = document.querySelector("#navbarDropdownMenuLink");
const dropdownItem = document.querySelectorAll(".dropdown-item");
for (let i = 0; i < dropdownItem.length; i++) {
dropdownItem[i].addEventListener("click", function() {
dropdown.classList.add("active");
});
}
.active {
color: #FF0000;
border-bottom: 2px solid #FF0000;
}
<ul class="navbar-nav m-auto">
<li class="nav-item ">
<a class="nav-link active" href="index.html">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
About
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item " href="#">About me</a>
<a class="dropdown-item" href="#">My portfolio</a>
<a class="dropdown-item" href="#">Contact</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Demo</a>
</li>
</ul>
Some useful resources
.addEventListener() Documetation
click event Documetation
I suppose you want to activate the menu that contains the link of the location after reload/redirect of the page after a click within the menu. This should do that (the snippet 'fakes' location). The comparison of links to the current location is done using the URL api.
// active navigation
const fakeLocation = new URL("/myportfolio.html", "https://example.com/").pathname;
// ^ this would be location.pathname in your code
// loop the menu-li's
document.querySelectorAll('li.nav-item')
.forEach(link => {
const links = [...link.querySelectorAll("a")];
// ^ find all links within the menu
link.classList.remove("active");
// ^remove all 'active'
links.forEach(lnk => lnk.classList.remove("active"));
// ^ remove all 'active' from a.href too
const shouldBeActive = links.find(lnk =>
new URL(lnk.href).pathname === fakeLocation);
// ^ find the href (path) that equals the current path
// note: to find the path of lnk we use the URL api
// if element is found, 'activate' the href and the parent li
if (shouldBeActive) {
shouldBeActive.classList.add("active");
shouldBeActive.closest("li").classList.add("active");
}
});
.active {
color: #FF0000;
border-bottom: 2px solid #FF0000;
background-color: #eee;
}
<base href="https://example.com/">
<ul class="navbar-nav m-auto">
<!-- currently active -->
<li class="nav-item active">
<a class="nav-link active" href="index.html">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
About
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item " href="about.html">About me</a><br>
<a class="dropdown-item" href="myportfolio.html">My portfolio</a><br>
<a class="dropdown-item" href="contact.html">Contact</a><br>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="demo.html">Demo</a>
</li>
</ul>
I have a bootstrap 4 dropdown menu that expands (toggles) on hover instead of a click. On a click a link is followed. (I know, this is bad practice). Now I am trying to achieve that on touch-enabled devices, the link is never followed and on a click or touch the dropdown is toggled.
I have managed to disable the link, but I can't seem to toggle the menu. This is what I tried:
JS
var button = jQuery('.btn-dropdown-link');
if ('ontouchstart' in window) {
button.click(function (e) {
e.preventDefault();
console.log('clicked / touched');
jQuery('#dropdownMenuButton').dropdown('toggle'); // this does not work?
});
}
HTML
<ul>
<li class="btn dropdown" id="dropdownMenuButton" aria-haspopup="true" aria-expanded="false">
<a class="btn btn-dropdown-link dropdown-toggle" href="/com">some link</a>
<ul class="dropdown-menu" id="dropdownDonateMenu" aria-labelledby="dropdownMenuButton">
<li>example</li>
<li>example</li>
<li>example</li>
</ul>
</li>
</ul>
CSS
.dropdown:hover > .dropdown-menu {
max-height: 500px;
opacity: 1;
}
.dropdown .dropdown-menu {
transition: all 0.3s;
max-height: 0;
display: block;
overflow: hidden;
opacity: 0;
min-width: 100%;
}
Or a live example on codeply.
How can I toggle the dropdown when I use e.preventDefault(); to block the link?
Edit: I have to use JS
You can add the :active on css on the same place you have the :hover
and on the HTML you can simply remove the href
something like this on the CSS:
.dropdown::active > .dropdown-menu, .dropdown::active > .dropdown-menu {
max-height: 500px;
opacity: 1;
}
and on the HTML you can simply remove the
You can do that using d-**-none and d-**-block on the break point which you wanna show
.dropdown:hover>.dropdown-menu {
display: block;
width: fit-content;
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.1/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>
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown" style="cursor:pointer">
<a class="nav-link d-none d-sm-none d-md-none d-lg-block dropdown-toggle" id="navbarDropdown3" data-hover="dropdown" aria-haspopup="true" aria-expanded="false" href="/com">dropdown</a>
<a class="nav-link d-lg-none dropdown-toggle" id="navbarDropdown3" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="/com">dropdown</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown3">
<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>
</ul>
I have a navbar at the top of my page, and I am able to apply the hover effect onto all my items on the bar except the one with the icon on it.
When I type the code into the terminal the CSS effect does come in but the hover effect doesn't work. Also, using any CSS pseudo selectors didn't help at all.
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="C:\Users\Anon\Desktop\CVWebsite\cv.html"><span>Home</span> <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="C:\Users\Anon\Desktop\CVWebsite\cvAbout.html"><span>About</span></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">
<span>Portfolio</span>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Professional</a>
<a class="dropdown-item" href="#">Personal</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="C:\Users\Anon\Desktop\CVWebsite\cvContact.html"><span class=""><i class="far fa-paper-plane" style="margin-right: 0.5rem;"></i>Contact</span></a>
</li>
</ul>
var par=document.querySelectorAll(".nav-link");
var partext=document.querySelectorAll(".nav-link span");
for (var j=0;j<par.length;j++){
par[j].addEventListener("mouseenter",function () {
// this.style.backgroundColor= "red";
this.classList.toggle("hoverlendin");
});
par[j].addEventListener("mouseleave",function () {
// this.style.backgroundColor= "red";
this.classList.toggle("hoverlendin");
});
partext[j].addEventListener("mouseenter",function () {
// this.style.backgroundColor= "red";
this.classList.toggle("navlinktext");
});
partext[j].addEventListener("mouseleave",function () {
// this.style.backgroundColor= "red";
this.classList.toggle("navlinktext");
});
.navlinktext{
text-decoration-color: white;
color: white;
font-size: 1.5rem;
}
.hoverlendin{
background-color: lightcoral;
}
Home, About and Portfolio items change background and text color as expected, however Contact item only changes background, the text remmains the same. What I am doing wrong?
querySelectorAll count was getting mismatched due to the two spans under .nav-link in first element.
Please find the correct version of code below.
var par=document.querySelectorAll(".nav-link");
var partext=document.querySelectorAll(".nav-link span");
for (var j=0;j<par.length;j++){
par[j].addEventListener("mouseenter",function () {
// this.style.backgroundColor= "red";
this.classList.toggle("hoverlendin");
});
par[j].addEventListener("mouseleave",function () {
// this.style.backgroundColor= "red";
this.classList.toggle("hoverlendin");
});
partext[j].addEventListener("mouseenter",function () {
// this.style.backgroundColor= "red";
this.classList.toggle("navlinktext");
});
partext[j].addEventListener("mouseleave",function () {
// this.style.backgroundColor= "red";
this.classList.toggle("navlinktext");
});
}
.navlinktext {
text-decoration-color: white;
color: white;
font-size: 1.5rem;
}
.hoverlendin {
background-color: lightcoral;
}
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="C:\Users\Anon\Desktop\CVWebsite\cv.html"><span class="linkSpan">Home <p class="sr-only" style="display:inline-block;margin:0;">(current)</p></span> </a>
</li>
<li class="nav-item">
<a class="nav-link" href="C:\Users\Anon\Desktop\CVWebsite\cvAbout.html"><span class="linkSpan">About</span></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">
<span class="linkSpan">Portfolio</span>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Professional</a>
<a class="dropdown-item" href="#">Personal</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="C:\Users\Anon\Desktop\CVWebsite\cvContact.html"><span class="linkSpan"><i class="far fa-paper-plane" style="margin-right: 0.5rem;"></i>Contact</span></a>
</li>
</ul>
</div>
This question already has answers here:
Bootstrap align navbar items to the right
(24 answers)
Closed 4 years ago.
can you please tell me how to align dropdown right in bootstrap + angular ?
here is my code
https://stackblitz.com/edit/angular-4risp3?file=src%2Fapp%2Fapp.component.html
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Recipe Book</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 header_nav">
<li class="nav-item ">
<a class="nav-link" href="#">Recipes </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Shopping List</a>
</li>
<li class="nav-item dropdown float-right">
<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">
Save Data
Fetch Data
</div>
</li>
</ul>
</div>
</nav>
Try this
.float-right {
padding: 0;
float: right;
position: relative;
}
Remove the dropdown li from this current ul and after the ul add another ul as follow:
<ul class="navbar-nav mr-right header_nav">
<li class="nav-item dropdown my-2 my-lg-0">
<a aria-expanded="false" aria-haspopup="true" class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="navbarDropdown" role="button"> Dropdown </a>
<div aria-labelledby="navbarDropdown" class="dropdown-menu">Save DataFetch Data</div>
</li>
</ul>
I made the changes in chrome developers tools, so please remove the extra items that came while copying... Or you can just take the dropdown li and after the ul wrap the dropdown li with another ul like this:
<ul class="navbar-nav mr-right header_nav">