navbar problem on dashboard demo

2 posts, 0 answers
  1. ben
    ben avatar
    4 posts
    Member since:
    Aug 2016

    Posted 13 Sep 2016 Link to this post

    I'm using the Northwind·Dash demo to create my dashboard.

    The problem is when I uses the navbar code in my html and link the Site.css

    <div class="container-fluid">
                <!--open container-->
                <div class="row row-offcanvas row-offcanvas-left">
                    <!--open row-->
                    <div id="nav-section" class="col-xs-12 column">
                        <!--open nav column-->
                        <div class="navbar-default">
                            <button id="toggle-button" type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                        <h1 id="dash-logo" class="center-block">Northwind&#183;Dash</h1>
                        <div class="collapse navbar-collapse" id="sidebar-nav" role="navigation">
                            <ul class="nav">
                                <li id="regional-sales-status">
                                    <a href="index.html">
                                        <span class="icon icon-chart-column"></span>Regional Sales Status</a>
                                <li id="products-and-orders">
                                    <a href="products-orders.html">
                                        <span class="icon icon-star-empty"></span>Products & Orders</a>
                                <li id="team-efficiency">
                                    <a href="team-efficiency.html">
                                        <span class="icon icon-faves"></span>Team Efficiency</a>
                                <li id="about">
                                    <a href="about.html">
                                        <span class="icon icon-info"></span>About</a>
                            <div id="rights">
                                <p>Copyright © 2016, Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.</p>
                    <!--close main column-->
                <!--close row-->
            <!--close container-->

    The navbar will not be full height in my page.

    And if I add a new li tag in navbar, there will be a new transparent bar.

    What's wrong with this problem?


  2. Kiril Nikolov
    Kiril Nikolov avatar
    2596 posts

    Posted 16 Sep 2016 Link to this post


    The same issues cannot be reproduced in the online example, so I believe there is some CSS interfering with your site. Did you try inspecting the page using your browser developer tools and see what might be causing this? Can you send us a reproduction case, where we can reproduce the problem?

    Kiril Nikolov
    Telerik by Progress
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
Back to Top