We Keep Coding

how to make head of dropdown link clickable in navbar

I want to make the dropdown items appear on hover of the parent link, and to be clickable to a another page, how can this be done?
<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">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-nav" 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 navbar-link" href="#"> <img src="assets/img/Saydullogo.png" id="logo"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="app-nav">
<ul class="nav navbar-nav navbar-right">
<li class="active"><span class="fa fa-home"></span> Home</li>
<li class="dropdown">
<span class="fa fa-medkit"></span> Categories <span class="caret"></span>
<ul class="dropdown-menu">
<li>Beauty</li>
<li>Cosmetics</li>
<li>Medicines</li>
</ul>
</li>
<li><span class="fa fa-edit"></span> Registeration</li>
<li><span class="fa fa-phone-square"></span> Contact Us</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>

put this css in your code
.dropdown:hover .dropdown-menu {
display: block !important;
}
check out this snippet with your code
.dropdown:hover .dropdown-menu {
display: block;
}
<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">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-nav" 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 navbar-link" href="#"> <img src="assets/img/Saydullogo.png" id="logo"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="app-nav">
<ul class="nav navbar-nav navbar-right">
<li class="active"><span class="fa fa-home"></span> Home</li>
<li class="dropdown">
</span> Categories <span class="caret"></span>
<ul class="dropdown-menu">
<li>Beauty</li>
<li>Cosmetics</li>
<li>Medicines</li>
</ul>
</li>
<li><span class="fa fa-edit"></span> Registeration</li>
<li><span class="fa fa-phone-square"></span> Contact Us</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>

this.girish - that code works perfectly.

Bootstrap navbar toggle use to add class

I use Bootstrap V3 in Wordpress.
What I want to achieve is that when someone clicks the button in the collapsed navbar menu, the div with the class .slider gets a extra class.
This is the HTML from the navbar:
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
<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="collapse navbar-collapse" id="navbar">
<?php
wp_nav_menu( array(
'theme_location' => 'navbar-right',
'depth' => 2,
'menu_class' => 'nav navbar-nav navbar-right',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker())
);
?>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
And this is the HTML from the div where I want to add a extra class:
<div class="slider">
<div class="container">
<div class="row">
other elements
</div> <!-- close row -->
</div> <!-- close container -->
</div> <!-- close slider -->
I've tried this with CSS:
.navbar-default .navbar-collapse .in ~ .slider{
margin-top: -246px;
padding-top: 176px;
}
And this with jQuery:
$(function() {
$("#navbar").click(function() {
$(".slider").addClass("sliderMove");
});
});
The extra class that should be added on slider is:
.sliderMove{
margin-top: -246px;
padding-top: 176px;
}
The purpose of this is that the slider that is after/under the navbar stay's under the navbar when it collapsed.

You just need to hook into the Bootstrap collapse event of your collapsible navbar. There is no need to assign an extra click handler to the collapse nav button.
Collapse Events
Bootstrap's collapse class exposes a few events for hooking into collapse functionality.
Here is an example.
$('#bs-example-navbar-collapse-1').on('show.bs.collapse', function () {
$(".slider").addClass("your-class");
})
$('#bs-example-navbar-collapse-1').on('hide.bs.collapse', function () {
$(".slider").removeClass("your-class");
})
.slider {
width: 100%;
min-height: 100px;
background-color: tomato;
}
.your-class {
background-color: lawngreen;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<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="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Link <span class="sr-only">(current)</span></li>
</ul>
</div>
</div>
</nav>
<div class="slider"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

The button you are are willing to click is having a class navbar-toggle and the div having navbar has an id navbar . So to achieve the click event on button you have to use the button id not the div id. So your jQuery code will go like:
$('.navbar-toggle').click(function(){
if($('#navbar').hasClass('in')){
$(".slider").addClass("sliderMove");
}else{
$(".slider").removeClass("sliderMove");
}
});
As you would like to remove the class when you collapse the menu again using same button.

you were doing everything fine, but you need to use toggleClass() and select other CSS selector that is not #navbar
it also possible to add a delay? Because the class is already activated before the navbar is fully collapsed.
Yes it is possible, by adding setTimeout()
$(".collapsed").click(function() {
// toggle the class after half second
setTimeout(function() {
$(".slider").toggleClass("sliderMove");
}, 500);
});
/* just to show in small devices */
#media (max-width: 992px) {
.sliderMove {
background: red;
height: 100vh;
width: 100%
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<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="#">Brand</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 class="active">Link <span class="sr-only">(current)</span>
</li>
<li>Link
</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li role="separator" class="divider"></li>
<li>Separated link
</li>
<li role="separator" class="divider"></li>
<li>One more separated link
</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link
</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li role="separator" class="divider"></li>
<li>Separated link
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="slider"></div>

Try something like this:
(as you required when the user clicks the navbar-toggle button, adds a certain class to a certain div with jQuery)
$('body').ready(function() {
$('.navbar-toggle').on('click', function() {
$(".slider").toggleClass("sliderMove");
});
});

Try this
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
<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="collapse navbar-collapse" id="navbar">
<div class="slider">
<div class="container">
<div class="row">
other elements
</div> <!-- close row -->
</div> <!-- close container -->
</div>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
Javascript
$('.navbar-collapse').on('click', function() {
$(".slider").toggleClass("sliderMove");
});
CSS
.sliderMove{
height:100%;
width:100%
}
DEMO HERE

Making the body of nav under the ehader in bootstrap

What I want to do is making the menu 1,2,3 under the header title not besides it :
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<h1>First Project in Bootstrap</h1>
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"aria-expanded="false">
<span class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse"
id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<div class="nav nav-stacked">
<li>Menu 1 </li>
<li>Menu 2</li>
<li>Menu 3</li>
</div>
</ul>
</div>
</div>
</nav>
I want the Menu 1 under the the header title not beside it .. any suggestions ??

Working fiddle.
If you don't have access to the HTML code you could append it to the header when then page is ready :
$(function(){
$('.navbar-header').append( $('#bs-example-navbar-collapse-1') );
})
Hope this helps.
$(function(){
$('.navbar-header').append( $('#bs-example-navbar-collapse-1') );
})
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<h1>First Project in Bootstrap</h1>
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"aria-expanded="false">
<span class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse"
id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<div class="nav nav-stacked">
<li>Menu 1 </li>
<li>Menu 2</li>
<li>Menu 3</li>
</div>
</ul>
</div>
</div>
</nav>

Bootstrap mobile menu button not visible

I'm not able to view the menu button of bootstrap menu when it is displayed in mobile view.In the same time I need to remove all the ui styling offered by the Bootstrap and have my own styling for navbar.
<nav class="navbar-fixed-top" role="navigation">
<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="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</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>

You should add navbar navbar-default or navbar navbar-inverse so you navigation links, button etc have color/states applied to them.
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
If you want a transparent or white background uss CSS.
Docs
With navbar-default
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<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="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li>Page 1
</li>
<li>Page 2
</li>
<li>Page 3
</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>
Transparent Background
.navbar.navbar-default {
background: transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<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="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li>Page 1
</li>
<li>Page 2
</li>
<li>Page 3
</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 collapsed menu not displaying with google map

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.