Problem with navbar dropdowns and sticky-top


Topic: Problem with navbar dropdowns and sticky-top

jouvrard pro asked 5 years ago

Hello,

I have a problem with navbar dropdowns with a "sticky-top" and "fixed-top" navbar. In these cases, I have a scrollbar on the right when I clic on a dropdown after clicking on the hamburger menu.

It's the same problem in your example: https://mdbootstrap.com/snippets/jquery/mdbootstrap/102472

If you reduce the window width, clic on the hamburger menu, and on "dropdown", the dropdown menu is hidden and you need to scroll to see it.

Thanks,

Jerome Ouvrard


Marta Szymanska staff pro premium answered 5 years ago

Hi,

this is a normal behavior of dropdown because dropdown is fixed. How would you like to dropdown behave?

Best, Marta


COTIGA answered 5 years ago

HIHave the same problemproblem-dropdown-with-sticky-top

To regain normal bootstrap behavior

@media (max-width: 991px) {
    .navbar .dropdown-menu {
        position: static !important;
    }
}
@media (max-width: 767px) and (min-width: 400px), (max-width: 850px) and (min-width: 800px) {
    .navbar.fixed-top .navbar-collapse, .navbar.sticky-top .navbar-collapse {
        /* max-height: 340px; */
        max-height: initial;
    }
}

Marta Szymanska staff pro premium answered 5 years ago

Hi,

in our documentation here: https://mdbootstrap.com/snippets/jquery/mdbootstrap/102472 there is no hidden scrollable dropdown. Which version of MDB do you have @COTIGA? Would you paste here a link to your demo? We will inspect the problem and try to fix this as soon as possible.

Best, Marta


COTIGA answered 5 years ago

Hi Marta,

Thank you for your interest in the problem

In your example, if I activate Dropdown and resize the page under 1222px, I have the same problem. Starting from 1223px, it is correct

There are several resolutions where the bug appears and / or disappears


Marta Szymanska staff pro premium commented 5 years ago

Hi,

OK, now I understand the issue. We will fix that as soon as possible.

Best, Marta


poomkawin answered 5 years ago

Hi,

I have the same issue with the dropdown menu on the navbar. The dropdown is working fine on desktop and small phone. However, when it comes to larger phone or tablet, the dropdown is hidden inside the navbar. I have to scroll the navbar to see the contents of the dropdown.

On desktop, the dropdown is working as expect.Desktop

The dropdown is also working as expect on small phone.Small Phone

However, the dropdown menu is hidden inside the navbar on large phone and tablet.Large Phone

Need to scroll the navbar to see the contents.Large Phone, Scroll

Is there any method is fix this issue without falling back to the normal Bootstrap behaviours?


Marta Szymanska staff pro premium answered 5 years ago

Hi,

would you paste here a link to your snippet? Because in mine here: https://mdbootstrap.com/snippets/jquery/marta-szymanska/1106168?view=project I don't see this problem.

Best, Marta


poomkawin answered 5 years ago

Hi Marta,

The issue also exists in one of your examples.https://mdbootstrap.com/snippets/jquery/mdbootstrap/102472 On desktop and small mobile device, the dropdown is working fine.However, on tablet (10.5" iPad Pro in portrait orientation) and larger mobile device (on a plus-size iPhone) the dropdown is hidden inside the navbar, as the screenshots I posted earlier.


Marta Szymanska staff pro premium commented 5 years ago

Hi,

this solution was needed tor fixed and sticky navbar because when you have more content in the navbar and the navbar is fixed to the top, you can't scroll down and see a collapsed dropdown.

Best, Marta


Marta Szymanska staff pro premium commented 5 years ago

But we will fix this in the nearest release which will be on Monday 02.09.


poomkawin answered 5 years ago

Hi Marta,

I just got a chance to test the new version of the MDB (4.8.9).The dropdown is working as expected now.Thank you for the fix.


Marta Szymanska staff pro premium commented 5 years ago

Hi,

You're welcome.

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: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.8.5
  • Device: All
  • Browser: All
  • OS: Windows
  • Provided sample code: No
  • Provided link: Yes