Topic: Dropdown floating inside navbar when navbar is collapsed
I have added fixed-top class on the navbar. The dropdown is floating inside the navbar in mobile devices (You have to scroll down inside the navbar to access the dropdown. When I remove the class fixed-top, the dropdown is floating above the navbar, the behaviour I want.
I have tried the solution here, https://mdbootstrap.com/support/angular/fixed-navigation-drop-down-menu-right-out-of-screen/ but it doesn't seem to work.
Here is my code
HTML
<!--Navbar-->
<mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark primary-color fixed-top">
<!-- Navbar brand -->
<mdb-navbar-brand><a class="navbar-brand" [routerLink]="['/']">Navbar</a></mdb-navbar-brand>
<!-- Collapsible content -->
<links>
<!-- Links -->
<ul class="navbar-nav mr-auto">
<li *ngIf="isLoggedIn" class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}">
<a
routerLink="/my-orders"
class="nav-link waves-light"
mdbWavesEffect>My Orders</a>
</li>
<li *ngIf="isLoggedIn" class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}">
<a
routerLink="/order"
class="nav-link waves-light"
mdbWavesEffect>Order</a>
</li>
</ul>
<!-- Links -->
<ul class="navbar-nav">
<li *ngIf="!isLoggedIn" class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}">
<a
routerLink="/sign-in"
class="nav-link waves-light"
mdbWavesEffect>Sign In</a>
</li>
<li *ngIf="!isLoggedIn" class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}">
<a
routerLink="/sign-up"
class="nav-link waves-light"
mdbWavesEffect>Sign Up</a>
</li>
<!-- Dropdown -->
<li *ngIf="isLoggedIn" class="nav-item dropdown" dropdown>
<a dropdownToggle mdbWavesEffect type="button" class="nav-link dropdown-toggle waves-light" mdbWavesEffect>
<mdb-icon fas icon="user"></mdb-icon> Account<span class="caret"></span></a>
<div *dropdownMenu class="dropdown-menu dropdown-menu-right dropdown dropdown-primary" role="menu">
<a routerLink="/logout" class="dropdown-item waves-light" mdbWavesEffect>Log out</a>
</div>
</li>
</ul>
</links>
<!-- Collapsible content -->
</mdb-navbar>
<!--/.Navbar-->
Screenshots
https://i.stack.imgur.com/CJnLA.png
https://i.stack.imgur.com/YiqJX.png
Please use this styles as a workaround for now, we will fix that as soon as possible.
.fixed-top .navbar-collapse { max-height: auto !important; overflow-y: hidden !important; }
Do you use custom component because of some problems with mdb-navbar? If you have any ideas how we can improve our component and would like to share them, then we will be very grateful.
ak.leimrey pro commented 5 years ago
mdb-navbar has been, sadly, one of the easily most frustrating components to me. Customizing it works only to a certain degree, but is never truly enough to adapt it to specific UI Guidelines that companies come up with. A few technical issues with the navbar once were, that it basically required a navbar brand, because it determined the height of the navbar. Also, my own implementation is more flexible and less prone to visual glitches after a rework of SCSS rules. Also, the hamburger menu has no animation, something that many pages don't do that often anymore, since an appropriate animation does provide great visual feedback. The navbar is great, if you're making pages for smaller clients with easy requirements, but the more specific it gets, it's quickly outpaced by the requirements of the project.
Don't get me wrong though, I have customers that LOVE - for example - your filterable select component. In one of my projects it's basically the first thing they do to get a task done. I feel the smaller and specialized your components are, the more general use you can draw from them, but Navbar isn't one of them.
Arkadiusz Idzikowski staff commented 5 years ago
Thank you for sharing you thoughts about the mdb-navbar. Currently we have many tasks with higher priority, but we will definitely check if we can somehow improve this component to make customization easier.
kelvin muchiri commented 5 years ago
@Arkadiusz Idzikowski That did not work for me.
Arkadiusz Idzikowski staff commented 5 years ago
@kelvin muchiri did you upgrade your version to 8.2.0? Or if you still use 8.0.0 - where did you add the styles I provided in the answer? They should work correctly when placed in global styles.scss file.
kelvin muchiri commented 5 years ago
@Arkadiusz Idzikowski I am using 8.0.0. Actually, the text disappears. Take a look https://imagizer.imageshack.com/v2/735x254q90/r/921/mCtLF6.png
Arkadiusz Idzikowski staff commented 5 years ago
What resolution is that? Could you try to use this styles instead, or upgrade to 8.2.0?
.fixed-top .navbar-collapse { max-height: auto !important; overflow: visible !important; }
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 Angular
- MDB Version: 8.0.0
- Device: Laptop
- Browser: Chrome
- OS: MacOs
- Provided sample code: No
- Provided link: Yes
ak.leimrey pro commented 5 years ago
While I love MDB, the header isn't among my favorite components, that's why I made my own component in my newest project. However, in this particular case it looks like it's a bug, because I have attempted similar ideas in older versions and I had no such problems. My one project is running on MDB 7.2.0
kelvin muchiri commented 5 years ago
Yep.. noticed it was a bug. I tried one of the navbars examples provided https://mdbootstrap.com/docs/angular/navigation/navbar/, and just added the fixed-top class but the issue still came up