When the navbar in the collapsed mode (mobile), and you click the hamburger menu, the navigation opens up (expands) at rate determined by a Bootstrap CSS class called .collapsing
So, for example, if you add the following code to your custom CSS,
.collapsing { transition: 1s; }
you will find that when you open the navbar with the hamburger menu, it will now open (expand) much more slowly than normal.
However (and this is what has me stumped) if you have a dropdown menu in your navigation, and you click it when you’ve changed the collapsing class, the speed at which the dropdown menu will expand to show the links within is not affected. It opens instantaneously.
I am trying to figure out what class (if any) controls the speed of this aspect of the navigation component. I’ve tried every class associated with the dropdown, and come up with zilch. I’m wondering if it may need to be done through javascript/jquery, but it must be possible because the Bootstrap Accordion component uses the same method to show the accordion contents, and it does it over the span of about .3s
Any thoughts my Bootstrap gurus?
I think the reason that there is no default transition for the dropdown is that it uses the popper.js.
Since positioning the popups is most important as you can set it to open above, below, to the right, to the left and also add offsets - setting a default transition would just mean changes every time someone chose a new position location. This does leave it up to you to add your own transition though, probably using visibility or opacity transitions or keyframe animations. There are numerous examples out there…
I have no trouble changing the effect or speed of how the drop-down menu in the navbar displays, at either desktop or mobile sizes.
What I am talking about is the speed at which the background… the actual navbar itself, expands BELOW the dropdown. Perhaps this animation will help clarify. Be patient and watch it all the way through…
I shall take a look at it. I currently use CSS to control my menu effects because it’s lighter-weight and easier than JS. And also, because I’m a total noob with JS, and only use it as a last resort. (pathetic, I know.)
For example, here’s how I currently make nice, fading dropdowns on most of my websites:
.dropdown-menu {
display: block;
visibility: hidden;
opacity: 0;
transform: translateY(-10px);
transition: all .5s;
height: 0;
}
.dropdown-menu.show {
display: block;
visibility: visible;
opacity: 1;
transform: translateY(0px);
transition: all .5s;
height: auto;
}
The height rule isn’t really necessary on desktop navigation, but I keep it in there because I sometimes use this code on mobile, which then requires some additional CSS that needs the height declaration.
