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>
Related
I'm trying to align the text of the navbar items lowerin bootstrap 4. My idea was to align them to the bottom of the ul and then position the ul but I seem to fail to do both. The goal is to have the text (approximately) at the same height of the brand like this:
I have found some questions but most of them are for bootstrap 3 or don't work for some reason I don't understand.
This is example html:
<nav class="navbar navbar-expand-md navbar-dark bg-primary fixed-top">
<a class="navbar-brand" style="font-family: sans-serif; font-weight: 800; font-style: italic; font-size:xx-large;">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item" >
<p style="vertical-align:bottom;" >Test</p>
</li>
<li class="nav-item<?php addActiveClass('/index.php'); ?>">
<a class="nav-link" href="index.php">Test</a>
</li>
<li class="nav-item d-none d-md-block"><img src="" id="profileImage" height="40" width="40" style="margin-right: 10px; border-radius: 5px;"></li>
</ul>
</div>
I use this bootstrap theme and example css:
.navbar
{
padding:0rem 0.75rem;
}
.navbar-brand
{
padding: 0;
margin:0;
}
.navbar-nav > li
{
line-height: 36px;
padding: 0;
margin: 0;
background: red;
}
.navbar-nav > li > a
{
padding: 0;
margin: 0;
background: red;
vertical-align: bottom;
}
.navbar-nav > li > p
{
padding: 0;
margin: 0;
background: yellow;
vertical-align: bottom;
}
A complete example is available here:
https://jsfiddle.net/d6n5z3gb/8/
Add align-items-end to the navbar-nav to align the items to the bottom...
<ul class="navbar-nav align-items-end ml-auto">
<li class="nav-item" >
</li>
</ul>
And, remove the custom line-height...
.navbar-nav > li > a
{
padding: 0;
margin: 0;
background: red;
vertical-align: bottom;
}
Update on Codeply: https://www.codeply.com/go/usR58ejrtg
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.
This question already has answers here:
Bootstrap 3 Navbar Collapse
(12 answers)
Closed 6 years ago.
I've been learning bootstrap 3 and sass for last few days. Anyway, I'm trying to make a navbar that collapses when screen size is below 1000px. And it works, but when I click on toggle button, to show menu dropdown, it opens, then instantly closes.
Here is the code: http://jsbin.com/zahatekisa/edit?html,css,output
.navbar {
background-color: #202C39;
}
div.navbar-header a.navbar-brand {
font-family: "Caveat Brush";
margin-right: 20px;
font-size: 23px;
color: #F29559;
}
div.navbar-header a.navbar-brand:hover {
color: #ffb36b;
}
ul.nav.navbar-nav li a {
font-family: "PT Sans", "cursive";
color: #e6e6e6;
}
ul.nav.navbar-nav li a:hover {
color: #ffffff;
background-color: #2a394a;
}
ul.navbar-right li p.navbar-text {
display: block;
}
#media (max-width: 1050px) {
ul.navbar-right li a {
float: left;
}
ul.navbar-right li p.navbar-text {
margin-left: 15px;
position: relative;
top: -4px;
}
}
#media (max-width: 1000px) {
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.navbar-collapse.collapse {
display: none !important;
}
.navbar-nav {
float: none !important;
margin: 7.5px -15px;
}
.navbar-nav > li {
float: none;
}
.navbar-nav > li > a {
padding-top: 10px;
padding-bottom: 10px;
}
}
<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"/>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<!--Making the toggle button-->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--Logo-->
Lorem ipsum dolor.
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Lorem
</li>
<li>Lorem
</li>
<li>Lorem
</li>
<li>Lorem
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<p class="navbar-text">Contact Me:</p>
</li>
<li><i class="fa fa-facebook-official" aria-hidden="true"></i>
</li>
<li><i class="fa fa-twitter-square" aria-hidden="true"></i>
</li>
<li><i class="fa fa-skype" aria-hidden="true"></i>
</li>
<li><i class="fa fa-envelope" aria-hidden="true"></i>
</li>
</ul>
</div>
</div>
</nav>
The problem here is this particular style you have, which is forcing the navbar to be hidden regardless of whether it is open or closed:
#media (max-width: 1000px) {
.navbar-collapse.collapse {
display: none !important;
}
}
I can see what you're doing here - you're trying to combine Bootstrap's .collapse class with your own custom addition to the navbar. However, there's a problem with your logic: I suspect you wrote your style under the assumption that Bootstrap toggles .collapse to hide or show collapsed content. This is incorrect. In fact, Bootstrap toggles .in for this - so you should not be hiding the content if the element has the class .in. Simply change your selector to:
#media (max-width: 1000px) {
.navbar-collapse.collapse:not(.in) {
display: none !important;
}
}
Here's the fix in context:
.navbar {
background-color: #202C39;
}
div.navbar-header a.navbar-brand {
font-family: "Caveat Brush";
margin-right: 20px;
font-size: 23px;
color: #F29559;
}
div.navbar-header a.navbar-brand:hover {
color: #ffb36b;
}
ul.nav.navbar-nav li a {
font-family: "PT Sans", "cursive";
color: #e6e6e6;
}
ul.nav.navbar-nav li a:hover {
color: #ffffff;
background-color: #2a394a;
}
ul.navbar-right li p.navbar-text {
display: block;
}
#media (max-width: 1050px) {
ul.navbar-right li a {
float: left;
}
ul.navbar-right li p.navbar-text {
margin-left: 15px;
position: relative;
top: -4px;
}
}
#media (max-width: 1000px) {
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.navbar-collapse.collapse:not(.in) {
display: none !important;
}
.navbar-nav {
float: none !important;
margin: 7.5px -15px;
}
.navbar-nav > li {
float: none;
}
.navbar-nav > li > a {
padding-top: 10px;
padding-bottom: 10px;
}
}
<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"/>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<!--Making the toggle button-->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--Logo-->
Lorem ipsum dolor.
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Lorem
</li>
<li>Lorem
</li>
<li>Lorem
</li>
<li>Lorem
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<p class="navbar-text">Contact Me:</p>
</li>
<li><i class="fa fa-facebook-official" aria-hidden="true"></i>
</li>
<li><i class="fa fa-twitter-square" aria-hidden="true"></i>
</li>
<li><i class="fa fa-skype" aria-hidden="true"></i>
</li>
<li><i class="fa fa-envelope" aria-hidden="true"></i>
</li>
</ul>
</div>
</div>
</nav>
(Something else worth noting is that you may want to use max-width: 768px rather than max-width: 1000px for your media query, since that's the Bootstrap breakpoint for "tablet" sized devices.)
It's pretty easy to center the links in a bootstrap navbar (see fiddle in one of the responses to similar questions, here).
How can one center the collapsed "hamburger" so that it appears in the center of the navigation bar as well?
For refernece, the relevant code is below:
<style>
#media (min-width:768px) {
/* centered navigation */
.nav.navbar-nav {
float: left;
}
.nav.navbar-nav {
clear: left;
float: left;
margin: 0;
padding: 0;
position: relative;
left: 50%;
text-align: center;
}
.nav.navbar-nav > li {
position: relative;
right: 50%;
}
.nav.navbar-nav li {
text-align: left
}
}
</style>
<nav class="navbar navbar-default">
<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>About</li>
<li>Posts</li>
<li>Recipes</li>
<li>Press</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
Center "hamburger" is also pretty easy:
.navbar-header{
text-align:center;
}
.navbar-toggle {
float: none;
margin-right:0;
}
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>