Responsive Bootstrap Navigation menu bar Fixed Top position in responsive templates

HTML 0 Comments
navigation-menu-bar-fixed-top

Bootstrap Navigation Bar Fixed Top Navbar menu bar position Responsive design HTML5 responsive web templates How do I make header and footer navigation fixed at the top responsive menu bar create and Div Layout Tutorial fix demo and code.How to fix the Top Navigation menu Bar .Responsive  menu Bar Set on top in fixed position and easily open in mobile

 

Main code and class used for Fixed Top Navigation  menu Bar position

<header class=”navbar navbar-fixed-top” >   <!—— use this code in html————>

 

 OUTPUT SHOW

navigation-menu-bar-fixed-top
navigation-menu-bar-fixed-top

 

Responsive Bootstrap Navigation menu bar  Code  and On hover and on mouse show  drop down link

 

<!DOCTYPE html>
<html lang=”en”>

<head>

<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<meta name=”description” content=””>
<meta name=”author” content=””>

<title> Responsive Templates Bootstrap Theme </title>

<!– Bootstrap Core CSS file common –>
<link href=”bootstrapcss/bootstrap.min.css” rel=”stylesheet”>

<!– Check HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries –>
<!– WARNING Check : Respond.js doesn’t work if you view the page via file:// –>
<!–[if lt IE 9]>
<script src=”https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js”></script>
<script src=”https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js”></script>
<![endif]–>

<!– jQuery file common used–>
<script src=”jqueryfile/jquery.min.js”></script>

<!– Bootstrap Core JavaScript  file common–>
<script src=”bootstrapcss/bootstrap.min.js”></script>

<!– dropdown menu CSS Start–>
<style>
.caret-up {
width: 0;
height: 0;
border-left: 4px solid rgba(0, 0, 0, 0);
border-right: 4px solid rgba(0, 0, 0, 0);
border-bottom: 4px solid;

display: inline-block;
margin-left: 2px;
vertical-align: middle;
}
</style>

<!– drop down menu CSS Start–>

<!– drop down menu JavaScript Start–>
<script>
$(function(){
$(“.dropdown”).hover(
function() {
$(‘.dropdown-menu’, this).stop( true, true ).fadeIn(“fast”);
$(this).toggleClass(‘open’);
$(‘b’, this).toggleClass(“caret caret-up”);
},
function() {
$(‘.dropdown-menu’, this).stop( true, true ).fadeOut(“fast”);
$(this).toggleClass(‘open’);
$(‘b’, this).toggleClass(“caret caret-up”);
});
});

</script>

<!– drop down menu JavaScript Start–>

<body>

<header class=”navbar navbar-fixed-top” style=”border-bottom:1px solid #CCCCCC”>
<div class=”container”>
<div class=”row” style=”background-color:#FFFFFF; height:80px; padding-top:12px;”>
<div class=”col-lg-12″>
<div class=”intro-text”>
<span class=”name”>Start Bootstrap</span><br>
<span class=”skills”>Web Developer – Graphic Artist – User Experience Designer</span>
</div>
</div>
</div>
</div>

<div class=”container”>
<div class=”row”>

<nav class=”navbar navbar-default” role=”navigation” style=”margin-bottom:0px;”>

<!– work and mobile display menu –>
<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>

</div>

<!– work and mobile display menu –>

<!– Start 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”><a href=”file:///D:/xampp/htdocs/bus/bus/index.html”>Link</a></li>
<li><a href=”#”>Link</a></li>
<li class=”dropdown”>
<a href=”#” class=”dropdown-toggle” data-toggle=”dropdown”>Dropdown <b class=”caret”></b></a>
<ul class=”dropdown-menu”>
<li><a href=”#”>Action Link</a></li>
<li><a href=”#”>Another Link</a></li>
<li><a href=”#”>Another Link 2</a></li>
<li class=”divider”></li>
<li><a href=”#”>Separated link with line</a></li>
<li class=”divider”></li>
<li><a href=”#”>One more separated link line</a></li>
</ul>
</li>

<!—–On hover and on mouse show  drop down link——>

<li class=”dropdown”>
<a href=”#” class=”dropdown-toggle” data-toggle=”dropdown”>Dropdown <b class=”caret”></b></a>
<ul class=”dropdown-menu”>
<li><a href=”#”>Action on mouse </a></li>
<li><a href=”#”>Another action link</a></li>
<li><a href=”#”>Something link here 2</a></li>
<li class=”divider”></li>
<li><a href=”#”>Separated link 2</a></li>
<li class=”divider”></li>
<li><a href=”#”>One more separated link 2 </a></li>
</ul>
</li>

</ul>

</div><!– /.navbar-collapse –>

</nav>

</div>
</div>

</header>

<section style=”background-color:#999999; padding:0px; margin:0px;”>
<div class=”container”>

Start content

</div>

</section>

</body>

</html>

 

Download file bootstrap JS and CSS

bootstrap.min.css

jquery.min.js

bootstrap.min.js

 

share..Share on Facebook0Share on Google+0Tweet about this on TwitterShare on LinkedIn0