Develop Reference

Bootstrap 5 dropdown open on hover and click to go to new url

has anybody got a way to make a bootstrap 5 dropdown nav open on hover but then also go to another page on click as well.
for example my dropdown looks like this:
<a class="nav-link dropdown-toggle" href="/category/mens" data-bs-toggle="dropdown">Mens</a>
And using the CSS to make it open on hover
.dropdown:hover .dropdown-menu {
display: block;
margin-top: 0;
}
On hover the dropdown opens a megamenu which shows the list of categories but I also want the user to click on the dropdown text to go to the main category page if that makes sense. but even know I have a href it does not go to that page because of data-bs-toggle, Any help would be appreciated.

In case you still haven't found an answer, here's what you need to do:
In the dropdown parent anchor element, change data-bs-toggle="dropdown" to data-bs-hover="dropdown". That's it. Now your parent link will work, too.
However, the data-bs-toggle attribute is needed for the dropdown to work on mobile devices (small resolution screens), so I my solution is to use jQuery to restore it on smaller screens like this:
$(document).ready(function() {
if($(window).width() <= 831) {
$(".nav-link.dropdown-toggle").removeAttr("data-bs-hover");
$(".nav-link.dropdown-toggle").attr("data-bs-toggle", "dropdown");
}
});

I just add this code in my css
.dropdown:hover>.dropdown-menu {
display: block;
}
.dropdown>.dropdown-toggle:active {
/*Without this, clicking will make it sticky*/
pointer-events: none;
}

If You Want to show dropdown on hover in bootstrap then you need to visit here here is very easy way to do that . there are less number of code of css and your issue will fix and if yout want to go to new url you should add attriute target="_blank" in anchor tag.
https://www.youtube.com/watch?v=owdqNLzII38

Styling buttons in Webix Web skin

For my app, I use the Webix with the 'web' skin. I'm trying to customize the button's background when the button is:
hovered
clicked (when the mouse button still pressed)
just focused
I use the corresponding CSS-slectors:
.mouseover button:active {
background:#d7dff7;
border-color:#d7dff7;
}
.mouseover button:focus{
background:#e2d7f7;
border-color:#e2d7f7;
}
.mouseover button:hover{
background:#c2cae0;
border-color:#c2cae0;
}
The only thing I cannot reach is the active selector. In the below sample, try to click on any button and you'll see the default gray background:
http://webix.com/snippet/a5687eff
I thought it should be the class of the clicked button, but it's not working and I'm stuck with this. Any help is appreciated.

The css selector ".webixtype_base:active" has "background: #dedede!important;" in webix.css. That is why your background style for ".mouseover button:active" is being overridden.
You simply have to add "!important" so that your background style can take precedence.
See here: http://webix.com/snippet/1ee67de2

JQuery animation and z-index are not working correctly

I am trying to make two panels which can be opened and closed by two buttons.
FIDDLE
All is working fine, when I do like this:
Open red panel.
Open green panel.
Close red panel.
In this case red panel is hiding behind green during animation.
But when I do like this:
Open green panel.
Open red panel.
Close green panel.
The green panel always in front of red panel during animation.
But the first opened panel has z-index: 9 and the second opened one has z-index: 10.
Please, help me to solve the problem.

The reason why it goes above it is due to the html. the red was created before the green so the only way to make them animate 'underneath' each other every time would be to edit the z-index programmatically through the if statements
In the if statements just change z-index :
if ($messengerPanel.hasClass('open')) {
sidebarPanelClose($messengerPanel);
$("#green").css("z-index", "1");
} else {
sidebarPanelOpen($messengerPanel);
$("#green").css("z-index", "10");
}
Same for red too ...
Updated fiddle : http://jsfiddle.net/rcotjr5y/4/

check whether it will work
include in css
.open-first{
z-index:-1 !important;
}
.open{
z-index:1;
}

Bootstrap navbar showing border after modal popup have been hidden

I use Bootstrap in my Rails app, in it I have a navbar that contains some elements. When I press one of these elements I present a modal popup. When I close this popup, the clicked element for some reason gets highlighted. This isn't the experience I'm looking for.
See image below:
I wonder how I can get rid of this unwanted effect?

Without you supplying us with a Fiddle, it is very hard for us to determine what is going on exactly.
Although, from your image, it seems as if it is just 'focus'. Below is an image from the Bootstrap website, and it features one of their 'default' buttons. On the left is the button in its original state, and on the right is the button after I have clicked on it and it is in 'focus'. Chrome, by default (created by their 'user agent stylesheet') places this light blue border around elements once they are focused.
To remove the border for all fields you can use the following:
*:focus {
outline: none;
}
To remove the border for selected fields just apply this class to the input fields you want:
.nohighlight:focus {
outline:none;
}

*:focus
{
outline: none;
}
this is work like a charm

drop-down menu disrupts other tags

I'm working on a navigation bar with a drop-down menu (will add another one later). When the drop-menu is pressed, it shifts all nav links to the right. Desired behavior is all nav links are static. I tried using fixed on the div with an absolute css on the li tags but I.E. would render the li tags outside of the parent div.
My current implementation is using float:left but this isn't producing expected results either. The drop-down menu is the one labeled "Solace". Any help or suggestions are appreciated. I have created a demo which illustrates my problem. http://jsfiddle.net/xbB4M/1/.
Also, a side-question. If this warrants a new post, just let me know, and I will open a new question. Whenever a user clicks the drop-down menu, how can I listen for the next mouse click to close the drop-down menu?

If you give your .menu class an absolute position it should stop the other menu items from sliding over to the right. As for your second question if you check the working example I added another click event handler for the menu items and if they are clicked it will close the menu.
Give this a try:
.menu {
margin-top:10px;
background-color:#17406B;
position: absolute;
}
Working Example: http://jsfiddle.net/fewds/xbB4M/5/