navbar problem on dashboard demo

[ben]

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?

 

[Kiril Nikolov]

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