Double Navigation with hidden SideNav & fixed Navbar Issue


Topic: Double Navigation with hidden SideNav & fixed Navbar Issue

brianacinc asked 6 years ago

Looking for a fixed top nav bar and a hidden side nav. This works well on a smaller resolution but on larger screens the "breadcrumb" hamburger is hidden. How do I get the hamburger icon and sidenav slide-out to stay and work on the larger screen?

We are doing this.... // SideNav Initialization $(".button-collapse").sideNav({ closeOnClick: true });


Marta Szymanska staff pro premium answered 6 years ago

Hi,

if this layout https://mdbootstrap.com/snippets/jquery/mdbootstrap/105292 isn't right for you, then, please, provide a demo in the snippet showing the problem here: https://mdbootstrap.com/snippets/. I need to know more details so that I can help you.

Best, Marta


siepmannj pro answered 6 years ago

Hi,

same problem here. Checked for 4.7.6

Digging the css:

.double-nav .button-collapse {
  position: absolute;
  left: 10px;
  font-size: 1.5rem; }
  @media (min-width: 1440px) {
    .double-nav .button-collapse {
      display: none; } }  **<-- Button hidden in this media query**
  @media (max-width: 1440px) {
    .double-nav .button-collapse {
      display: block;
      position: relative;
      font-size: 1.4rem;
      margin-right: 10px;
      margin-left: 10px; } }

Why is the button hidden? Is it bug or feature ? :-)

thanx in advance,

jan


Marta Szymanska staff pro premium answered 6 years ago

Hi,

this is a feature, for screens bigger than 1440px a side-nav appears and a button-collapse is visible only for smaller devices.

Best, Marta


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.6.1
  • Device: Laptop
  • Browser: Chrome
  • OS: Ubuntu
  • Provided sample code: No
  • Provided link: No