Navbar items rendering oddly on desktops and laptops - html

Question

I am using jasny-bootstrap's navmenu along with a navbar both of which have their own toggle buttons which will collapse them.The view works very nicely on mobile views but the navbar items render oddly when preseneted in a desktop or a tablet view.
This is a jsfiddle that has my code.
This is the CSS:
html, body {
height: 100%;
}
body {
padding-top:60px;
}
.navbar-toggle {
float: left;
margin-left: 15px;
}
a.navbar-toggle {
float: right;
margin-right: 15px;
}
.navmenu {
z-index: 1;
}
.canvas {
position: relative;
left: 0;
z-index: 2;
min-height: 100%;
padding: 50px 0 0 0;
background: #fff;
}
#media (min-width: 0) {
.navbar-toggle-reveal {
display: block;
/* force showing the toggle */
}
}
#media (min-width: 992px) {
body {
padding: 0;
}
.navbar {
right: auto;
background: none;
border: none;
}
.canvas {
padding: 0;
}
}
This is the markup:
<div class="navmenu navmenu-default navmenu-fixed-left"> <a class="navmenu-brand" href="#">Project name</a>
<div class="nav navmenu-nav">
<table class="table table-responsive table-hover table-striped table-bordered">
<tbody>
<tr>
<td>DESCRIPT</td>
<td>This is a description</td>
</tr>
<tr>
<td>EQUICATGRY</td>
<td>M</td>
</tr>
<tr>
<td>PLANGROUP</td>
<td>010</td>
</tr>
<tr>
<td>PLANPLANT</td>
<td>0001</td>
</tr>
<tr>
<td>OBJECTTYPE</td>
<td>001</td>
</tr>
<tr>
<td>AUTHGRP</td>
<td>3000</td>
</tr>
</tbody>
</table>
</div>
<ul class="nav navmenu-nav">
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li class="dropdown"> Dropdown <b class="caret"></b>
<ul class="dropdown-menu navmenu-nav">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
</ul>
</div>
<div class="canvas">
<div class="navbar navbar-default navbar-fixed-top navbar-pills">
<button type="button" class="navbar-toggle navbar-toggle-reveal" data-toggle="offcanvas" data-recalc="false" data-target=".navmenu" data-canvas=".canvas"> <span class="glyphicon glyphicon-chevron-right"></span>
<span class="glyphicon glyphicon-chevron-right"></span>
</button>
<div class="navbar-header">
<!--navbar-toggle is not hidden when not in lg,md,xs grid,it is visible on the far-left rather than on the far-right --> <a href="#" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="navbar-brand" href="#">Fargo</a>
</div>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-nav navbar-left">
<li>Left Home
</li>
<li>Left Work
</li>
<li>Left Mobile
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Home
</li>
<li>Work
</li>
<li>Mobile
</li>
</ul>
</div>
</div>
<div class="container">
<p class="lead">This example demonstrates the use of the offcanvas plugin with a reveal effect.</p>
<p>On the contrary of the push effect, the menu doesn't move with the canvas.</p>
<p>You get the reveal effect by wrapping the content in a div and setting the <code>canvas</code> option to target that div.</p>
<p>Note that in this example, the navmenu doesn't have the <code>offcanvas</code> class, but is placed under the canvas by setting the <code>z-index</code>.</p>
<p>Also take a look at the examples for a navmenu with slide in effect and push effect.</p>
</div>
<!-- /.container -->
</div>

Answer 1

I'm not sure how exactly you want it to look (what does "render oddly" mean? How should it render?) but I'm fairly certain it's the entire last media query that is giving you trouble:
#media (min-width: 992px) {
body {
padding: 0;
}
.navbar {
right: auto;
background: none;
border: none;
}
.canvas {
padding: 0;
}
}
This block says that for any screen size above 992px wide a couple of styles change that are definitely making your navbar look strange compared to the smaller screen view. Remove that block and see if it solves your problem.