Bootstrap collapsed menu not displaying with google map - javascript

I have a webpage which has a bootstrap navbar and a google map. navbar is fixed on top and the google map is placed so that to fill the rest of the screen
<div class="container-fluid">
<header class="row">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="brand" href="#">{{ HTML::image('images/logo.png', array('class'=>'logo')) }}</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Reports <b class="caret"></b>
<ul class="dropdown-menu">
<li>Report 1</li>
<li>Report 2</li>
<li>Report 3</li>
<li>Report 4</li>
</ul>
</li>
<li class="dropdown">
User <b class="caret"></b>
<ul class="dropdown-menu">
<li>Settings</li>
<li>Logout</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div id="main">
<div id="mapcanvas"></div>
</div>
</div>`
There is no problem with the loading of google maps and the navbar. But when the nav bar is collapsed and I am clicking the toggle button the menu is not getting displayed.
CSS:
html,body {width:100%;height:100%;margin:0;padding:0;}
#mapcanvas {
display: block;
position:absolute;
height:auto;
bottom:0;
top:0;
left:0;
right:0;
margin-top:50px;
}
Bootply : bootply.com/3ejKtiSHkw

i don't know exactly whats the problem, but ive found out theat it seems to be sth. with the css.
adding the navbar-fixed-top-class to your navbar makes the dropdown work. I don't know if thats you required behavior though.
so, to break it down:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
makes the dropdowns work in the collapsed navbar.

Related

How to change the text alignment in the toggle menu of bootstrap?

I want to align right the links items in the toggle menu of a bootstrap page, but it didn't work. By the way, the menu is left and logo is right, but need to align items to the right to be appear under the logo. any help?
this is the case
this is my code
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="logo"><img src="img/logob.png" alt=""></div>
<div class="navbar-header">
<button type="button" class="navbar-toggle fl7" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
just add css text-align:right in li for mobile view
#media (max-width:767px){
.nav>li{
text-align:right
}
}
.logo{
float:right;
padding:5px 0;
font-size:25px;
}
#media (max-width:767px){
.nav>li{
text-align:right
}
.navbar-inverse .navbar-toggle{
float:left;
margin-left:15px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="logo"><img src="img/logob.png" alt="">Logo</div>
<div class="navbar-header">
<button type="button" class="navbar-toggle fl7" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
I could not create the exact thing in the snippet as you didn't provide css. But this should do the job. Just add class="text-right" to your a-tags in nav-links.
Example snippet
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="logo"><img src="img/logob.png" alt=""></div>
<div class="navbar-header">
<button type="button" class="navbar-toggle fl7" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a class="text-right" href="#">item 1</a></li>
<li><a class="text-right" href="#">item 2</a></li>
<li><a class="text-right" href="#">item 3</a></li>
<li><a class="text-right" href="#">item 4</a></li>
<li><a class="text-right" href="#">item 5</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
</body>
</html>

add class to parent li when submenu selected

i know this question is been so much in this forum, but i am having a problem here despite googling for hours. I want when i selected /click submenu the parent li get class .actives using Javascript/Jquery. Thanks for your help :)
Here is my code:
<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid container">
<div class="row m04m">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main_nav">
<span class="bars">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</span>
<span class="btn-text">Select Page</span>
</button>
</div>
<div class="collapse navbar-collapse" id="main_nav">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class=" dropdown">
ABOUT
<ul class="dropdown-menu" role="menu">
<li>About Company</li>
<li>About Jump</li>
</ul>
</li>
<li>LINK</li>
</ul>
</div>
</div>
</div>
</nav> <!--Main Nav-->
and here is my css
.actives{background-color:#174069;}
Thanks for your help
this example code will help you modify it as your requirement
$('#menu').find('li').click(function(){
//removing the previous selected menu state
$('#menu').find('li.active').removeClass('active');
//is this element from the second level menu?
if($(this).closest('ul').hasClass('secondLevel')){
$(this).parents('li').addClass('active');
//this is a parent element
}else{
$(this).addClass('active');
}
});
#menu li.active{
background: #ccddff;
}
demo sample code:
http://jsfiddle.net/L94N6/4/

Bootstrap convert navbar to side bar

I am using Bootstrap 3 and I want to create a sidebar, like the one that appear in mobile apps where they are hidden initially and appear from left to right on click.
The following html which uses bootstrap, creates a nav bar which on smaller devices changes into a collapsable icon. On clicking the icon the menu appears from top down. Does bootstrap provide feature to change the transition direction? Please help, I am new to css and bootstrap
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header pull-left">
<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>
<a class="navbar-brand" href="#">Demo</a>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">City <span class="caret"></span></a>
<ul class="dropdown-menu">
<li></li>
<li>Pune</li>
<li>Hyderabad</li>
</ul>
</li>
<li>menu item</li>
<li></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
Bootstrap has built in functionality for sidebar menus.
http://startbootstrap.com/template-overviews/simple-sidebar/
http://bootsnipp.com/snippets/featured/navigation-sidebar-with-toggle

Bootstrap Vertical Menu Not Collapsing

I can't get a bootstrap vertical menu to collapse when using media queries.
There is too much code to put it all in here so I created a fiddle -
https://jsfiddle.net/DTcHh/
I don't mind re-writing the menu however it was the only way I could get this kind of menu. I am basing my technology off this website as this was the clients demand -
http://www.rhiwbeinaprm.co.uk/
I am trying to create their home page menu but in bootstrap so it is responsive. any help is greatly appreciated.
<div class="navbar">
<nav class="navbar navbar-default">
<div class="container-fluid"><div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="root">
</li><li class="dropdown-submenu"> <a tabindex="-1" href="#">Welcome</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Headteacher</a>
</li>
<li><a tabindex="-1" href="#">School Motto</a>
</li>
</ul>
</li>
</ul>
</div>
</div
The issue is, when scrolling below around 750px and below, the whole thing just disappears.
Where is the navigation button?
Add an id to: <div class="navbar-collapse collapse">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Bootstrap 3</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
...
</div>
Update fiddle: https://jsfiddle.net/wZVanG/DTcHh/8623/
you have the following issues with your code:
You are duplicating something here by using a div and a nav both
with class navbar. I don't know why but that's weird.
Your collapsing div doesn't have id. the id will allow the button to target it for dropdown
The button that is supposed to hold the toggle for dropdown isn't in your code.
Since your collapsing div doesn't have an Id, your dropdown button wouldn't be pointing to anything
Your jsFiddle is different from the code posted here.... The following code is based on the one from your jsfiddle.
Working bootply
Your website takes a lot of time to load, to improve the user experience you might consider loading the js files after or creating a loading screen. The following code is for the navbar.
<div class="container">
<div class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="#">Bootstrap 3</a>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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 class="navbar-collapse collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown active">
Getting started <b class="caret"></b>
<ul class="dropdown-menu">
<li>Download Bootstrap</li>
<li class="divider"></li>
<li class="dropdown-header">Examples</li>
<li>Basic template</li>
<li>Starter template</li>
<li>Grids</li>
<li>Jumbotron</li>
<li>Navbar</li>
<li>Sign-in page</li>
<li>Sticky footer</li>
<li>Offcanvas</li>
<li>Carousel</li>
<li>Theme</li>
<li class="divider"></li>
<li class="dropdown-header">Compatibility</li>
<li>Migrating from 2.x to 3.0</li>
<li>Browser support</li>
<li>Third party support</li>
</ul>
</li>
<li>CSS</li>
<li>Components</li>
<li>JavaScript</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active">Customize</li>
</ul>
</div>
</div>
<div class="jumbotron">
<h1>Twitter Bootstrap 3.0</h1>
<p class="lead">Starter template with CSS and JS included.</p>
<p><a class="btn btn-lg btn-primary" href="#fork">Fork this fiddle</a></p>
</div>
</div>

Large dropdown div will appear on click of button with class navbar-toggle

I want have something like navbar-toggle. When user click on it the large div in width and height open open up just like when clicking on navbar-header containg button with class "navbar-toggle"
Any idea of how can I do this using bootstrap?
I have something like this for simple drop down menu but it's a navbar I hope you understand me.
<div class="bs-example">
<nav id="myNavbar" style="width:95%;" class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#">Category</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Profile</li>
<li class="dropdown">
Messages <b class="caret"></b>
<ul class="dropdown-menu">
<li>Inbox</li>
<li>Drafts</li>
<li>Sent Items</li>
<li class="divider"></li>
<li>Trash</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Admin <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li class="divider"></li>
<li>Settings</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
You can create it by jQuery click function. it's very simple.
jQuery(".classNameWhichWillShow").hide();
jQuery(".class_name_where_click").click(function(){
jQuery(".classNameWhichWillShow").slideToggle(100);
});

Categories