Topic: jQuery Navbar Collapse different heights

twentyfour pro asked 5 years ago

Hi all, I want to change the height of the .navbar-collapse as well as the .navbar itself. But if I add: .navbar .navbar-collapse { height: 65px; } .navbar { height: 45px; } then the transition effect is not working smoothly anymore. And after a few hours of searching, I gave up. Does anyone has a solution or any advice (besides: sleep more)? Thanks, 24°

Jakub Strebeyko staff answered 5 years ago

Hi there, 24°! Please do sleep more, but also note, that, firstly, what changes navbar's "height" is the .top-nav-collapse class, and therefore this is where you should apply some funky styling to see it when the page gets scrolled. Secondly, but what is perhaps more important, at least in terms of animation fluency - please note that what changes with the above mentioned CSS class is not actually navbar's "height" property, but its padding-top and padding-down. This is what the transition targets - changing a different property without adding appropriate CSS transition to it shall grant no animating goodies for anyone. Hope what you achieve with this knowledge will reward you with some sweet sleep, longevity and prosperity in the long run. With Best Regards, Kuba

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.5.10
  • Device: Macbook Pro
  • Browser: Chrome
  • OS: Mac osX
  • Provided sample code: No
  • Provided link: No