sideNav overlap with and

Topic: sideNav overlap with and

daivinhtran.vt pro asked 8 years ago

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

<body>
    

    <!-- Start your project here-->
    <header>
        <!-- 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>
            </div>
            <!--/. 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">
                </div>
            </form>
            <!--/.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;">
                        <ul>
                            <li><a href="#"><span class="fa fa-angle-right"></span>Orders</a>
                            </li>
                            <li><a href="#"><span class="fa fa-angle-right"></span>Order Predictions</a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li><a><span class="fa fa-laptop"></span>Health</a>
                    <div class="collapsible-body" style="display: none;">
                        <ul>
                            <li><a href="#"><span class="fa fa-angle-right"></span>Health Dashboard</a>
                            </li>
                            <li><a href="#"><span class="fa fa-angle-right"></span>Infrastructure</a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li><a><span class="fa fa-dashboard"></span>Support</a>
                    <div class="collapsible-body" style="display: none;">
                        <ul>
                            <li><a href="#"><span class="fa fa-angle-right"></span>MCOM RTP</a>
                            </li>
                            <li><a href="#"><span class="fa fa-angle-right"></span>MCOM DAL</a>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
            <!--/. Side navigation links -->
        </ul>
        <!--/. 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>
            </div>

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

            <!--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>
            </ul>
        </nav>
        <!-- /.Navbar-->
    </header>
    <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>
                            <br> Material Design for Bootstrap (MDB) is a powerful Material Design UI KIT for most popular HTML, CSS, and JS framework - Bootstrap.</p>
                    </div>
                </div>
                <!--/.First column-->

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

            </div>
        </div>
        <!--/.Footer Links-->

        <hr>

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

    </footer>
    <!-- /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>
</body>

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?

Add comment

Michal Szymanski staff answered 7 years ago