Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I speed up the mobile dropdown in the Bootstrap navbar?

On the mobile phone, there is a dropdown menu on the navbar. But it is far too slow.

Is it JQuery based? Or is it CSS transition based? How do I speed it up?

like image 872
TIMEX Avatar asked Oct 15 '14 09:10

TIMEX


People also ask

Is bootstrap navbar responsive?

Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse JavaScript plugin. Navbars are hidden by default when printing. Force them to be printed by adding .

How can create hover dropdown in bootstrap?

Answer: Use the jQuery hover() method By default, to open or display the dropdown menu in Bootstrap you have to click on the trigger element. However, if you want to show the dropdown on mouseover instead of click you can do it with little customization using the CSS and jQuery.

Which of the following bootstrap classes are used to add a dropdown menu?

The . dropdown class indicates a dropdown menu. To open the dropdown menu, use a button or a link with a class of . dropdown-toggle and the data-toggle="dropdown" attribute.

What does navbar expand LG do?

A standard navigation bar is created with the .navbar class, followed by a responsive collapsing class: .navbar-expand-xl|lg|md|sm (stacks the navbar vertically on extra large, large, medium or small screens). To add links inside the navbar, use a <ul> element with class="navbar-nav" .


1 Answers

It is CSS transition based, try changing the height value from the transition property of this class.

.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  -webkit-transition: height .35s ease;
       -o-transition: height .35s ease;
          transition: height .35s ease;
}
like image 99
Tim Avatar answered Oct 12 '22 14:10

Tim