Topic: How to add a logo at the bottom in a mdb-sidenav

fferdinan pro asked 3 years ago


Hi there, How to add a logo in the bottom in a mdb-sidenav, please see the picture

Thanks a lot.

Regards.

Fernando Torresenter image description here

enter image description here


fferdinan pro answered 3 years ago


Hi Grzegorz, I tried your suggestion but It did works, This is my code:

    <logo>
        <!-- Logo -->
        <li>
            <div class="logo-wrapper waves-light">
                <a href="#">
                    <!-- ../../../assets/img/angular-mdb.png -->
                    <img src="/assets/logo.png" class="img-fluid flex-center">
                </a>
            </div>
        </li>
        <!--/. Logo -->
    </logo>

    <links>
        <!--Social-->
        <li>
            <ul class="social d-flex">
                <li>
                    <a class="icons-sm fb-ic">
                        <mdb-icon fab icon="facebook-f" class="mr-1"></mdb-icon>
                    </a>
                </li>
                <li>
                    <a class="icons-sm pin-ic">
                        <mdb-icon fab icon="pinterest-p" class="mr-1"> </mdb-icon>
                    </a>
                </li>
                <li>
                    <a class="icons-sm gplus-ic">
                        <mdb-icon fab icon="google-plus-g" class="mr-1"> </mdb-icon>
                    </a>
                </li>
                <li>
                    <a class="icons-sm tw-ic">
                        <mdb-icon fab icon="twitter" class="mr-1"></mdb-icon>
                    </a>
                </li>
            </ul>
        </li>
        <!--/Social-->
        <!--Search Form-->
        <li>
            <form class="search-form" role="search">
                <div class="form-group md-form waves-light" mdbWavesEffect>
                    <input type="text" class="form-control" placeholder="Search">
                </div>
            </form>
        </li>
        <!--/.Search Form-->
        <!-- Side navigation links -->
        <li>
            <ul class="collapsible collapsible-accordion">
                <mdb-squeezebox [multiple]="false" aria-multiselectable="false">

                    <mdb-item>
                        <mdb-item-head mdbWavesEffect>
                            <mdb-icon fas icon="tachometer-alt" class="mr-1"></mdb-icon> Dashboards
                        </mdb-item-head>
                        <mdb-item-body>
                            <ul>
                                <li>
                                    <a routerLink="dashboards/v1" class="waves-effect" mdbWavesEffect>Version 1</a>
                                </li>
                                <li>
                                    <a routerLink="dashboards/v2" class="waves-effect" mdbWavesEffect>Version 2</a>
                                </li>
                                <li>
                                    <a routerLink="dashboards/v3" class="waves-effect" mdbWavesEffect>Version 3</a>
                                </li>
                                <li>
                                    <a routerLink="dashboards/v4" class="waves-effect" mdbWavesEffect>Version 4</a>
                                </li>
                                <li>
                                    <a routerLink="dashboards/v5" class="waves-effect" mdbWavesEffect>Version 5</a>
                                </li>
                            </ul>
                        </mdb-item-body>
                    </mdb-item>
                    <mdb-item>
                        <mdb-item-head mdbWavesEffect>
                            <mdb-icon fas icon="camera" class="mr-1"></mdb-icon> Pages
                        </mdb-item-head>
                        <mdb-item-body>
                            <ul>
                                <li>
                                    <a routerLink="pages/login" class="waves-effect" mdbWavesEffect>Login</a>
                                </li>
                                <li>
                                    <a routerLink="pages/register" class="waves-effect" mdbWavesEffect>Register</a>
                                </li>
                                <li>
                                    <a routerLink="pages/pricing" class="waves-effect" mdbWavesEffect>Pricing</a>
                                </li>
                                <li>
                                    <a routerLink="pages/lock" class="waves-effect" mdbWavesEffect>Lock screen</a>
                                </li>
                                <li>
                                    <a routerLink="pages/single-post" class="waves-effect" mdbWavesEffect>Single
                                        post</a>
                                </li>
                                <li>
                                    <a routerLink="pages/post-listing" class="waves-effect" mdbWavesEffect>Post
                                        listing</a>
                                </li>
                                <li>
                                    <a routerLink="pages/customers" class="waves-effect"
                                       mdbWavesEffect>Customers</a>
                                </li>
                            </ul>
                        </mdb-item-body>
                    </mdb-item>
                    <mdb-item>
                        <mdb-item-head mdbWavesEffect>
                            <mdb-icon fas icon="user" class="mr-1"></mdb-icon> Profiles
                        </mdb-item-head>
                        <mdb-item-body>
                            <ul>
                                <li>
                                    <a routerLink="profiles/profile1" class="waves-effect" mdbWavesEffect>Version
                                        1</a>
                                </li>
                                <li>
                                    <a routerLink="profiles/profile2" class="waves-effect" mdbWavesEffect>Version
                                        2</a>
                                </li>
                                <li>
                                    <a routerLink="profiles/profile3" class="waves-effect" mdbWavesEffect>Version
                                        3</a>
                                </li>
                            </ul>
                        </mdb-item-body>
                    </mdb-item>
                    <mdb-item>
                        <mdb-item-head mdbWavesEffect>
                            <mdb-icon fab icon="css3" class="mr-1"></mdb-icon> CSS
                        </mdb-item-head>
                        <mdb-item-body>
                            <ul>
                                <li>
                                    <a routerLink="css/grid" class="waves-effect" mdbWavesEffect>Grid system</a>
                                </li>
                                <li>
                                    <a routerLink="css/utilities" class="waves-effect" mdbWavesEffect>Utilities</a>
                                </li>
                                <li>
                                    <a routerLink="css/icons" class="waves-effect" mdbWavesEffect>Icons</a>
                                </li>
                                <li>
                                    <a routerLink="css/images" class="waves-effect" mdbWavesEffect>Images</a>
                                </li>
                                <li>
                                    <a routerLink="css/typography" class="waves-effect"
                                       mdbWavesEffect>Typography</a>
                                </li>
                                <li>
                                    <a routerLink="css/colors" class="waves-effect" mdbWavesEffect>Colors</a>
                                </li>
                                <li>
                                    <a routerLink="css/shadow" class="waves-effect" mdbWavesEffect>Shadow</a>
                                </li>
                            </ul>
                        </mdb-item-body>
                    </mdb-item>
                    <mdb-item>
                        <mdb-item-head mdbWavesEffect>
                            <mdb-icon fas icon="th-large" class="mr-1"></mdb-icon> Components
                        </mdb-item-head>
                        <mdb-item-body>
                            <ul>
                                <li>
                                    <a routerLink="components/buttons" class="waves-effect"
                                       mdbWavesEffect>Buttons</a>
                                </li>
                                <li>
                                    <a routerLink="components/cards" class="waves-effect" mdbWavesEffect>Cards</a>
                                </li>
                                <li>
                                    <a routerLink="components/panels" class="waves-effect" mdbWavesEffect>Panels</a>
                                </li>
                                <li>
                                    <a routerLink="components/lists" class="waves-effect" mdbWavesEffect>List
                                        groups</a>
                                </li>
                                <li>
                                    <a routerLink="components/pagination" class="waves-effect" mdbWavesEffect>Pagination</a>
                                </li>
                                <li>
                                    <a routerLink="components/progress-bars" class="waves-effect" mdbWavesEffect>Progress
                                        bars</a>
                                </li>
                                <li>
                                    <a routerLink="components/tabs" class="waves-effect" mdbWavesEffect>Tabs &
                                        pills</a>
                                </li>
                                <li>
                                    <a routerLink="components/tags" class="waves-effect" mdbWavesEffect>Tags, labels
                                        & badges</a>
                                </li>
                                <li>
                                    <a routerLink="components/date-picker" class="waves-effect" mdbWavesEffect>Date
                                        picker</a>
                                </li>
                                <li>
                                    <a routerLink="components/time-picker" class="waves-effect" mdbWavesEffect>Time
                                        picker</a>
                                </li>
                                <li>
                                    <a routerLink="components/tooltips" class="waves-effect"
                                       mdbWavesEffect>Tooltips</a>
                                </li>
                                <li>
                                    <a routerLink="components/popovers" class="waves-effect"
                                       mdbWavesEffect>Popovers</a>
                                </li>
                            </ul>
                        </mdb-item-body>
                    </mdb-item>
                    <mdb-item>
                        <mdb-item-head mdbWavesEffect>
                            <mdb-icon far icon="check-square" class="mr-1"></mdb-icon> Forms
                        </mdb-item-head>
                        <mdb-item-body>
                            <ul>
                                <li>
                                    <a routerLink="forms/form1" class="waves-effect" mdbWavesEffect>Basic</a>
                                </li>
                                <li>
                                    <a routerLink="forms/form2" class="waves-effect" mdbWavesEffect>Extended</a>
                                </li>
                                <li>
                                    <a routerLink="forms/form3" class="waves-effect" mdbWavesEffect>Validation</a>
                                </li>
                            </ul>
                        </mdb-item-body>
                    </mdb-item>

                    <mdb-item>
                        <mdb-item-head mdbWavesEffect>
                            <mdb-icon fas icon="table" class="mr-1"></mdb-icon> Tables
                        </mdb-item-head>
                        <mdb-item-body>
                            <ul>
                                <li>
                                    <a routerLink="tables/table1" class="waves-effect" mdbWavesEffect>Basic</a>
                                </li>
                                <li>
                                    <a routerLink="tables/table2" class="waves-effect" mdbWavesEffect>Extended</a>
                                </li>
                            </ul>
                        </mdb-item-body>
                    </mdb-item>

                    <mdb-item>
                        <mdb-item-head mdbWavesEffect>
                            <mdb-icon fas icon="map" class="mr-1"></mdb-icon> Maps
                        </mdb-item-head>
                        <mdb-item-body>
                            <ul>
                                <li>
                                    <a routerLink="maps/map1" class="waves-effect" mdbWavesEffect>Basic</a>
                                </li>
                                <li>
                                    <a routerLink="maps/map2" class="waves-effect" mdbWavesEffect>Fullscreen</a>
                                </li>
                                <li>
                                    <a routerLink="maps/map3" class="waves-effect" mdbWavesEffect>Markers</a>
                                </li>
                            </ul>
                        </mdb-item-body>
                    </mdb-item>
                    <mdb-item>
                        <mdb-item-head mdbWavesEffect>
                            <mdb-icon fas icon="chart-pie" class="mr-1"></mdb-icon> Charts
                        </mdb-item-head>
                        <mdb-item-body>
                            <ul>
                                <li>
                                    <a routerLink="charts/chart1" class="waves-effect" mdbWavesEffect>Version 1</a>
                                </li>
                                <li>
                                    <a routerLink="charts/chart2" class="waves-effect" mdbWavesEffect>Version 2</a>
                                </li>
                                <li>
                                    <a routerLink="charts/chart3" class="waves-effect" mdbWavesEffect>Version 3</a>
                                </li>
                            </ul>
                        </mdb-item-body>
                    </mdb-item>
                    <mdb-item>
                        <mdb-item-head mdbWavesEffect>
                            <mdb-icon fas icon="wrench" class="mr-1"></mdb-icon> Settings
                        </mdb-item-head>
                        <mdb-item-body>
                            <ul>
                                <li>
                                    <a routerLink="settings/settings1" class="waves-effect" mdbWavesEffect>Version
                                        1</a>
                                </li>
                                <li>
                                    <a routerLink="settings/settings2" class="waves-effect" mdbWavesEffect>Version
                                        2</a>
                                </li>
                                <li>
                                    <a routerLink="settings/settings3" class="waves-effect" mdbWavesEffect>Version
                                        3</a>
                                </li>
                            </ul>
                        </mdb-item-body>
                    </mdb-item>
                    <mdb-item class="no-collase">
                        <mdb-item-head mdbWavesEffect routerLink="alerts">
                            <mdb-icon far icon="bell" class="mr-1"></mdb-icon> Alerts
                        </mdb-item-head>
                        <mdb-item-body></mdb-item-body>
                    </mdb-item>
                    <mdb-item class="no-collase">
                        <mdb-item-head mdbWavesEffect routerLink="modals">
                            <mdb-icon fas icon="bolt" class="mr-1"></mdb-icon> Modals
                        </mdb-item-head>
                        <mdb-item-body></mdb-item-body>
                    </mdb-item>
                    <mdb-item class="no-collase">
                        <mdb-item-head mdbWavesEffect routerLink="calendar">
                            <mdb-icon far icon="calendar-alt" class="mr-1"></mdb-icon> Calendar
                        </mdb-item-head>
                    </mdb-item>
                    <mdb-item class="no-collase">
                        <mdb-item-head mdbWavesEffect routerLink="help">
                            <mdb-icon far icon="compass" class="mr-1"></mdb-icon> Help
                        </mdb-item-head>
                    </mdb-item>
                    <mdb-item class="no-collase">
                        <mdb-item-head mdbWavesEffect routerLink="sections">
                            <i class="fa fa-th"></i> Sections
                        </mdb-item-head>
                        <mdb-item-body></mdb-item-body>
                    </mdb-item>

                    <mdb-item class="side-nav">

                    </mdb-item>
                </mdb-squeezebox>
            </ul>
        </li>
        <li>
            <div class="side-nav" mdbWavesEffect>
                <img src="/assets/logobottom.png" class="img-fluid flex-center">
            </div>
        </li>
        <!--/. Side navigation links -->
    </links>

Here my SCSS:

:host ::ng-deep .navbar-toggler-icon { display: inline-block; width: 1.5em; height: 1.5em; vertical-align: middle; content: ""; background: no-repeat center center; background-size: 100% 100%; }

:host ::ng-deep .navbar .breadcrumb-dn { width: 50%; }

:host ::ng-deep ul li.dropdown a.dropdown-item { display: flex; justify-content: space-between; align-items: center; }

.side-nav { display: flex; flex-direction: column; align-content: flex-end; li:last-of-type { margin-top: auto } }

Please help.


Grzegorz Bujański staff commented 3 years ago

From what I can see you didn't put the logo as the last element in Sidenav.


Grzegorz Bujański staff answered 3 years ago


Try to set the logo as the last Sidenav element and add these styles to styles.scss:

.side-nav {
  display: flex;
  flex-direction: column;
  align-content: flex-end;
  li:last-of-type {
    margin-top: auto
   }
}


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

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 10.0.0
  • Device: Desktop and Mobile
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No