Bootstrap navbar dropdown with hover animation effect
Get 700+ Material components for the latest Bootstrap 5 for free. This component is also available as ready-to-use solution in MDB UI Kit.
Learn more about Bootstrap Dropdown here, or download MDB Free version with 700+ components here.
By default bootstrap 5 does not support hover. But most developers prefer to show dropdown on hover state with animation. When you hover over dropdown item, it dropdown-submenu fades up or fades down with animation.
Steps to create bootstrap navbar hover animation menu
- It is better to create hover effect only for desktop screens. That's why we use Media query.
@media all and (min-width: 992px) { // CSScode } - Add
display:block;to dropdown-menu - Hide dropdown-menu with
opacity: 0; visibility: hidden;and change position before it appears, for extop:250%;or addtransform - Now make menu visible when mouse hovers on
nav-itembychanging opacity:1; visibility:visible; - Change final position to
top:100%;when mouse hovers onnav-item. Add some transition - Note: bootstrap has
margin-topondropdown-menuelements. Remove it by adding margin-top:0
Here are basic code examples
Back to all examples