daivinhtran.vt pro asked 6 years ago

TITLE: “sideNav overlap with <main> and <footer>”

    <!-- Start your project here-->
        <!-- Sidebar navigation -->
        <ul id="slide-out" class="side-nav fixed default-side-nav dark-side-nav" style="width: 240px;">

            <!-- Logo -->
            <div class="logo-wrapper waves-light waves-effect waves-light">
                <a href="#"><img src="http://mdbootstrap.com/wp-content/uploads/2015/12/mdb-white2.png" /></a>
            <!--/. Logo -->

            <!--Search Form-->
            <form class="search-form" role="search">
                <div class="form-group waves-light waves-effect waves-light">
                    <input type="text" class="form-control" placeholder="Search">
            <!--/.Search Form-->

            <!-- Side navigation links -->
            <ul class="collapsible collapsible-accordion">
                <li><a><span class="fa fa-bar-chart-o"></span>Executive</a>
                    <div class="collapsible-body" style="display: none;">
                            <li><a href="#"><span class="fa fa-angle-right"></span>Orders</a>
                            <li><a href="#"><span class="fa fa-angle-right"></span>Order Predictions</a>
                <li><a><span class="fa fa-laptop"></span>Health</a>
                    <div class="collapsible-body" style="display: none;">
                            <li><a href="#"><span class="fa fa-angle-right"></span>Health Dashboard</a>
                            <li><a href="#"><span class="fa fa-angle-right"></span>Infrastructure</a>
                <li><a><span class="fa fa-dashboard"></span>Support</a>
                    <div class="collapsible-body" style="display: none;">
                            <li><a href="#"><span class="fa fa-angle-right"></span>MCOM RTP</a>
                            <li><a href="#"><span class="fa fa-angle-right"></span>MCOM DAL</a>
            <!--/. Side navigation links -->
        <!--/. Sidebar navigation -->

        <!-- Navbar-->
        <nav class="navbar navbar-fixed-top scrolling-navbar double-nav elegant-color">

            <!-- SideNav slide-out button -->
            <div class="pull-left">
                <a href="#"><i class="fa fa-bars"></i></a>

            <!-- Breadcrumb-->
            <div class="breadcrumb-dn">
                <p>Material Design for Bootstrap</p>

            <!--Navigation icons-->
            <ul class="nav-icons">
                <li><a href="#"><i class="fa fa-envelope-o"></i><br><span>Contact</span></a></li>
                <li><a href="#"><i class="fa fa-comments-o"></i><br><span>Support</span></a></li>
                <li data-toggle="modal" data-target="#modal-login"><a href="#"><i class="fa fa-sign-in"></i><br><span>LogIn</span></a></li>
                <li><a href="#"><i class="fa fa-sign-out"></i><br><span>LogOut</span></a></li>
                <li><a href="#"><i class="fa fa-user"></i><br><span>Account</span></a></li>
        <!-- /.Navbar-->
    <footer class="page-footer center-on-small-only elegant-color">

        <!--Footer Links-->
        <div class="container-fluid">
            <div class="row">

                <!--First column-->
                <div class="col-md-4">
                    <p class="column-title white-text">About Material Design</p>
                    <div class="column-content">
                        <p class="thin-100 white-text">Material Design (codenamed Quantum Paper) is a design language developed by Google.
                            <br> Material Design for Bootstrap (MDB) is a powerful Material Design UI KIT for most popular HTML, CSS, and JS framework - Bootstrap.</p>
                <!--/.First column-->

                <hr class="hidden-md-up">

        <!--/.Footer Links-->


        <div class="footer-copyright">
            <div class="container-fluid">
                © 2015 Copyright: <a href="http://www.MDBootstrap.com"> MDBootstrap.com </a>

    <!-- /Start your project here-->

    <!-- SCRIPTS -->

    <!-- JQuery -->
    <script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>

    <!-- Bootstrap tooltips -->
    <script type="text/javascript" src="js/tether.min.js"></script>

    <!-- Bootstrap core JavaScript -->
    <script type="text/javascript" src="js/bootstrap.min.js"></script>

    <!-- MDB core JavaScript -->
    <script type="text/javascript" src="js/mdb.min.js"></script>

    <script type="text/javascript" src="js/script.js"></script>
So I copy and paste the code of the e-commerce sample website and the sidebar always overlap the footer. Am I missing something here?

Michal Szymanski staff answered 6 years ago

Did you set a appropriate padding-left to main and footer? If not - read our tutorial about that:

Please insert min. 20 characters.


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


Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No