MDB Bootstrap Support


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>

Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • 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