why my bootstrap nav-menu doesn't appear correctly - wordpress
i'm trying to create a wordpress theme but i'm getting this problem with the navbar from bootstrap "currently i just want to show the navbar without converting it to wordpress i mean i want it static for now not dynamic"
this is how it appear in the browser
appear in the browser
this is my header.php code
<!DOCTYPE html>
<html <?php language_attributes(); ?> >
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" >
<title><?php bloginfo( 'name' ); ?></title>
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>"
<?php wp_head(); ?>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container">
<!-- 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">
<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>
and this is my functions.php file
<?php
/**
* Add My Custom Styles
*/
function elzero_add_styles(){
wp_enqueue_style( 'bootstrap-css', get_template_directory_uri()."/css/bootstrap.min.css");
wp_enqueue_style( 'fontawesome-css', get_template_directory_uri()."/css/fontawesome.min.css");
wp_enqueue_style( 'main-css', get_template_directory_uri()."/css/main.css");
}
/**
* Add My Custom Scripts
*/
function elzero_add_scripts(){
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', includes_url().'/js/jquery/jquery.js', array(),false,true);
wp_enqueue_script( 'jquery');
wp_enqueue_script( 'bootstrap-js', get_template_directory_uri().'/js/bootstrap.min.js', array('jquery'),false, true );
wp_enqueue_script( 'main-js', get_template_directory_uri().'/js/main.js', array(),false, true );
wp_enqueue_script( 'htmlshiv', get_template_directory_uri().'/js/htmlshiv.js');
wp_script_add_data( 'htmlshiv','conditional', 'lt IE 9' );
wp_enqueue_script( 'respond', get_template_directory_uri().'/js/respond.js');
wp_script_add_data( 'respond','conditional', 'lt IE 9' );
}
/**
* Add Actions
*/
add_action('wp_enqueue_scripts','elzero_add_styles');
add_action('wp_enqueue_scripts','elzero_add_scripts');
add_action( 'init','elzero_add_menu' );
/**
* Add MENUS
*/
function elzero_add_menu(){
}
?>
this is the page source code
<!DOCTYPE html>
<html lang="en-US" >
<head>
<meta charset="UTF-8" >
<title>Elzero</title>
<link rel="pingback" href="http://localhost/wordpress/xmlrpc.php"
<meta name='robots' content='noindex,follow' />
<link rel='dns-prefetch' href='//s.w.org' />
<script type="text/javascript">
window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/","svgExt":".svg","source":{"concatemoji":"http:\/\/localhost\/wordpress\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.9.4"}};
!function(a,b,c){function d(a,b){var c=String.fromCharCode;l.clearRect(0,0,k.width,k.height),l.fillText(c.apply(this,a),0,0);var d=k.toDataURL();l.clearRect(0,0,k.width,k.height),l.fillText(c.apply(this,b),0,0);var e=k.toDataURL();return d===e}function e(a){var b;if(!l||!l.fillText)return!1;switch(l.textBaseline="top",l.font="600 32px Arial",a){case"flag":return!(b=d([55356,56826,55356,56819],[55356,56826,8203,55356,56819]))&&(b=d([55356,57332,56128,56423,56128,56418,56128,56421,56128,56430,56128,56423,56128,56447],[55356,57332,8203,56128,56423,8203,56128,56418,8203,56128,56421,8203,56128,56430,8203,56128,56423,8203,56128,56447]),!b);case"emoji":return b=d([55357,56692,8205,9792,65039],[55357,56692,8203,9792,65039]),!b}return!1}function f(a){var c=b.createElement("script");c.src=a,c.defer=c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var g,h,i,j,k=b.createElement("canvas"),l=k.getContext&&k.getContext("2d");for(j=Array("flag","emoji"),c.supports={everything:!0,everythingExceptFlag:!0},i=0;i<j.length;i++)c.supports[j[i]]=e(j[i]),c.supports.everything=c.supports.everything&&c.supports[j[i]],"flag"!==j[i]&&(c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&c.supports[j[i]]);c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&!c.supports.flag,c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.everything||(h=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",h,!1),a.addEventListener("load",h,!1)):(a.attachEvent("onload",h),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),g=c.source||{},g.concatemoji?f(g.concatemoji):g.wpemoji&&g.twemoji&&(f(g.twemoji),f(g.wpemoji)))}(window,document,window._wpemojiSettings);
</script>
<style type="text/css">
img.wp-smiley,
img.emoji {
display: inline !important;
border: none !important;
box-shadow: none !important;
height: 1em !important;
width: 1em !important;
margin: 0 .07em !important;
vertical-align: -0.1em !important;
background: none !important;
padding: 0 !important;
}
</style>
<link rel='stylesheet' id='bootstrap-css-css' href='http://localhost/wordpress/wp-content/themes/elzero/css/bootstrap.min.css?ver=4.9.4' type='text/css' media='all' />
<link rel='stylesheet' id='fontawesome-css-css' href='http://localhost/wordpress/wp-content/themes/elzero/css/fontawesome.min.css?ver=4.9.4' type='text/css' media='all' />
<link rel='stylesheet' id='main-css-css' href='http://localhost/wordpress/wp-content/themes/elzero/css/main.css?ver=4.9.4' type='text/css' media='all' />
<!--[if lt IE 9]>
<script type='text/javascript' src='http://localhost/wordpress/wp-content/themes/elzero/js/htmlshiv.js?ver=4.9.4'></script>
<![endif]-->
<!--[if lt IE 9]>
<script type='text/javascript' src='http://localhost/wordpress/wp-content/themes/elzero/js/respond.js?ver=4.9.4'></script>
<![endif]-->
<link rel='https://api.w.org/' href='http://localhost/wordpress/wp-json/' />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://localhost/wordpress/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://localhost/wordpress/wp-includes/wlwmanifest.xml" />
<meta name="generator" content="WordPress 4.9.4" />
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container">
<!-- 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">
<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="footer text-center">
Copy Rights © Reserved 2018
</div>
<script type='text/javascript' src='http://localhost/wordpress/wp-includes//js/jquery/jquery.js?ver=4.9.4'></script>
<script type='text/javascript' src='http://localhost/wordpress/wp-content/themes/elzero/js/bootstrap.min.js?ver=4.9.4'></script>
<script type='text/javascript' src='http://localhost/wordpress/wp-content/themes/elzero/js/main.js?ver=4.9.4'></script>
<script type='text/javascript' src='http://localhost/wordpress/wp-includes/js/wp-embed.min.js?ver=4.9.4'></script>
</body>
</html>
Related
Bootstrap - Active class loses its focus while I click on background area
I have navbar and it have some menus in the anchor tag. When I click the menu, it remains selected but when I click somewhere in the background then it loses that active class. How to overcome this, please help Below is the snippet of same <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <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.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-inverse"> <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 class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a> <ul class="dropdown-menu"> <li>Page 1-1</li> <li>Page 1-2</li> <li>Page 1-3</li> </ul> </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> <div class="container"> <h3>Collapsible Navbar</h3> <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window). <p>Only when the button is clicked, the navigation bar will be displayed.</p> </div> </body> </html>
Bootstrap Does Not Recognize Two Menu Navigations In Mobile Devices
I'm making a site in Bootstrap and I wanted to make two navigation menus.. So I coded this: <?php require_once 'php/functions/edu_functions.php'; ?> <!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"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Gooyanet</title> <link href="styles.css" rel="stylesheet"/> <style type="text/css"> </style> <!-- Bootstrap --> <link href="css/bootstrap.css" rel="stylesheet"/> <link href="css/head.css" rel="stylesheet"/> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="js/html5shiv.min.js"></script> <script src="js/respond.min.js"></script> <![endif]--> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="js/functions.js"></script> </head> <body data-spy="scroll" data-target="#my-navbar"> <div id="wrapperDiv"> <div id="stickyNavigation"> <nav class="navbar navbar-default BHoma"> <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> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><span class="glyphicon glyphicon-earphone" aria-hidden="true"></span></li> <li><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span></li> </ul> <ul class="nav navbar-nav navbar-right BHoma"> <li>ورود به حساب کاربری</li> <li>ایجاد حساب کاربری</li> <li>همکاری به عنوان مترجم زبان</li> </ul> </div> </div> </nav> </div> <div id="searhBox"> <div class="row"> <div class="col-lg-4"> <div class="logo"> <a href="#"> <img alt="Brand" src="img/logo.png" width="150" height="30"> </a> </div> </div><!-- /.col-lg-6 --> <div class="col-lg-8"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search for..."> <span class="input-group-btn"> <button class="btn btn-default" type="button">Go!</button> </span> </div><!-- /input-group --> </div><!-- /.col-lg-6 --> </div><!-- /.row --> </div> <div id="mainNavigation"> <nav class="navbar navbar-default"> <div class="container-fluid"> <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"> <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><!-- /.container-fluid --> </nav> </div> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html> So if you run this on an html document which connects to Bootstrap styles ,you will notice that everything works fine except when you minimize the screen to see how the menu navigations works in mobile devices... I mean when I hover over the button of menu navigation 1 it works correctly: 1 But when I hover over the button of menu navigation 2, again it shows me the top menu rather that main menu items: 2 I don't know why this thing happens ,I also tried replacing codes with default menu navigation but wasn't useful yet! So if you have any idea on this ,please let me know... thx!
Both navs have data-target="#bs-example-navbar-collapse-1" You need to change the id and data target on one of your menus.
BootStrap navbar sidebutton not showing
I looked everywhere but can't find why my bootstrap button doesn't show up when I make my screen smaller(When i make my navbar smaller). It works on codepen.io but not on my computer editor. When I say button I mean 3 bar button on right side like this https://i.stack.imgur.com/2omaL.png <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content = "width=device-width", initial-scale=1> <!-- Latest compiled and minified JavaScript --> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <link rel="stylesheet" href="style.css> <title>Portfolio</title> </head> <body> <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"> <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> </body> </html>
change this <link rel="stylesheet" href="style.css> to <link rel="stylesheet" href="style.css"> you forgot to add closing quote working fine here <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content = "width=device-width", initial-scale=1> <!-- Latest compiled and minified JavaScript --> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <link rel="stylesheet" href="style.css"> <title>Portfolio</title> </head> <body> <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"> <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> </body> </html>
Boostrap nav float on top of google map
How can I have the bootstrap nav bar float on top of the google map?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?&sensor=false">
</script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
function initialize() {
getLocation();
}
google.maps.event.addDomListener(window, 'load', initialize);
function getLocation(){
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, error);
} else {
// default location
}
}
function success(position){
var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var mapOptions = {
center: latlng,
zoom: 12
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
function error(msg){
if (msg.code == 1) {
//PERMISSION_DENIED
} else if (msg.code == 2) {
//POSITION_UNAVAILABLE
} else {
} //TIMEOUT
}
</script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<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="#">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</li>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li 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 <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div id="map-canvas"/>
</body>
</html>
If you mean float over the map, you can use Bootstrap's fixed top navbar.. http://www.bootply.com/124566 If you mean above the map vertically, you can use change the bottom margin on the navbar to 0.. http://www.bootply.com/124567
Twitter Bootstrap dropdown menu
I'm trying to use Twitter Bootstrap's dropdown menu in its top nav bar. You can see an example working here. http://twitter.github.com/bootstrap/# In mine, the arrow indicating that it's a dropdown shows on the menu but when I hover or click on it it doesn't reveal my dropdown links. I think I've included all the necessary classes, and I don't believe Twitter's requires javascript. Can you see what I'm doing wrong? My dropdown <div class='topbar' data-dropdown="dropdown"> <div class='fill'> <div class='container'> <ul class="nav"> <li><%= link_to 'Home', main_app.root_path %></li> <li><%= link_to 'Outlines', main_app.outlines_path %></li> <li class="dropdown"> Assessment <ul class="dropdown-menu"> <li>second link </li> <li>third link </li> </ul> </li> ..... I go on to close all the divs etc. The nav bar looks great but the dropdown just doesn't work. Twitter Bootstrap <div class="topbar" data-dropdown="dropdown"> <div class="topbar-inner"> <div class="container"> <h3>Project Name</h3> <ul class="nav"> <li class="active">Home</li> <li>Link</li> <li>Link</li> <li>Link</li> <li class="dropdown"> Dropdown <ul class="dropdown-menu"> <li>Secondary link</li> <li>Something else here</li> <li class="divider"></li> <li>Another link</li> </ul> </li> </ul> <form class="pull-left" action=""> <input type="text" placeholder="Search"> </form> <ul class="nav secondary-nav"> <li class="dropdown"> Dropdown <ul class="dropdown-menu"> <li>Secondary link</li> <li>Something else here</li> <li class="divider"></li> <li>Another link</li> </ul> </li> </ul> </div> </div><!-- /topbar-inner --> </div>
It actually requires inclusion of Twitter Bootstrap's dropdown.js http://getbootstrap.com/2.3.2/components.html
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script>
It's also possible to customise your bootstrap build by using: http://twitter.github.com/bootstrap/customize.html All the plugins are included by default.
You must include jQuery in the project. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> I didn't find any doc about this so I just opened a random code example from tutorialrepublic.com http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-dropdowns.php Hope this helps someone else.
I had a similar problem and it was the version of bootstrap.js included in my visual studio project. I linked to here and it worked great <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<!DOCTYPE html> <html lang="en"> <head> <!-- core CSS --> <link href="http://webdesign9.in/css/bootstrap.min.css" rel="stylesheet"> <link href="http://webdesign9.in/css/font-awesome.min.css" rel="stylesheet"> <link href="http://webdesign9.in/css/responsive.css" rel="stylesheet"> <!--[if lt IE 9]> <script src="js/html5shiv.js"></script> <script src="js/respond.min.js"></script> <![endif]--> </head><!--/head--> <body class="homepage"> <header id="header"> <nav class="navbar navbar-inverse" role="banner"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <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" title="Web Design Company in Mumbai" href="index.php"><img src="images/logo.png" alt="The Best Web Design Company in Mumbai" /></a> </div> <div class="collapse navbar-collapse navbar-right"> <ul class="nav navbar-nav"> <li class="active">Home</li> <li>About Us</li> <li>Services</li> <li>Terms & Condition</li></li> <li>Contact</li> </ul> </div> </div><!--/.container--> </nav><!--/nav--> </header><!--/header--> <script src="http://webdesign9.in/js/jquery.js"></script> <script src="http://webdesign9.in/js/bootstrap.min.js"></script> </body> </html>