How to move Bootstrap navbar to the right? - html

I am using an absolutely positioned navbar in twitter Bootstrap, however when I use the .pull-right class inside of my tag with the navbar items the navbar items stay to the left. I have also tried using float: right; and text-align: right; and those didn't work. Does the absolute positioning of the navbar affect this behaviour? How can I get the navbar items to go to the right hand side of the banner?
.wrapper {
position: relative;
}
#banner {
height: 50vh;
width: 100vw;
position: relative;
}
#responsive-nav {
background-color: transparent;
position: absolute;
z-index: 2;
}
#logo {
position: absolute;
top: 15px;
left: 60px;
z-index: 1;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mock Up</title>
<!-- Custom CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- Bootstrap Link -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<!-- Collapsing Hamburger Buttons for mobile -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse" id="responsive-nav">
<ul class="nav navbar-nav pull-right">
<li class="nav-item">
Home
</li>
<li class="nav-item">
Projects
</li>
<li class="nav-item">
Contact
</li>
</ul>
</div>
<div class="wrapper">
<img class="img-responsive" id="logo" src="https://lh3.google.com/u/0/d/0B7B-ke12S7B2ZS1qSS1wOGJCVzg=w1046-h653-iv1">
<img class="img-responsive" id="banner" src="https://lh3.google.com/u/0/d/0B7B-ke12S7B2SDRjaVpyY3FITFk=w1366-h653-iv1">
</div>
</div>
</div>
</nav>
<script src="https://use.fontawesome.com/bd8b80bd9d.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>


Here you go with a solution https://jsfiddle.net/j6sqyru8/
.wrapper {
position: relative;
}
#banner {
height: 50vh;
width: 100vw;
position: relative;
}
#responsive-nav {
background-color: transparent;
position: absolute;
z-index: 2;
}
.navbar-toggle {
z-index: 9;
}
#logo {
position: absolute;
top: 15px;
left: 60px;
z-index: 1;
}
<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/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<!-- Collapsing Hamburger Buttons for mobile -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse" id="responsive-nav">
<ul class="nav navbar-nav pull-right">
<li class="nav-item">
Home
</li>
<li class="nav-item">
Projects
</li>
<li class="nav-item">
Contact
</li>
</ul>
</div>
<div class="wrapper">
<img class="img-responsive" id="logo" src="https://lh3.google.com/u/0/d/0B7B-ke12S7B2ZS1qSS1wOGJCVzg=w1046-h653-iv1">
<img class="img-responsive" id="banner" src="https://lh3.google.com/u/0/d/0B7B-ke12S7B2SDRjaVpyY3FITFk=w1366-h653-iv1">
</div>
</div>
</div>
</nav>
Hope this will help you.


parent div with id="responsive-nav" must be width 100%


Add width: 100% to the #responive-nav.
#responsive-nav {
background-color: transparent;
position: absolute;
z-index: 2;
width: 100%;}

Related

How to put an image behind stuff without making it a background image?

I'm using React-Bootstrap and trying to accomplish this: transparent navbar
I want the navbar to be full width while the banner with image + text on top should be 80% and centered. I believe I can't make it the background image in this case, as I'm not sure how I'd make the container 80% width while keeping the navbar 100%.
For example this code also shrinks the menu:
<div className="jumbo">
<MyNavbar />
<h1>text</h1>
</div>
in style.css:
.jumbo {
background-image: url("img.jpg");
background-size: cover;
text-align: center;
width: 80%;
}
Considering I'm trying to make a responsive website, is it bad practice if I did something like this:
<MyNavbar />
<Image src="img.jpg" id="img">
in style.css:
#img {
top: -200px;
}
Is there an alternative? Thanks!

Try this.
#top-header {
background: rgba(255, 0, 0, 0.36);
position: fixed;
left: 0;
right: 0;
top: 0;
}
.w100 {
width:80%;
margin:0 auto;
}
<!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">
<title>Test Code!</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<header class="bs-docs-nav navbar navbar-static-top" id="top-header">
<div class="container">
<div class="navbar-header">
<button aria-controls="bs-navbar" aria-expanded="false" class="collapsed navbar-toggle" data-target="#bs-navbar" data-toggle="collapse" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Bootstrap
</div>
<nav class="collapse navbar-collapse" id="bs-navbar">
<ul class="nav navbar-nav">
<li>
Getting started
</li>
<li>
CSS
</li>
<li class="active">
Components
</li>
<li>
JavaScript
</li>
<li>
Customize
</li>
</ul>
</nav>
</div>
</header>
<div class="page-inner">
<div class="img-section text-center">
<img src="http://getbootstrap.com/assets/brand/bootstrap-social.png" class="img-responisve w100">
</div>
</div>
<div class="container">
<h2 class="bs-docs-featurette-title">Premium Bootstrap Themes</h2>
<p class="lead">Take Bootstrap 4 to the next level with premium themes from our official marketplace—all built on Bootstrap with new components and plugins, docs, and build tools. </p>
</div>
<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>
</body>
</html>

You can make use of background-position and background-size to get the job done. You will have to style the text separately, so that the element and its text is centered.
.jumbo {
background-image: url("http://theartmad.com/wp-content/uploads/2015/09/Best-Desktop-Background-1.jpg");
background-size: 80%;
background-position: center;
background-repeat: no-repeat;
}
.navbar {
background-color: rgba(226, 183, 226, 0.5);
}
h1 {
text-align: center;
width: 80%;
/* margin:auto so that the div is centered */
margin: auto;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="jumbo">
<nav class="navbar navbar-toggleable-md navbar-light">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
</nav>
<h1>text</h1>
</div>

Creating a Full screen Overlay Navigation

I am trying to get a full screen navigation overlay to work on iPad sizes etc. I'm using bootstrap 3, and what I want is when the user gets the burger menu, and they click it, it will cause a full screen overlay such as this example:
Here Link
I for some reason cant get it to work on my code and I am wondering if its because of my bootstrap classes or what?
HTML:
<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>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default navbar-fixed-top " id="section1">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-target="#myNavbar" data-toggle="collapse" type="button">
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand"><img alt="" src="Images/logo.png" class="img-responsive"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>
Home
</li>
<li>
About Me
</li>
<li>
Skills
</li>
<li>
Me
</li>
<li>
Hobbies
</li>
<li>
Contact Me
</li>
</ul>
</div>
</div>
</nav>
I was wondering if anyone can help me get this to work when it goes to iPad sizes on 768 screens.

<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<link href="css/style.css" rel="stylesheet">
<style>
.overlay {
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.9);
overflow-y: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover,
.overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top " id="section1">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-target="#myNavbar" data-toggle="collapse" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">
<img alt="" src="Images/logo.png" class="img-responsive">
</a>
</div>
<div class="collapse navbar-collapse overlay" id="myNavbar">
×
<ul class="nav navbar-nav navbar-right overlay-content">
<li>
Home
</li>
<li>
About Me
</li>
<li>
Skills
</li>
<li>
Me
</li>
<li>
Hobbies
</li>
<li>
Contact Me
</li>
</ul>
</div>
</div>
</nav>
<script src="js/jquery-2.2.3.min.js"></script>
<script src="js/bootstrap.js"></script>
<script>
$("button").on("click", function () {
$("#myNavbar").css("height", "100%");
});
$("#myNavbar a").on("click", function () {
$("#myNavbar").css("height", "0%");
})
</script>
</body>
</html>
Try this saving as a HTML File and link bootstrap files properly. The thing you were missing was overlays. I used the same overlays from your link.

Navbar above a slider

I'm building a website at the moment, and have a problem with the nav bar.
I have a slider, and I want the navbar to be above a slider. However, my nav is pushing down the slider. The navbar should be above the slider images, with transparency, so I can see the navbar and the image behind it.
I'm using bootstrap and changing some styles, to make the elements look as I want them to look.
Here is the HTML and CSS, what should I change or add?
$(document).ready(function() {
$('.intro-slider').slick {
dots: false,
arrows: false,
autoplay: true,
autoplaySpeed: 2000,
infinite: true,
slidesToShow: 1,
adaptiveHeight: false
});
});
.intro-slider {
width: 100%;
height: 1080px;
overflow: hidden;
padding: 0;
}
.navbar-default,
.container-fluid,
.navbar-default .navbar-collapse,
.navbar-default .navbar-form,
.navbar-collapse.collapse,
.navbar navbar-default {
background-color: #000;
}
.navbar {
position: relative;
min-height: 50px;
margin-bottom: 0px;
border: 0px;
}
hr {
margin-top: 0px;
margin-bottom: 0px;
border: 0;
border-top: 1px solid #2f2f2f;
}
img {
max-width: 600px;
height: auto;
}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<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.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<link href="http://kenwheeler.github.io/slick/slick/slick.css" rel="stylesheet"/>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<body>
<div style="" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="navfont2">
<p><i class="fa fa-phone-square" aria-hidden="true"></i> +1 809 974 7826</p>
</li>
<li class="navfont2">
<p><i class="fa fa-envelope" aria-hidden="true"></i> orestes#mintech.do</p>
</li>
</ul>
</div>
<hr>
<!-- navbar start -->
<nav class="navbar navbar-default">
<div style="" class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div style="" 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="#"><img style="width: 175px;" src="images/mintech.png"></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 navbar-right">
<li class="navfont">Inicio</li>
<li class="navfont">Nosotros</li>
<li class="navfont">Servicios</li>
<li class="navfont">Proyectos</li>
<li class="navfont">Equipo</li>
<li class="navfont">Contacto</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- navbar end -->
<div class="intro-slider col-xs-12">
<div><img src="https://www.almanac.com/sites/default/files/birth_month_flowers-primary-1920x1280px_pixabay.jpg"></div>
<div><img src="http://balconygardenweb.com/wp-content/uploads/2015/08/most-poisonous-flowers-3_mini.jpg"></div>
<div><img src="http://data.whicdn.com/images/57613434/large.jpg"></div>
</div>

You can absolutely position your navbar above your slider. I had to use relative positioning too to push the slider up a bit. All my code is commented to help you follow. Lastly I made the navbar transparent.
$(document).ready(function() {
$('.intro-slider').slick {
dots: false,
arrows: false,
autoplay: true,
autoplaySpeed: 2000,
infinite: true,
slidesToShow: 1,
adaptiveHeight: false
});
});
.intro-slider {
width: 100%;
height: 1080px;
overflow: hidden;
padding: 0;
}
.navbar-default,
.container-fluid,
.navbar-default .navbar-collapse,
.navbar-default .navbar-form,
.navbar-collapse.collapse,
.navbar navbar-default {
background-color: #000;
}
.navbar {
position: relative;
min-height: 50px;
margin-bottom: 0px;
border: 0px;
}
hr {
margin-top: 0px;
margin-bottom: 0px;
border: 0;
border-top: 1px solid #2f2f2f;
}
img {
max-width: 600px;
height: auto;
}
/* \\\\\\\\\\\\\\\\\\\\\\\\ new styles below ///////////////////////////// */
hr {
display: none; /* margins on hr were pushing gallery down */
}
body .navbar { /* place navbar atop slider */
width: 100%;
opacity: 0.75;
position: absolute;
top: 0;
left: 0;
z-index: 5;
}
.intro-slider { /* move slider up */
position: relative;
top: -3rem;
}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<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.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<link href="http://kenwheeler.github.io/slick/slick/slick.css" rel="stylesheet" />
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<body>
<div style="" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="navfont2">
<p><i class="fa fa-phone-square" aria-hidden="true"></i> +1 809 974 7826</p>
</li>
<li class="navfont2">
<p><i class="fa fa-envelope" aria-hidden="true"></i> orestes#mintech.do</p>
</li>
</ul>
</div>
<hr>
<!-- navbar start -->
<nav class="navbar navbar-default">
<div style="" class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div style="" 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="#"><img style="width: 175px;" src="images/mintech.png"></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 navbar-right">
<li class="navfont">Inicio</li>
<li class="navfont">Nosotros</li>
<li class="navfont">Servicios</li>
<li class="navfont">Proyectos</li>
<li class="navfont">Equipo</li>
<li class="navfont">Contacto</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- navbar end -->
<div class="intro-slider col-xs-12">
<div><img src="https://www.almanac.com/sites/default/files/birth_month_flowers-primary-1920x1280px_pixabay.jpg"></div>
<div><img src="http://balconygardenweb.com/wp-content/uploads/2015/08/most-poisonous-flowers-3_mini.jpg"></div>
<div><img src="http://data.whicdn.com/images/57613434/large.jpg"></div>
</div>

Removing space between Navigation bar and banner

I'm using Bootstrap to make my custom website but I have a problem. I have a big space between my banner and my navigation bar. I need to remove it without breaking the anything else.
I was searching for fix on this website and on other websites too, but none of those are working. Here's the code:
HTML: http://pastebin.com/FSFA4GhG CSS: http://pastebin.com/TiQ1nm9h
I figured out that the problem is in the <header> somewhere, but I cannot fix it/find that error.

You have the header set at 100px (the navbar default is min-height: 50px) and change the top property on the banner id as well to 50px
Sidenote: you have 2 separate IDs set on your navbar-collapse div causing the mobile nav to not work correctly.
See example Snippet.
body,
div,
h1,
h2,
p {
margin: 0;
padding: 0;
}
body {
text-align: left;
}
header {
height: 50px;
width: 100%;
background: #f00;
z-index: 50;
position: fixed;
display: inline-block;
padding: 0;
}
#banner {
width: 100%;
height: 500px;
position: fixed;
top: 50px;
background: #AE1;
}
#content {
width: 100%;
position: relative;
top: 400px;
background: #ebe;
height: 1000px;
}
<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" />
<div id="container">
<header>
<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="#">MENU</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="#">gg 1<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>11
</li>
<li>12
</li>
</ul>
</li>
<li>gg2
</li>
<li>gg 3
</li>
</ul>
</div>
</div>
</nav>
</header>
<div id="banner">
<h2>BANNER</h2>
</div>
<div id="content">
<p>
CONTENT
</p>
</div>
</div>

It's simple, just remove the height property from your #header and put a correctly top property on your #banner (same that your nav height):
body, div, h1, h2, p{
margin: 0;
padding: 0;
}
body{
text-align: left;
}
header{
width: 100%;
z-index: 50;
position: fixed;
display: inline-block;
}
#banner {
width: 100%;
height: 500px;
position: fixed;
top: 50px;
background: #AE1;
}
#content {
width: 100%;
position: relative;
top: 400px;
background: #ebe;
height: 1000px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fred WEB</title>
<!--Zobrazenie pre mobily-->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!--Pridanie JQuery a Boostrapu-->
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
</script>
</head>
<body>
<div id="container">
<header>
<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="#">MENU</a>
</div>
<div id ="menu" 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="#">gg 1<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>11</li>
<li>12</li>
</ul>
</li>
<li>gg2</li>
<li>gg 3</li>
</ul>
</div>
</div>
</nav>
</header>
<div id="banner">
<h2>BANNER</h2>
</div>
<div id="content">
<p>
CONTENT
</p>
</div>
</div>
</body>
</html>

try to add
nav {
margin: 0px !important;
}
And to edit banner rule
#banner {
width: 100%;
height: 500px;
position: fixed;
top: 50px;
background: #AE1;
}

Centering navbar buttons in bootstrap

I'm trying to get my hands onto some web designing and I was not able to figure out how to make the navigation buttons in my project centered. I would like the buttons from Home to Page 3 centered and was wondering if there was a simple way to do that in the HTML file alone without needing a separate CSS class.
<!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>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.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="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Website Name</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</div>
</nav>
<!-- 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>

Make some changes in Bootstrap.CSS
May be like this...
.nav navbar-nav
{
position: absolute;
width: 100%;
left: 0;
text-align: center;
margin: auto;
}
Check here => bootply

The only way you can accomplish this is by adjusting some CSS properties. Basically remove the float from navbar-nav and center the text. But if you really want them to be centered, you have to account for the navbar-brand class by assigning it a width and adding a negative margin equal to half that width to the navbar-nav.
See working Example Snippets.
#media (min-width: 768px) {
.navbar.navbar-default {
height: 50px;
}
.navbar.navbar-default .container-fluid,
.navbar.navbar-default .container {
text-align: center;
}
.navbar.navbar-default .navbar-nav {
display: inline-block;
float: none;
margin-left: -75px;
}
.navbar.navbar-default .navbar-brand {
width: 150px;
}
}
<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.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-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" href="#">Website Name</a>
</div>
<div class="collapse navbar-collapse" id="bs-nav">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li>Page 1
</li>
<li>Page 2
</li>
<li>Page 3
</li>
</ul>
</div>
</div>
</nav>
Mobile Center
.navbar.navbar-default .container-fluid,
.navbar.navbar-default .container {
text-align: center;
}
#media (min-width: 768px) {
.navbar.navbar-default {
height: 50px;
}
.navbar.navbar-default .navbar-nav {
display: inline-block;
float: none;
margin-left: -75px;
}
.navbar.navbar-default .navbar-brand {
width: 150px;
}
}
#media (max-width: 767px) {
.navbar-default .navbar-brand.navbar-brand-centered {
position: absolute;
left: 50%;
display: block;
width: 150px;
text-align: center;
top: 0;
}
.navbar.navbar-default > .container .navbar-brand.navbar-brand-centered,
.navbar.navbar-default > .container-fluid .navbar-brand.navbar-brand-centered {
margin-left: -75px;
margin-top: 0;
margin-bottom: 0;
}
}
<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.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-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-brand-centered" href="#">Website Name</a>
</div>
<div class="collapse navbar-collapse" id="bs-nav">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li>Page 1
</li>
<li>Page 2
</li>
<li>Page 3
</li>
</ul>
</div>
</div>
</nav>

Using this css will get your navigation button in center position.
navbar .navbar-nav {
display: inline-block;
float: none;
}
.navbar .navbar-collapse {
text-align: center;
}
DEMO