.
. .
.
.
(
*
) .
(
*) .
(
*
) .
(
*
)
.
(
*
) .
.
.
.
.
.
.
.
.
.
.
.
.
. . . . . . . . . . . . . . . . . . . . . . . (* ) . . . . . . . . . . . Asked(* ) .(* )today .(* ) . (* )Watched(* ) . 24 times . 0(* )I am making use of Bootstrap 5 to develop a site. I am attempting to develop a navbar dropdown that opens up on hover on a desktop computer and also when it is clicked it takes the customer to a brand-new web page on the website. On mobile I just desire the customer to be able to click to open up and also shut the dropdown I do not desire them to be required to a various web page. Right now what I have is a dropdown that opens up on hover and also causes an additional web page on desktop computer. On mobile, when the dropdown is clicked it does not result in an additional web page however when you click the dropdown to open it you can not shut it. I understand you require to make use of JavaScript to repair this I developed an occasion audience to shut the dropdown but also for some factor it is not functioning.
Desktop/Laptop Dropdown Capability
Opens/closes on hover when it is clicked it causes an additional web page Mobile/Tablet Dropdown Capability Does not result in an additional web page.
#navbar- shade {
background-color: hsl( 210, 45%, 30%);}
. navbar-light. navbar-toggler-icon {background-image: link(” information: image/svg + xml,% 3csvg xmlns=” http://www.w3.org/2000/svg “viewBox=’ 0 0 30 30’% 3e% 3cpath stroke=” rgba% 28255, 255, 255, 1% 29″ stroke-linecap=’ round’ stroke-miterlimit=” 10″ stroke-width=” 2″ d=’M 4 7h22M4 15h22M4 23h22’/% 3e% 3c/svg% 3e”);
}
. navbar-light. navbar-toggler {
boundary: 1px strong hsl( 0, 0%, 100%);
rundown: none;
box-shadow: none;
}
#nav _ item {
setting: family member;
}
. dropdown: hover.dropdown-menu {
display screen: block;
background-color: hsl( 210, 45%, 30%);
}
. dropdown-item: float {
background-color: hsl( 210, 55%, 41%);
}
@media display and also (max-width: 576px) {
. dropdown: float >>. dropdown-menu {
display screen: block;
margin-top: 0;
}
} <.
<< html lang=" en">
<> < head>>.
<< meta charset=" utf-8"/>>.
<< meta name=" viewport" web content=" size= device-width, initial-scale= 1.0"/>>.
<< title>> Residence|<. <
