So today I have been learning how to use Bootstrap(I'm very new) and I have come across a bit of a problem. This is my code:
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/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="#">Home</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
</ul>
</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>
<div class="container">
<div class="jumbotron text-center">
<h1>Welcome!</h1>
<p>Random text here that doesn't matter</p>
<a class="btn btn-default">Watch now!</a>
<a class="btn btn-info">Tweet it</a>
</div>
</div>
</nav>
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<p class="navbar-text pull-left">Site created: 30/05/16</p>
Subscribe on YouTube
</div>
</div>
</body>
</html>
and basically everything is fine however, if you view my code as .html or whatever in a browser, you will see that under the navigation menu at the top which is black, there is the jumbotron which is fine however, the background of it is black which I don't want, I want it to be white like the rest of the page. I'm so new to this so I can't even manage to figure out how to do this so any help would be highley appreciated. Sorry, I've tried to be as specific as I can but I really am new to this and I'm hoping someone can help me.
TH.
Get
<div class="container">
<div class="jumbotron text-center">
<h1>Welcome!</h1>
<p>Random text here that doesn't matter</p>
<a class="btn btn-default">Watch now!</a>
<a class="btn btn-info">Tweet it</a>
</div>
</div>
outside of
nav tags
You do not have to make any changes in CSS
You can use css for the navbar color but still I am confused what actually you want:
.navbar-inverse .navbar-toggle {
background-color: #efefef;
}
.navbar-inverse .navbar-toggle:hover {
background-color: #efefef;
}
JSfiddle for the same
Put the container div outside the nav.
Here:
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/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="#">Home</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
</ul>
</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">
<div class="jumbotron text-center">
<h1>Welcome!</h1>
<p>Random text here that doesn't matter</p>
<a class="btn btn-default">Watch now!</a>
<a class="btn btn-info">Tweet it</a>
</div>
</div>
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<p class="navbar-text pull-left">Site created: 30/05/16</p>
Subscribe on YouTube
</div>
</div>
</body>
</html>
Hope i understood you right. If you DONT want to change any html markup you just need to change the color by adding a custom css class to the desired elements and override what boostrap does:
<nav class="navbar navbar-inverse myJumbotronColor">
<div class="container-fluid myNavBarColor">
<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="#">Home</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</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>
<div class="container">
<div class="jumbotron text-center">
<h1>Welcome!</h1>
<p>Random text here that doesn't matter</p>
<a class="btn btn-default">Watch now!</a>
<a class="btn btn-info">Tweet it</a>
</div>
</div>
</nav>
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<p class="navbar-text pull-left">Site created: 30/05/16</p>
Subscribe on YouTube
</div>
</div>
And the custom css:
.myNavBarColor {
background-color: rgb(34, 34, 34);
border-color: rgb(8, 8, 8);
}
.myJumbotronColor {
background-color: #fff;
border: none;
}
https://jsfiddle.net/6gnp4doL/
Please note that you have a markup error in your html:
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<!-- these two tag should not be here
</ul>
</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>
You can seek which element has the actual background.
Than go to your CSS file ( assuming you made one ) and set the background color to white.
Let's assume the nav-bar header class has the background color to it
Add this to your CSS file
.nav-bar
{
background-color: white !imporant;
}
The !important is to override any other style sheet lines written to adjust the property on the element.
Related
I want to make notification menu like facebook, but i want to make dropdown menu 100% width when screen is small. i have found script like i want, but when i compare with my script, it same. here script that i found :
<!DOCTYPE html>
<html>
<head>
<title>Webslesson Tutorial | Facebook Style Header Notification using PHP Ajax Bootstrap</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<br /><br />
<div class="container">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Webslesson Tutorial</a>
</div>
<ul class="nav navbar-nav navbar-right">
<!--this part I'm focusing on-->
<li class="dropdown">
<span class="label label-pill label-danger count" style="border-radius:10px;"></span> <span class="glyphicon glyphicon-envelope" style="font-size:18px;"></span>
<ul class="dropdown-menu">
<li>
<a href="#">
<strong>ahahaha</strong><br />
<small><em>ihihihih</em></small>
</a>
</li>
<li class="divider"></li>
</ul>
</li>
<!----end part i'm focusing on--->
</ul>
</div>
</nav>
</body>
</html>
and this is my script, focus on the notification menu. i did't see the differences. but it not 100% width when screen is small.
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
</head>
<body>
<nav role="navigation" class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header pull-left">
WEBSITE
</div>
<div class="navbar-header pull-right">
<ul class="nav pull-left">
<!--and this part look like same but the result is defferent--->
<li class="dropdown pull-right">
#username<b class="caret"></b>
<ul class="dropdown-menu">
<li>
<a href="">
<strong>ahahaha</strong><br />
<small><em>ihihihih</em></small></a>
</li>
<li class="divider"></li>
</ul>
</li>
<!--end part that i'm focused on--->
</ul>
<button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle"><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="visible-xs-block clearfix"></div>
<div class="collapse navbar-collapse navbar-left">
<ul class="nav navbar-nav pull-left">
<li>Files</li>
<li>Forums</li>
<li>Project</li>
</ul>
</div>
<div class="collapse navbar-collapse navbar-right">
<form class="navbar-form" role="search">
<div class="form-group">
<div id="imaginary_container">
<div class="input-group stylish-input-group">
<input type="text" class="form-control" placeholder="Search" >
<span class="input-group-addon">
<button type="submit">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
</div>
</form>
</div>
</div>
</nav>
<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
I'm trying to get accounts:ui loginButtons to right align in a Bootstrap Navbar. Functionality is fine, but no matter what I try, it won't go on the right. Currently, it's on the left after the Upload button. Any help appreciated.
html:
<nav class="navbar navbar-inverse navbar-fixed-top">
<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="/">REVUME</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="#">CATEGORIES <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>DIGITAL ART</li>
<li>DRAWING</li>
<li>GRAPHIC DESIGN</li>
<li>ILLUSTRAION</li>
<li>PAINTING</li>
<li>PHOTOGRAPHY</li>
<li>UI/UX</li>
</ul>
</li>
<button type="button" class="btn btn-default navbar-btn">UPLOAD</button>
<span class="glyphicon glyphicon-user"></span> {{> loginButtons align="right"}}
</ul>
</div>
</div>
</nav>
Try this it will work:)
<!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>
<link href="https://fonts.googleapis.com/css?family=Catamaran:100|Luckiest+Guy|Quicksand:300|Asap:700|Montserrat:700|Open+Sans|Roboto|Signika:700" rel="stylesheet"/>
</head>
<style type="text/css">
#right-button {
margin-right: 20px;
}
#glyph {
}
</style>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<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="/">REVUME</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="#">CATEGORIES <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>DIGITAL ART</li>
<li>DRAWING</li>
<li>GRAPHIC DESIGN</li>
<li>ILLUSTRAION</li>
<li>PAINTING</li>
<li>PHOTOGRAPHY</li>
<li>UI/UX</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><button id="right-button" type="button" class="btn btn-default navbar-btn navbar-right">UPLOAD</button></li>
<li>
<span id="glyph" class="glyphicon glyphicon-user" ></span> </li>
</ul>
</div>
</div>
</nav>
</body>
</html>
Use the class navbar-right with the element that you are trying to align at the right side.
I am new to bootstrap.
This is the design I am trying to make:
As you can see the navbar is on top op the background image.
This is what I have:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.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.4/js/bootstrap.min.js"></script>
<style>
<style>
.navbar-default {
background: none;
border: none;
}
body{
height:100%;
}
html{
background: url('sun.jpg') no-repeat center center fixed;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position: 0 0;
}
</style>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<ul class="nav navbar-nav">
<li class="active">home</li>
<li>ask a question!</li>
<li>learn</li>
<li>contact</li>
</ul>
</div>
</nav>
</body>
</html>
gives:
I don't know how to put it on the image itself instead of above.
short sidequestion: what makes it that the picture from vimeo makes it look so much better than the image I use from the sun? on my image you can see all the pixels etc... Is this due to the fact that it might be a too small image and that it has to be stretched a lot to fit the whole page?
EDIT:
this is what I tried but didn't work
<nav class="navbar navbar-default">
<div class="container">
<ul class="nav navbar-nav">
<li class="active">home</li>
<li>ask a question!</li>
<li>learn</li>
<li>contact</li>
</ul>
<style>
.navbar{
background:transparent;
}
</style>
</div>
</nav>
Bootstrap 4
The Navbar has no background color, so it's transparent by default. Just remember to use navbar-light or navbar-dark so the link colors work with the contrast of the background image. Display of the toggler is also based on navbar-(dark or light).
https://www.codeply.com/go/FTDyj4KZlQ
<nav class="navbar navbar-expand-sm fixed-top navbar-light">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar1">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
<div class="collapse navbar-collapse" id="navbar1">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
</nav>
Bootstrap 3
Use navbar-fixed-top and then change the CSS to make it transparent. Here's an example of a custom transparent navbar.
http://www.codeply.com/go/JNy8BtYSem
<nav id="nav" class="navbar navbar-fixed-top" data-spy="affix">
<div class="container">
<div class="navbar-header">
Brand
<a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<i class="fa fa-bars"></i>
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Link</li>
<li>Link</li>
</ul>
<ul class="nav pull-right navbar-nav">
<li>
Link
</li>
</ul>
</div>
</div>
</nav>
This question is only to make the transparent Navbar. To change style after scrolling or at some Navbar position see: Animate/Shrink NavBar on scroll using Bootstrap 4
You need to remove the background from your nav-bar:
.navbar-default {
background: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<style>
html,
body {
height: 100%;
background: red;
}
.navbar-default {
background: none;
border: none;
}
</style>
<!-- Wrap all page content here -->
<div id="wrap">
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</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 class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
Just take the backgound image in Body and then use this code
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-
toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Username</li>
</ul>
</div>
</div>
</div>
<div class="wide">
<div class="col-xs-5 line"><hr></div>
<div class="col-xs-2 logo">Logo</div>
<div class="col-xs-5 line"><hr></div>
</div>
<div class="container">
<div class="text-center">
<h1>Content</h1>
</div>
</div>
Also used styling style="opacity:0.6;" in Navbar div
The background colour is set on the .navbar-default class so make sure your css is using that class to target turning the bar transparent. e.g.
.navbar-default{background-color: transparent;}
As Turnip states, this needs to be applied after the bootstrap styles in your <head>
If you really want to force it whilst you are getting it to work add the following attribute to your <nav> element
style="background-color: transparent;"
So your nav element looks like this:
<nav class="navbar navbar-default" style="background-color: transparent;">
However, it obviously better to have this within a CSS file, rather than as inline HTML
.navbar{
background:transparent;
}
This will make your background transparent.
<div class = "collapse navbar-collapse navHeaderCollapse">
<ul class = "nav navbar-nav navbar-right">
<li>Home</li>
<li>Blog</li>
<li class = "dropdown">
Social Media<b class= "caret"></b>
<ul class = "dropdown-menu">
<li>Twitter</li>
<li>Facebook</li>
<li>LinkedIn</li>
</ul>
</li>
</ul>
</div>
This is the result:
How to place the collapsing navbar in a new line?
Edit:
I want to display my navigation bar in a new line as in following picture.
Try the sample of code for Collapsible Navigation Bar to be appeared in a new row.
.heading {
text-align: center;
}
.navbar .navbar-collapse {
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.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 class="row">
<div class="col-sm-12 heading">
<h1>Heading goes here</h1>
</div>
</div>
<div class="row">
<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</a></li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</div>
</nav>
</div>
</body>
</html>
Here is the sample PEN, hope this will be helpful to you.
Here is the working fiddle I set up
<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 navbar-right">
<li>Home</li>
<li>Blog</li>
<li class = "dropdown">
Social Media<b class= "caret"></b>
<ul class = "dropdown-menu">
<li>Twitter</li>
<li>Facebook</li>
<li>LinkedIn</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Here is the result:
What is going on is that your class navHeaderCollapse is probably effecting on your code.
Please post your current CSS class so we can take a look at it.
Good luck!
I've made a website using bootstrap, I don't know much about this framework. What I'm having difficulty with is styling the navbar.
What I would like to do is move the name, and three titles, 'work', 'about', and 'contact', to the left corner of the page, and move the social media icons, to the right corner of the page. Could someone instruct me on how I could do this while still retaining the functions that bootstrap offers?
Here is a jsfiddle: https://jsfiddle.net/3kq7ptxd/
The jsfiddle looks different from the actual website, so if you go on paulopinzon.com you will maybe get a clearer idea of what I'm attempting.
Thanks for taking the time! I will try to experiment with things in the mean time, but if someone with more experience could help that would be much appreciated.
Have a good day
HTML:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href="css/yourCustom.css" rel="stylesheet"/>
<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.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<nav role="navigation" class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> Paulo Pinzon-Iradian
</div>
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Work
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a target="_blank" href="https://www.facebook.com/pages/Paulo-Pinzon-Iradian/849542288428399" style="color:#3b5197;"><i class="fa fa-facebook-square"></i></a>
</li>
<li><a target="_blank" href="https://instagram.com/paulopinzonart/" style="color:#125688;"><i class="fa fa-instagram"></i></a>
</li>
<li><a target="_blank" href="https://twitter.com/PauloPinzonArt" style="color:#00c7f4;"><i class="fa fa-twitter-square"></i></a>
</li>
</ul>
</div>
</div>
</nav>
Change the navbar .container to .container-fluid.
Basically .container-fluid continuously re-sizes on change of viewport and leaves no extra empty space on the sides ever, unlike .container.
.container-fluid has the CSS property width: 100%;, so it continually readjusts at every screen width granularity.
<nav role="navigation" class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> Paulo Pinzon-Iradian
</div>
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Work
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a target="_blank" href="https://www.facebook.com/pages/Paulo-Pinzon-Iradian/849542288428399" style="color:#3b5197;"><i class="fa fa-facebook-square"></i></a>
</li>
<li><a target="_blank" href="https://instagram.com/paulopinzonart/" style="color:#125688;"><i class="fa fa-instagram"></i></a>
</li>
<li><a target="_blank" href="https://twitter.com/PauloPinzonArt" style="color:#00c7f4;"><i class="fa fa-twitter-square"></i></a>
</li>
</ul>
</div>
</div>
</nav>
CODEPEN DEMO
Try to add following code to your css styles, did it what you wanted to?
nav .container {
margin: 0 auto;
width: 100%;
}
from
<nav role="navigation" class="navbar navbar-default navbar-static-top">
<div class="container">
to
<nav role="navigation" class="navbar navbar-default navbar-static-top">
<div class="container-fluid">