The page has a vertical sidemenu. It works fine when the page is maximized. When minimized i would like it to show/hide on click on the toggle icon, but nothing happens. The menu just doesnt show in my case.
(But here in the fiddle, it flashes though).
Where am i going wrong.
http://jsfiddle.net/rk74g6w0/
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid navbar-container">
<div class="navbar-header"> <a class="navbar-brand" href="#">DS-Menu</a>
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".sidebar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-lg-2">
<div class="sidebar-collapse collapse col-sm-3 col-md-2
sidebar navbar-default navbar-static-side">
<ul id="menu" class="nav nav-sidebar sidebar-collapse in">
<li class="active mainmenu"><a href="#">Menu 0 <span
class="glyphicon arrow"></span></a>
<ul class="submenu">
<li>item 0.1
</li>
<li>item 0.2
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="col-lg-10"></div>
</div>
</div>
Replace this:
<ul id="menu" class="nav nav-sidebar sidebar-collapse in">
By this:
<ul id="menu" class="nav nav-sidebar">
JSFiddle: http://jsfiddle.net/rk74g6w0/1/
Related
I have a Bootstrap menu, I use the position: fixed to not scroll the menu, for small display, the burger menu doesn't work, when I delete position: fixed, it works but the menu is scrolled with the page content :
My HTML:
<div class="col-sm-2">
<div class="sidebar-nav">
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Menu Item 1</li>
<li>ITERM1</li>
<li>ITEM2</li>
<li>ITEM3</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="col-sm-10">
content blabla
</div>
My CSS :
.navbar-default {
position: fixed;
}
Please check the example code here CODEPEN
HTML:
<div class="col-sm-12">
<div class="sidebar-nav">
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Menu Item 1</li>
<li>ITERM1</li>
<li>ITEM2</li>
<li>ITEM3</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
</div>
<div class="col-sm-10">
content blabla
</div>
</div>
I have 2 nav bars that I want both the be at the top of the page initially but upon scrolling I want the first nav bar with the brand image to collapse away and the second nav bar with the list links to snap to the top of the page where the first nav bar initially was. Does anyone know how I can do this? Here's an image for reference:
HTML:
<!----- Navbar ----->
<nav class="navbar navbar-default navbar-collapse">
<div class="container">
<div class="navbar-header">
<div class="navbar-header">
<img id="brand-image" alt="DEVO Logo" src="/Applications/MAMP/htdocs/D0.1/images/DEVOorig.png"/>
</div>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li></li>
<li><span class="glyphicon glyphicon-user"></span></li>
<li><span class="glyphicon glyphicon-shopping-cart"></span></li>
<li>
<div class="form-group form-inline">
<input type="text" class="form-control" placeholder="Search products..">
</div>
<button type="submit" class="btn btn-secondary" id="product-search-btn"><span class="glyphicon glyphicon-search"></button>
</li>
</ul>
</div>
</div>
<nav class="navbar navbar-inverse navbar-fixed-top" id="info-head">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Tobi's Site</a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>About Us</li>
<li>FAQ's</li>
<li>Contact Us</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Work With Us <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Drivers</li>
<li>Partners</li>
<li>In House</li>
</ul>
</li>
<li>T's & C's</li>
<li>Privacy Policy</li>
</ul>
</div>
</div>
</div>
</nav>
Use the Bootstrap affix component to pin the 2nd navbar when the page is scrolled. Then add the CSS for the affix class to position the navbar when it's pinned to the top.
$('#nav2').affix({
offset: {
top: 50
}
});
2 navbars example: http://codeply.com/go/hi6zhTU4h2
I am new to Web Dev, and i am facing an issue wrt to Div : https://jsfiddle.net/debashis_gt540m/17mmmxps/2/
The three div's at the end have some amount of spacing in between them, I've tried with inserting all 3 div's within a single one, but it didn't help. Anyone ? I want to get rid of the spaces between the 3 div's.
The code is:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="https://in.linkedin.com/in/debdebashis" target="_blank">Debashis Deb</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Home
</li>
<li>About Me
</li>
<li>Skills
</li>
<li>Interests
</li>
<li>Contact Me
</li>
<li>
<a> </a>
</li>
</ul></div>
</div>
</nav>
<div>
<div class="container-fluid bg-1 well">
<div class="row">
</div>
</div>
<div class="container-fluid bg-2 well">
</div>
<div class="container-fluid bg-3 well">
</div>
</div>
.well {
margin-bottom: 0px !important;
}
the 3 divs have bottom margins, that's what adding the space. add this css:
.container-fluid{margin-bottom:0px;}
I have created this menu for my needs. It is responsive, since I'm using bootstrap, and it is custom, because i needed 2 rows for the right side of the menu. What I need is, how can I have toggle-navigation for lower resolutions than 768x1280? This is how the menu is created:
<nav class="navbar navbar-fixed-top" role="navigation">
<div class="container">
<div class="row col-xs-4">
<ul class="nav navbar-nav">
<li><img src="img/logo.png"></li>
</ul>
</div>
<div class="row col-xs-8" >
<div class="row col-xs-12">
<ul class="nav navbar-nav navbar-right">
<li> </li>
<li> </li>
</ul>
</div>
<div class="row col-xs-12">
<ul class="nav navbar-nav navbar-right" >
<li>Home</li>
<li>About Us</li>
<li><a href="#" >Projects</a></li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</nav>
I think that following example is ok for your needes:
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu2">
<span class="sr-only">Toggle navigation2</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<li><img src="img/logo.png"></li>
</div>
<div class="row col-xs-8 pull-right">
<div class="navbar-collapse collapse pull-right" id="menu1">
<ul class="nav navbar-nav">
<li> </li>
<li> </li>
</ul>
</div><!--/.nav-collapse -->
</div>
<div class="row col-xs-12 pull-right">
<div class="navbar-collapse collapse pull-right" id="menu2">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About Us</li>
<li><a href="#" >Projects</a></li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
You should add button like this where headerCol is id of your div which contains elements you want to collapse. I'm sorry for my bad english. I'll give you example:
This is my header navbar:
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#headerCol">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index">MYSITE</a>
</div>
<div class="navbar-collapse collapse pull-right" id="headerCol"><!-- start nav-collapse -->
{% block headernav %}
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About us</li>
<li>Questions</li>
<li>Contacts</li>
</ul>
{% endblock %}
</div><!-- end nav-collapse -->
</div>
</div>
I'm using the regular navbar of bootstrap not the fixed-top one, I figured out that when .navbar{position: fixed;} it overlaps, but that's not what I want. I want when I scroll down the menu stays on the top of the page not to move with the page and overlap the content when the menu collapses.
this is my code so far:
<div class="navbar-wrapper">
<div id="menu" class="navbar navbar-right navbar-default nob no-focus" role="navigation">
<div class="container">
<div class="navbar-header">
<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>
<!-- <a class="navbar-brand" href="#">Project name</a> -->
</div>
<div class="navbar-collapse collapse ">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
this is what is happening now because is fixed-top
[http://es.tinypic.com/view.php?pic=fc0i6s&s=8#.U9itaON5Py4]
thanks in advance.
Try this, it will keep the navbar fixed rather than overlap once u start scrolling down.
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<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>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
Hope this helps :)