Topic: jQuery Navbar Collapse different heights
twentyfour pro asked 6 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°
Add comment
Jakub Strebeyko staff answered 6 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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Answered
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