Dropdown floating inside navbar when navbar is collapsed

Topic: Dropdown floating inside navbar when navbar is collapsed

kelvin muchiri free asked 5 years ago

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

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 free 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

Add comment

Arkadiusz Idzikowski staff answered 5 years ago

0 0 Best answer

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; }

@ak.leimrey

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.

<p>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.</p>

<p>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. </p>

Please insert min. 15 characters.

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 free 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 free 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; }

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB Angular
MDB Version: 8.0.0
Device: Laptop
Browser: Chrome
OS: MacOs
Provided sample code: Yes
Provided link: Yes

kelvin muchiri

5Support score
1Questions 0Answers 0Snippets