Boostrap nav float on top of google map - css

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

Related

why my bootstrap nav-menu doesn't appear correctly

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>

Change CSS Styles BurguerMenu NavBar

I have a Bootstrap Navbar and I want that when I click on deploy button, this CSS (of the button) changes (I do not like CSS Button default). So... I want next:
When I click on Menu (in Xtra Small Sizes -as movile-) its CSS Styles change (eg: background-color: red).
How could I do this? What is his ClassNameCss? (eg: .navbar button[aria-expanded=true]) Thank you.
EDIT: Added my NavBar Code:
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle navbar-collapse-left" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Menú</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
{/*<a class="navbar-brand" href="/inicio"><img id="idFotoLogotipo" width="200px" src="./assets/images/cabecera_CE.jpg"/></a>*/}
<a class="navbar-brand visible-xs-block" /*href="http://www.upct.es/"*/><span id="idTextoLogotipo">- INCIDENCIAS -</span></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-left">
<MenuNavItem to='/administrador/inicio' index={true} /*menuItemActive="inicio"*/>Inicio</MenuNavItem>
<MenuNavItem to='/administrador/nueva_incidencia' /*menuItemActive="nueva_incidencia"*/>Nueva Incidencia</MenuNavItem>
<MenuNavItem to='/administrador/incidencias_recibidas' /*menuItemActive="incidencias_recibidas"*/>Incidencias Recibidas</MenuNavItem>
<MenuNavItem to='/administrador/informes' /*menuItemActive="informes"*/>Informes</MenuNavItem>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="divider visible-xs-block"></li>
{this.state.logged === true ? <p class="nav navbar-text hidden-xs"><span class="glyphicon glyphicon-user"></span> Bienvenido, {this.state.nombre} ({this.state.dni})</p> : ''}
{this.state.logged === true ? <p class="nav navbar-text visible-xs-block"><span class="glyphicon glyphicon-user"></span> Bienvenido, {this.state.nombre}</p> : ''}
{this.state.logged === true ? <li class="salir"><span class="glyphicon glyphicon-off"></span> Salir</li> : <li class="entrar"><span class="glyphicon glyphicon-user"></span> Entrar</li>}
</ul>
</div>
</nav>

If you mean the 'burger menu' (three lines) dropdown toggle button shown here:
Then you should be able to target this with:
.navbar-toggle[aria-expanded="true"],
.navbar-toggle[aria-expanded="true"]:focus {
background-color: red;
}
Note that the :focus style is required as otherwise the default grey background colour will still show when the button is clicked, as at that point the button will have focus.
EDIT: try this example - I've since prefixed the styles with .navbar-default, which should ensure the styles work.
.navbar-default .navbar-toggle[aria-expanded="true"],
.navbar-default .navbar-toggle[aria-expanded="true"]:focus {
background-color: red;
}
.navbar-default .navbar-collapse[aria-expanded="true"] {
background-color: #428bca;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/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">
<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>

How can I close a submenu automatically by clicking on other items?

I have tried this, and everything is OK except second level sub-menus
it doesn't close automatically when i choose another item's sub-menus
gor example when i choose page1-3 and then page1-4
items of the 1-3 still remain in page until i click on them again
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
#media only screen and (min-width: 500px) {
nav{float:right;
}
li{
float:right !important;
text-align:right;
direction:rtl ;
}
.dropdown-menu{
right:0 !important;
}
}
nav{text-align:right; }
li{text-align:right; direction:rtl;}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
margin-right: 100%;
margin-top: -1px;
}
</style>
</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>
</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 class="dropdown-submenu">
<a class="test" href="#">Page 1-3<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>3rd level dropdown</li>
<li>3rd level dropdown</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" href="#">Page 1-4<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>4rd level dropdown</li>
<li>4rd level dropdown</li>
</ul>
</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</div>
</nav>
<script>
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script>
</body>
</html>

What you can do is first on click of sub-menu hide all menu inside submenu than toggle ul find more in below snippet
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
#media only screen and (min-width: 500px) {
nav{float:right;
}
li{
float:right !important;
text-align:right;
direction:rtl ;
}
.dropdown-menu{
right:0 !important;
}
}
nav{text-align:right; }
li{text-align:right; direction:rtl;}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
margin-right: 100%;
margin-top: -1px;
}
</style>
</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>
</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 class="dropdown-submenu">
<a class="test" href="#">Page 1-3<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>3rd level dropdown</li>
<li>3rd level dropdown</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" href="#">Page 1-4<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>4rd level dropdown</li>
<li>4rd level dropdown</li>
</ul>
</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</div>
</nav>
<script>
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(".dropdown-submenu .dropdown-menu").css("display","none");
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script>
</body>
</html>

Add this to your script:
$('.dropdown-submenu > ul').hide();
solved code is:
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$('.dropdown-submenu > ul').hide();
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});

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>

CSS - Bootstrap - Navbar width narrowed mobile button

How to change navbar/container width? Bootstrap 3
While following this I am super confused.
I am still fairly new in CSS, so I am still playing around a lot with bootstrap.
I added a div right outside of the navbar div to contain the total width.
.navbar-outer {
width:1000px;
margin-left: auto;
margin-right: auto;
}
That worked well, but as soon as I narrow the browser. The "Mobile" button no longer shows. Any suggestion on changes while keeping everything intact in the css? This is for bootstrap 3.3.4.
Full code below:
<nav class="navbar navbar-default">
<div class="navbar-outer">
<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">
<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="dropdown">
Action <span class="caret"></span>
<ul class="dropdown-menu" role="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>
<ul class="nav navbar-nav navbar-right">
<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>
<li class="dropdown">
<img src="testimage.jpg" style="width: 25px; height: 25px;" alt="..." class="img-circle"> Me <span class="caret"></span>
<ul class="dropdown-menu" role="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 -->
</div>
</nav>

I think it might be that you are setting the width with px, meaning the collapsing feature of the Bootstrap navbar cannot be triggered. I believe it collapses at 768px.
Using min-width and max-width:
.navbar-outer {
max-width:1000px;
min-width:767px;
margin-left: auto;
margin-right: auto;
}
http://jsfiddle.net/frank184/m3n3r1tg/

Resources