I was wondering how I can ensure that section 1 and two's background colour fills the whole of the webpage like in this example. As you can see on my site, the background colour on covers half of the webpage I want the background colour for section one and two to full the whole background of that section.
I have tried using the CSS. However, this doesn't work.
.one {
background-color:#c00;
margin-left: auto;
margin-right: auto;
height: 100%;
width: 100%;
}
SITE CODE
<!DOCTYPE html>
<html lang="en">
<head>
<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://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style>
.body {
font-family: 'Roboto', sans-serif;
color: black;
}
.navbar.navbar-default {
background-color: #FFFFFF;
height: 10vh;
z-index: 100;
}
.navbar.navbar-default ul {
list-style-type: none;
text-align: center;
}
.navbar.navbar-default ul li {
display: inline-block;
}
.dropdown-menu li {
text-align: center;
}
.dropdown .dropdown-menu {
background-color: #FFFFFF;
}
.dropdown .dropdown-menu a {
color: white;
}
.navbar.navbar-default ul li a {
display: inline-block;
padding: 3.5vh 8px 4px;
color: black;
text-decoration: none;
font-size: 14pt;
font-family: 'Roboto', sans-serif;
}
.navbar.navbar-default ul li:after {
content: '';
position: absolute;
right: 50%;
bottom: 0;
left: 50%;
height: 3px;
background-color: black;
border-radius: 9px;
transition: all .2s;
}
.nav.navbar-nav,
.nav.navbar-nav>li {
float: none;
}
.navbar.navbar-default ul li:hover:after {
right: 0;
left: 0;
}
.navbar.navbar-default ul.dropdown-menu li,
.navbar.navbar-default ul.dropdown-menu li a {
position: relative;
display: block;
}
.one {
background-color:#c00;
margin-left: auto;
margin-right: auto;
height: 100%;
width: 100%;
}
.two {
background: #563D7C;
}
</style>
<body>
<div class="container">
<nav class="navbar navbar-default navbar-fixed-top">
<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>
</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>Home
</li>
<li class="dropdown">
About Me <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Contact
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li class="dropdown">
Units <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li>Clients
</li>
<li>Contact Me
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div id="sections">
<div class="section one">
<div class="jumbotron text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</div>
<div class="section two"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.min.js"></script>
<script>
$(document).ready(function() {
$('#sections').fullpage();
});
</script>
</body>
</html>
It looks like you are loading jQuery twice. Once in the header (in the Bootstrap links) and once in the footer, for fullpage.js. Since you already loaded it once, you don't need it the second time.
Wrapping all your content in a .container will add a 15px left and right padding to your content, unless you don't place everything in it inside .row (which compensates), as in all the Bootstrap examples.
Make sure your markup is correct and validates. I also added a small CSS:
#sections .section {
padding-top: 10vh;
}
...to compensate for the height of the navbar.
However, please note it is not recommended to have the navbar in scalable units(vh). You should just stick to Bootstrap's defaults (50px). The problem with having a fixed navigation of 10vh is it will eat up too much real estate on mobile devices in portrait mode while not being tall enough for touch events in landscape mode. So, IMHO, you should change both the top padding of the .sections and the navbar height back to ~50px (min 42px). The important part is you should use px instead of vh for navbar height.
Here it is:
$(document).ready(function() {
$('#sections').fullpage();
});
.body {
font-family: 'Roboto', sans-serif;
color: black;
}
.navbar.navbar-default {
background-color: #FFFFFF;
height: 10vh;
z-index: 100;
}
.navbar.navbar-default ul {
list-style-type: none;
text-align: center;
}
.navbar.navbar-default ul li {
display: inline-block;
}
.dropdown-menu li {
text-align: center;
}
.dropdown .dropdown-menu {
background-color: #FFFFFF;
}
.dropdown .dropdown-menu a {
color: white;
}
.navbar.navbar-default ul li a {
display: inline-block;
padding: 3.5vh 8px 4px;
color: black;
text-decoration: none;
font-size: 14pt;
font-family: 'Roboto', sans-serif;
}
.navbar.navbar-default ul li:after {
content: '';
position: absolute;
right: 50%;
bottom: 0;
left: 50%;
height: 3px;
background-color: black;
border-radius: 9px;
transition: all .2s;
}
.nav.navbar-nav,
.nav.navbar-nav>li {
float: none;
}
.navbar.navbar-default ul li:hover:after {
right: 0;
left: 0;
}
.navbar.navbar-default ul.dropdown-menu li,
.navbar.navbar-default ul.dropdown-menu li a {
position: relative;
display: block;
}
.one {
background-color:#c00;
margin-left: auto;
margin-right: auto;
height: 100%;
width: 100%;
}
.two {
background: #563D7C;
}
#sections .section {
padding-top: 10vh;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top">
<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>
</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>Home
</li>
<li class="dropdown">
About Me <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Contact
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li class="dropdown">
Units <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li>Clients
</li>
<li>Contact Me
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div id="sections">
<div class="section one">
<div class="jumbotron text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</div>
<div class="section two"></div>
</div>
Additional note:
fullpage.js takes care of the fullpage thing for you. However, I happen to believe this is something CSS is capable of doing without any js, using, in principle:
.section {
min-height: 100vh;
}
...and probably flexbox to center align or distribute children nicely.
But, by using fullpage.js, you don't need to do it via CSS.
Related
I am new to CSS and trying to enable a responsive centered/navbar menu to my page with a logo positioned to left of navigation menu. Everything visually and functionally appears OK however the image logo link is not working (will not hyperlink) and I cannot figure out why. Any help or guidance to what I might be missing? Thanks so much in advancce. Here is my HTML/CSS.
<nav class="navbar navbar-default">
<div class="container">
<a class="navbar-brand" href="https://www.mytestorganization.com">
<img src="/logo/content/items/925f35a5b1cb48379a2e2c416b4f03e4/data"
width="120" alt="myOrgLogo" />
</a>
<!-- This is optional and can be removed. -->
<div class="container-fluid">
<!-- This is what generates your burger menu icon on mobile -->
<div class="navbar-header">
<button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span> </button>
</div>
<!-- This is what gets hidden behind the burger menu icon -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
Nav1
<ul class="dropdown-menu">
<li>
Menu1
</li>
</ul>
</li>
<li class="dropdown">
Nav2
<ul class="dropdown-menu">
<li>
menu2
</li>
</ul>
</li>
<li class="dropdown">
Nav3
<ul class="dropdown-menu">
<li>
menu3
</li>
</ul>
</li>
<li class="dropdown">
nav4
<ul class="dropdown-menu">
<li>
Menu4
</li>
</ul>
</li>
<li class="dropdown">
nav5
<ul class="dropdown-menu">
<li>
menu5
</li>
</ul>
</li>
<li class="dropdown">
nav6
<ul class="dropdown-menu">
<li>
menu6
</li>
</ul>
</li>
<li class="dropdown">
nav7
<ul class="dropdown-menu">
<li>
Menu7
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
</div>
<!-- /.container-fluid -->
</nav>
.navbar-brand {
float: left;
padding:0;
padding-left: 0px;
}
.navbar{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
}
.navbar-nav {
position: absolute;
left: 0%;
top: 0%;
right: 0%;
bottom: 0%;
z-index: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
#media screen and (max-width: 768px) {
.header-container .navbar-header {
width: 100%;
}
.navbar-default .navbar-toggle {
margin-top: 18px;
}
.navbar .container-fluid {
display: block !important;
}
.navbar.navbar-default .navbar-collapse.collapse {
overflow: hidden;
display: none !important;
}
.navbar.navbar-default .navbar-collapse.collapse.in {
display: block !important;
}
.navbar.navbar-default .navbar-nav {
display: inherit;
padding: 0 0 1rem 0;
}
.navbar.navbar-default .navbar-nav > li {
display: block;
}
}
the link in href="https://www.mytestorganization.com" is not working. There is no webpage with this url. But if you are looking for a cursor change when you hover over your logo or click on logo image then you can apply this style.
.navbar-brand {
float: left;
padding:0;
padding-left: 0px;
cursor:pointer;
}
.navbar-brand:hover{
cursor:pointer;
}
I have a navbar with many links/options:
When I collapsed it, some options are totally off the screen and I can't click on them:
In the pic, I can see link 4, but not link 5 and link 6.
Using a dropdown menu will do the same thing.
.navbar {
border: 0;
border-bottom: 1px solid #FFF;
background-color: #111 !important;
border-radius: 0px;
}
/* Adjust Toggle button */
.navbar-toggle {
margin-top: 18px;
}
/* Adjust Navbar Height */
.navbar-brand,
.navbar-nav li a {
padding-top: 0;
}
.navbar-brand,
.navbar-nav li a {
color: #FFF !important;
line-height: 70px;
height: 70px;
}
.navbar-brand {
color: #0CF !important;
}
.navbar-brand:hover,
.navbar-nav li a:hover {
background-color: #06C !important;
color: #0f9 !important;
}
.dropdown-menu > li > a {
line-height: 40px;
height: 40px;
}
.navbar-nav .open .dropdown-toggle {
background-color: #222 !important;
}
.navbar div ul li .dropdown-menu {
background-color: #222;
border-top: 2px solid #09f;
}
/* Nav Affix */
nav.affix {
position: fixed;
top: 0;
width: 100%;
z-index:10;
}
.affix + .container {
padding-top: 90px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
<nav class="navbar navbar-default" data-spy="affix" data-offset-top="308">
<div class="container">
<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="#">
<i class="fa fa-adjust" aria-hidden="true"></i>
Brand
</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-left">
<li>Storyline</li>
<li>Characters</li>
<li>Gallery</li>
<!--li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Misc<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>About</li>
<li>Contact</li>
<li>Other</li>
</ul>
</li-->
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
</ul>
</div>
</div>
</nav>
<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Something is wrong with your javascript probably. I see there is class .affix-top getting added to the .navbar .navbar-default. Remove that and your nav will scroll properly.
I'm new to Bootstrap and I'm trying to center the navbar both horizontally and vertically so it looks something like this but I can't seem to figure it out.
Here's the html:
<html>
<body>
<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="#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>
</div>
<div class="collapse navbar-collapse" id="nav">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Pages</li>
<li>Features</li>
<li>Mega menu</li>
<li>Contact</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
and CSS:
nav {
color: #fff;
height: 112px;
text-transform: uppercase;
font-size: 15px;
font-weight: bold;
}
If you want to center the links you need to apply those rules to the .navbar-nav and li classes (most likely you'll want these inside a media-query as well).
Centered Links CSS
#media (min-width: 768px) {
.navbar.navbar-default .navbar-nav {
width: 100%;
text-align: center;
}
.navbar.navbar-default .navbar-nav > li {
display: inline-block;
float: none
}
}
And you can use line-height to adjust the height of your links so they're vertically aligned.
Vertical Link Alignment
#media (min-width: 768px) {
.navbar.navbar-default .navbar-nav > li > a {
line-height: 4;
}
}
Working Example:
.navbar.navbar-default {
background: white;
border: 1px solid transparent
}
.navbar.navbar-default .navbar-nav.navbar-center > li > a,
.navbar.navbar-default .navbar-search > li > a {
color: #266080;
}
#media (max-width: 767px) {
.navbar.navbar-default {
padding: 15px 0;
}
.navbar.navbar-default .navbar-collapse {
margin-top: 15px;
margin-bottom: -15px;
border: 0;
box-shadow: none;
}
}
#media (min-width: 768px) {
.navbar.navbar-default {} .navbar.navbar-default .navbar-nav.navbar-center {
width: 100%;
text-align: center;
}
.navbar.navbar-default .navbar-nav.navbar-center > li {
display: inline-block;
float: none
}
.navbar.navbar-default .navbar-nav.navbar-center > li > a {
line-height: 4;
text-transform: uppercase;
font-size: 14px;
font-weight: bold;
}
.navbar.navbar-default .navbar-search {
position: absolute;
right: 2%;
top: 17px;
line-height: 4;
font-size: 20px;
}
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#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>
</div>
<div class="collapse navbar-collapse" id="nav">
<ul class="nav navbar-nav navbar-center">
<li class="active">Home
</li>
<li>Portfolio
</li>
<li>Blog
</li>
<li>Pages
</li>
<li>Features
</li>
<li>Mega menu
</li>
<li>Contact
</li>
</ul>
<ul class="nav navbar-nav navbar-right navbar-search">
<li><span class="glyphicon glyphicon-search"></span>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
I am working with a template and the navbar has a strange movement when it fixes on top. I am using bootstrap.
Here you can see a little video with the situation: http://i.imgur.com/trrmJj7.gifv
I tried changing the color of the menu to black so it fixes also to black but it still has the same effect. Tried also in various browsers. Cant this be fixed or is it a bug?
Here is my HTML:
<div id="menu">
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target="#menu-content">
<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 src="img/other/03_Logo.png"> <span>BRAND</span>
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="menu-content">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Services</li>
<li>Profile</li>
<li>Portfolio</li>
<li>Testimonials</li>
<li>Contact</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
And CSS:
#menu {
width: 100%;
position: absolute;
bottom: 0; }
#menu nav {
border: medium none;
background: black;
margin-bottom: 0px; }
#menu nav.navbar {
padding: 10px 0px;
border-radius: 0; }
#menu nav.navbar.navbar-fixed-top {
padding: 5px 0px; }
#menu nav.navbar-fixed-top {
background: black; }
#menu .navbar-brand {
padding: 15px 0px 0px 15px; }
#menu .navbar-brand img {
width: 45px;
float: left;
margin-top: -10px; }
#menu .navbar-brand span {
float: left;
display: block; }
Remove from your css, property bottom: 0 given to id #menu. Then it should work fine.
I am using navbar from Bootstrap3. There I just placed 2 links and social media icons. When the toggle-button is pressed I need to have the social media links content centered when the viewport is a smaller device like a phone or tablet. In my snippet the social links appeared to the left. Any help will be greatly appreciated.
<!-- Placed at the end of the document so the pages load faster -->
< script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" > < /script>
<!-- Latest compiled and minified JavaScript -->
<script src="https:/ / maxcdn.bootstrapcdn.com / bootstrap / 3.3.5 / js / bootstrap.min.js "></script>
/*css plugin for jquery content*/
.contenthover {
padding: 20px 20px 10px 20px;
}
.contenthover,
.contenthover h3,
contenthover a {
color: #fff;
}
.contenthover h3,
.contenthover p {
margin: 0 0 10px 0;
line-height: 1.4em;
padding: 0;
}
.contenthover a.mybutton {
display: block;
float: left;
padding: 5px 10px;
background: #3c9632;
color: #fff;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
.contenthover a.mybutton:hover {
background: #34742d
}
/*website*/
body {
margin: 0px;
padding: 0px;
font-family: "Gotham SSm A", "Gotham SSm B", sans-serif;
font-weight: 300;
}
.navbar-text {
margin: 0px;
}
.navbar-text > i {
color: inherit;
text-decoration: none;
}
/****************modifying bootstrap***********************/
.navbar-default {
background-color: #fff;
margin-bottom: 0px;
}
#mylinks {
display: inline;
}
#centered li {
text-align: center;
}
.nav-pills {
padding-top: 5px;
margin-left: 0px;
}
#cont-socialmedia {
margin: 0px;
padding: 0px;
text-align: center;
}
#main_cont {
Padding-top: 15px;
Padding-bottom: 15px;
background-color: pink;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: blue;
/*Sets the text hover color on navbar*/
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: rgb(84, 5, 29);
/*BACKGROUND color for active*/
background-color: white;
}
.nav > li > a:hover,
.nav > li > a:focus {
text-decoration: none;
background-color: gray;
/*Change rollover cell color here*/
}
.navbar-default .navbar-nav > li > a {
color: rgb(84, 5, 29);
/*Change active text color here*/
}
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Social icons -->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<!--toggle-->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mylinks" 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>
<!--brand-->
<a class="navbar-brand" href="#">MILY VIDAL</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-right" id="mylinks">
<ul class="nav navbar-nav" id="centered">
<li class="active">Portfolio<span class="sr-only">(current)</span>
</li>
<li>Contact
</li>
</ul>
<!--testing new way to put smedia-->
<ul class="nav navbar-nav navbar-right nav-pills">
<li>
<i class="fa fa-linkedin"></i>
</li>
<li>
<a href="http://twitter.com/" class="btn btn-social-icon btn-twitter">
<i class="fa fa-twitter"></i>
</a>
</li>
<li>
<a href="http://www.linkedin.com/in/" class="btn btn-social-icon btn-linkedin">
<i class="fa fa-linkedin"></i>
</a>
</li>
<li>
<a href="https://github.com/broadmarkio" class="btn btn-social-icon btn-github">
<i class="fa fa-github"></i>
</a>
</li>
</ul>
<!--
<div class="navbar-text">
<a class="btn btn-social-icon" title="LinkedIn" href="#"><span><i class="fa fa-linkedin"></i></span></a>
<a class="btn btn-social-icon" title="JSFiddle" href="#"><span><i class="fa fa-jsfiddle"></i></span></a>
<a class="btn btn-social-icon" title="GitHub" href="#"><span><i class="fa fa-github"></i><span></a>
</div>
-->
<!--to delete
<li><a class="rssBtn smGlobalBtn" href="#" ></a></li>
<li><a class="linkedinBtn smGlobalBtn""></a></li>
-->
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!--navbar ends-->
</body>
Include the break-point 768px in the media-query. Set a width for the icons parent element for margin: 0 auto to work.
#media (max-width: 768px) {
#mylinks ul.nav.navbar-nav.navbar-right.nav-pills {
width: 200px;
margin: 0 auto;
}
}
<!-- Placed at the end of the document so the pages load faster -->
< script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" > < /script>
<!-- Latest compiled and minified JavaScript -->
<script src="https:/ / maxcdn.bootstrapcdn.com / bootstrap / 3.3.5 / js / bootstrap.min.js "></script>
/*css plugin for jquery content*/
.contenthover {
padding: 20px 20px 10px 20px;
}
.contenthover,
.contenthover h3,
contenthover a {
color: #fff;
}
.contenthover h3,
.contenthover p {
margin: 0 0 10px 0;
line-height: 1.4em;
padding: 0;
}
.contenthover a.mybutton {
display: block;
float: left;
padding: 5px 10px;
background: #3c9632;
color: #fff;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
.contenthover a.mybutton:hover {
background: #34742d
}
/*website*/
body {
margin: 0px;
padding: 0px;
font-family: "Gotham SSm A", "Gotham SSm B", sans-serif;
font-weight: 300;
}
.navbar-text {
margin: 0px;
}
.navbar-text > i {
color: inherit;
text-decoration: none;
}
/****************modifying bootstrap***********************/
.navbar-default {
background-color: #fff;
margin-bottom: 0px;
}
#mylinks {
display: inline;
}
#centered li {
text-align: center;
}
.nav-pills {
padding-top: 5px;
margin-left: 0px;
}
#cont-socialmedia {
margin: 0px;
padding: 0px;
text-align: center;
}
#main_cont {
Padding-top: 15px;
Padding-bottom: 15px;
background-color: pink;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: blue;
/*Sets the text hover color on navbar*/
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: rgb(84, 5, 29);
/*BACKGROUND color for active*/
background-color: white;
}
.nav > li > a:hover,
.nav > li > a:focus {
text-decoration: none;
background-color: gray;
/*Change rollover cell color here*/
}
.navbar-default .navbar-nav > li > a {
color: rgb(84, 5, 29);
/*Change active text color here*/
}
#media (max-width: 768px) {
div#mylinks ul.nav.navbar-nav.navbar-right.nav-pills {
width: 200px;
margin: 0 auto;
}
}
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Social icons -->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<!--toggle-->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mylinks" 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>
<!--brand-->
<a class="navbar-brand" href="#">MILY VIDAL</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-right" id="mylinks">
<ul class="nav navbar-nav" id="centered">
<li class="active">Portfolio<span class="sr-only">(current)</span>
</li>
<li>Contact
</li>
</ul>
<!--testing new way to put smedia-->
<ul class="nav navbar-nav navbar-right nav-pills">
<li>
<i class="fa fa-linkedin"></i>
</li>
<li>
<a href="http://twitter.com/" class="btn btn-social-icon btn-twitter">
<i class="fa fa-twitter"></i>
</a>
</li>
<li>
<a href="http://www.linkedin.com/in/" class="btn btn-social-icon btn-linkedin">
<i class="fa fa-linkedin"></i>
</a>
</li>
<li>
<a href="https://github.com/broadmarkio" class="btn btn-social-icon btn-github">
<i class="fa fa-github"></i>
</a>
</li>
</ul>
<!--
<div class="navbar-text">
<a class="btn btn-social-icon" title="LinkedIn" href="#"><span><i class="fa fa-linkedin"></i></span></a>
<a class="btn btn-social-icon" title="JSFiddle" href="#"><span><i class="fa fa-jsfiddle"></i></span></a>
<a class="btn btn-social-icon" title="GitHub" href="#"><span><i class="fa fa-github"></i><span></a>
</div>
-->
<!--to delete
<li><a class="rssBtn smGlobalBtn" href="#" ></a></li>
<li><a class="linkedinBtn smGlobalBtn""></a></li>
-->
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!--navbar ends-->
</body>