Topic: MDB Bootstrap Support
erikmjacobs asked 6 years ago
I am using the sidenav and am trying to make the hamburger (nav button) sticky on narrow viewports.
https://mdbootstrap.com/snippets/jquery/erikmjacobs/247800
If I wrap the nav button in a "sticky"-tagged div, it disappears, because the "sticky" class has a "display none" somewhere.
If I change the "sticky" div class to some other name (eg: stickystuff) and add the following Javascript, nothing sticky happens:
$(function () {
$(".stickystuff").sticky({
topSpacing: 90
, zIndex: 2
});
});
I actually don't want a stopper because I want everything on the page to scroll and I'd like the hamburger to always be visible.
That being said, I also need to ensure that the hamburger / nav button doesn't have a width that is the entire viewport, because if a link ends up at the top of the screen it can be "under" the effective width and look clickable but not be clickable.
I hope this makes sense!
Update: I copied the sticky example into its own snippet and it doesn't work, either:
https://mdbootstrap.com/snippets/jquery/erikmjacobs/247838
Bartłomiej Malanowski staff pro premium answered 6 years ago
Please try my snippet: https://mdbootstrap.com/snippets/jquery/bartek-malanowski/248701
erikmjacobs commented 6 years ago
Sticky now works, however the links I added cannot be clicked when they are at the top of the screen. In fact, even when the normal sidebar is visible, if you scroll the window down slightly the link becomes "covered" by the div and cannot be clicked.
https://mdbootstrap.com/snippets/jquery/erikmjacobs/249872
Bartłomiej Malanowski staff pro premium answered 6 years ago
@erikmjacobs replace:
<div class="sticky-content"><a href="#" data-activates="slide-out" class="btn btn-primary p-3 button-collapse"><i class="fas fa-bars"></i></a></div>
with:
<div><a href="#" data-activates="slide-out" class="btn btn-primary p-3 button-collapse sticky-content"><i class="fas fa-bars"></i></a></div>
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.5.15
- Device: laptop
- Browser: chrome
- OS: Linux (Fedora 29)
- Provided sample code: Yes
- Provided link: Yes