navbar problem on dashboard demo

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

    Posted 13 Sep 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>
                            </button>
                        </div>
                        <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>
                                <li id="products-and-orders">
                                    <a href="products-orders.html">
                                        <span class="icon icon-star-empty"></span>Products & Orders</a>
                                </li>
                                <li id="team-efficiency">
                                    <a href="team-efficiency.html">
                                        <span class="icon icon-faves"></span>Team Efficiency</a>
                                </li>
                                <li id="about">
                                    <a href="about.html">
                                        <span class="icon icon-info"></span>About</a>
                                </li>
                            </ul>
                            <div id="rights">
                                <p>Copyright © 2016, Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.</p>
                            </div>
                        </div>
                    <!--close main column-->
                </div>
                <!--close row-->
            </div>
            <!--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
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 16 Sep Link to this post

    Hi,

    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?

    Regards,
    Kiril Nikolov
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  3. Kendo UI is VS 2017 Ready
Back to Top