This is a migrated thread and some comments may be shown as answers.

navbar problem on dashboard demo

1 Answer 53 Views
Application
This is a migrated thread and some comments may be shown as answers.
ben
Top achievements
Rank 1
ben asked on 14 Sep 2016, 02:23 AM

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?

 

1 Answer, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 16 Sep 2016, 05:57 AM
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.
 
Tags
Application
Asked by
ben
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
Share this question
or