Need Help Cleaning CSS Script / Overriding Bootstrap - html

I'm NOT a computer programmer, but I've been assigned the task of designing a webpage. Here's what I have:
<!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>Example</title>
<!-- Bootstrap -->
<link href="file:///Users/Theresa/Desktop/1page/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="all">
<!---Custom -->
<link href="file://localhost/Users/Theresa/Desktop/1page/custom.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-inverse">
<div class="navbar-header">
shastic
</div>
</nav>
<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>
<a class="navbar-brand" href="#">Shastic</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="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Text</li>
<li><span class="glyphicon glyphicon-log-in"></span> Text</li>
</ul>
</div>
</div>
</nav>
<div class="container" style="background: #f1f1f1;;">
<div class="row">
<div class="col-sm-3 col-md-3 col-lg-3" style="background-color:#f1f1f1;">
<h1 style=" font-weight: 300; font-size: 72px; color: #666666; margin-bottom: -22px;">01</h1>
<h2 style="font-size: 26px; font-weight: 300; color: #666666; text-transform: uppercase; -webkit-font-smoothing: antialiased;">overview</h2>
<p style="font-size: 12px;
-webkit-font-smoothing: antialiased;">
Jump to same section in another guide:</p>
Web | Homepage
</div>
<div class="col-sm-9 col-md-3 col-lg-3" style="background-color:#f1f1f1; font-size: 20px; font-weight: 300; color: #666666;-webkit-font-smoothing: antialiased; display: block; margin-right:-10px; margin-top:50px; text-align: center;">
The designs in this guide cover the visual treatment and interaction details for the mobile SSO pages from the below the top navigation bar. They also provide an overview of how the navigation works for Mobile SSO pages.
</div>
<div class="ol-sm-3 col-md-6 col-lg-6" style="background-color:#f1f1f1; padding: 20px;">
<img src="file:///Users/Theresa/Desktop/1page/images/iphone.png"><BR>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="file:///Users/Theresa/Desktop/1page/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Basically, my HTML is really complicated because I can't for the life of me figure out how to override bootstrap's CSS (fonts,etc.) for the container section. Another problem I'm having is I can't change the OVERALL body background color from white to another color.
Here's my CSS:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
</HEAD>
<body>
<style>
/* navbar */
.navbar.navbar-default {
background-color: #0078B1;
border-color: #E7E7E7;
}
.navbar.navbar-inverse {
background-color: #003B6A;
border-color: #003B6A;
margin-bottom: -20px;
padding-bottom: 20px;
}
.container-fluid{
background-color: #0078B1;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
-webkit-font-smoothing: antialiased;
text-align: right;
}
/* title */
.navbar-default .navbar-brand {
color: #FFF;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #0078B1;
}
/* link */
.navbar-default .navbar-nav > li > a {
color: #FFF;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #FFF;
text-decoration: underline;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #FFFFFF;
background-color: #0078B1;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #FFF;
background-color: #0078B1;
}
/* dropdown and caret */
.navbar-default .navbar-nav > .dropdown > a .caret {
border-top-color: #FFF;
border-bottom-color: #FFF;
}
.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
border-top-color: #0078B1;
border-bottom-color: #0078B1;
background-color: #0078B1;
}
.navbar-default .navbar-nav > .open > a .caret,
.navbar-default .navbar-nav > .open > a:hover .caret,
.navbar-default .navbar-nav > .open > a:focus .caret {
border-top-color: #0078B1;
border-bottom-color: #0078B1;
}
/* mobile version */
.navbar-default .navbar-toggle {
border-color: #DDD;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #DDD;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #CCC;
}
#media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #777;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #FFF;
}
/*body*/
.container{background-color: #0078B1;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
-webkit-font-smoothing: antialiased;
text-align: right;}
</style>
</body>
</HTML>
Any help appreciated. thank you very much.


Change navbar color in Twitter Bootstrap 3
Changing the navbar color has been discussed in detail at this link
Bootstrap comes with light/dark options by default - however if you want custom colour best read the details in the link above so were not duplicating too much info here.
<!-- A light one -->
<nav class="navbar navbar-default" role="navigation"></nav>
<!-- A dark one -->
<nav class="navbar navbar-inverse" role="navigation"></nav>

Related

Positioning of navbar

I have difficulties changing the positioning of my current navbar. Does anyone know what to do so it will be positioned centered below the logo? I have included a picture of how I would like the navbar to look.
.navbar.navbar-default {
background-color: #ffffff;
border-color: #ffffff;
padding-top:15px;
padding-bottom:30px;
}
.navbar.navbar-default .navbar-brand {
color: #696969;
}
.navbar.navbar-default .navbar-brand:hover,
.navbar.navbar-default .navbar-brand:focus {
color: #ff9c74;
}
.navbar.navbar-default .navbar-text {
color: #292929;
}
.navbar.navbar-default .navbar-nav > li > a {
color: #292929;
}
.navbar.navbar-default .navbar-nav > li > a:hover,
.navbar.navbar-default .navbar-nav > li > a:focus {
color: #747474;
}
.navbar.navbar-default .navbar-nav > .active > a,
.navbar.navbar-default .navbar-nav > .active > a:hover,
.navbar.navbar-default .navbar-nav > .active > a:focus {
color: #ff9c74;
background-color: #ffffff;
}
.navbar.navbar-default .navbar-nav > .open > a,
.navbar.navbar-default .navbar-nav > .open > a:hover,
.navbar.navbar-default .navbar-nav > .open > a:focus {
color: #ff9c74;
background-color: #ffffff;
}
.navbar.navbar-default .navbar-toggle {
border-color: #ffffff;
}
.navbar.navbar-default .navbar-toggle:hover,
.navbar.navbar-default .navbar-toggle:focus {
background-color: #ffffff;
}
.navbar.navbar-default .navbar-toggle .icon-bar {
background-color: #292929;
}
.navbar.navbar-default .navbar-collapse,
.navbar.navbar-default .navbar-form {
border:none;
}
.navbar.navbar-default .navbar-link {
color: #292929;
}
.navbar.navbar-default .navbar-link:hover {
color: #696969;
}
.navbar-brand {
transform: translateX(-50%);
left: 50%;
position: absolute;
}
.nav.navbar-nav > li.navbar-left {
font-family: 'Nunito Sans', sans-serif;
font-size: 11.5px;
}
.navbar-brand {
padding: 10px;
}
.navbar-brand>img {
height: 50px;
width: auto
}
#media (min-width: 768px) {
.navbar-brand { display: block; }
.navbar-bar-default .navbar-toggle {text-align: left;}
}
.fa.fa-instagram {
font-size: 18px;
}
.fa.fa-pinterest {
font-size: 18px;
}
.fa.fa-dribbble {
font-size: 18px;
}
.fa.fa-twitter{
font-size: 18px;
}
.banner {
width: 100%;
}
.banner-inner {
max-width:1100px;
margin: 0 auto;
}
#media (min-width:468px) and (max-width:991px){
.container.navbar-container {
width:100%;
padding:0px;
}
}
#media (min-width:468px) and (max-width:991px){
.container.navbar-container {
width:100%;
padding:0px;
}
}
body { padding-top: 90px; }
#media screen (min-width: 468px) and (max-width: 768px) {
body { padding-top: 0px; }
}
.banner-inner>img {
opacity:0;
-moz-transition: opacity 2s; /* Firefox 4 */
-webkit-transition: opacity 2s; /* Safari and Chrome */
-o-transition: opacity 2s;
transition: opacity 2s;
}
.col-1-1> img{
opacity:0;
-moz-transition: opacity 2s; /* Firefox 4 */
-webkit-transition: opacity 2s; /* Safari and Chrome */
-o-transition: opacity 2s;
transition: opacity 2s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device=width, initial-scale=1.0">
<title></title>
<meta name="author" content="">
<link rel="icon" type="image/png" href="img/icon.png"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href="css/sticky-footer.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito|Nunito+Sans|Playfair+Display" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<header>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
<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="http://"><img onload="this.style.opacity='1';" class= "logo" src="img/logo.png"></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="navbar-left">TRAVEL</li>
<li class="navbar-left"> PORTFOLIO </li>
<li class="navbar-left"> INSPO </li>
<li class="navbar-left"> ABOUT </li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="right"> <i class="fa fa-instagram"></i></li>
<li class="right"> <i class="fa fa-dribbble"></i></li>
<li class="right"> <i class="fa fa-pinterest"></i></li>
<li class="right"> <i class="fa fa-twitter"></i></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</div>
</div>
</header>
<!---End Header-->
<section class="banner">
<div class="banner-inner">
<img onload="this.style.opacity='1';" class="banner" src="img/background.jpg">
</div>
</section>
<!---End Banner-->
<!-- Begin page content -->
<footer class="footer">
<div class="container">
<span class>Copyright © 2017. JH. All rights reserved.</span>
</div>
</footer>
<!---End Footer-->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>

Your current HTML won't work, so I modified a few tiny things on it. Mainly just put your image in it's own div, giving it a "margin-top: 50px;" so that it will push down the Nav as your mock shows. (And put in a fun logo just for fun =P. You can replace it w/ your real one.) The reason you are having a hard time w/ this is that you also needed to override the CSS boostrap default code w/ your own for the logo.
In Desktop it now looks like your Mock. In Mobile, still looks good w/ the Logo and hamburger menu in same line. (You didn't clarify what behavior you wanted for Mobile, so I hope that's ok.)
Adding code below which I've also put in a CodePen: http://codepen.io/alejandra_quetzalli/pen/YZWMLY?editors=1100
img.navbar-brand {
height: 45px;
margin: 0;
padding: 0;
}
.navbar.navbar-default {
background-color: #ffffff;
border-color: #ffffff;
padding-top:15px;
padding-bottom:30px;
}
.navbar.navbar-default .navbar-brand {
color: #696969;
}
.navbar.navbar-default .navbar-brand:hover,
.navbar.navbar-default .navbar-brand:focus {
color: #ff9c74;
}
.navbar.navbar-default .navbar-text {
color: #292929;
}
.navbar.navbar-default .navbar-nav > li > a {
color: #292929;
}
.navbar.navbar-default .navbar-nav > li > a:hover,
.navbar.navbar-default .navbar-nav > li > a:focus {
color: #747474;
}
.navbar.navbar-default .navbar-nav > .active > a,
.navbar.navbar-default .navbar-nav > .active > a:hover,
.navbar.navbar-default .navbar-nav > .active > a:focus {
color: #ff9c74;
background-color: #ffffff;
}
.navbar.navbar-default .navbar-nav > .open > a,
.navbar.navbar-default .navbar-nav > .open > a:hover,
.navbar.navbar-default .navbar-nav > .open > a:focus {
color: #ff9c74;
background-color: #ffffff;
}
.navbar.navbar-default .navbar-toggle {
border-color: #ffffff;
}
.navbar.navbar-default .navbar-toggle:hover,
.navbar.navbar-default .navbar-toggle:focus {
background-color: #ffffff;
}
.navbar.navbar-default .navbar-toggle .icon-bar {
background-color: #292929;
}
.navbar.navbar-default .navbar-collapse,
.navbar.navbar-default .navbar-form {
border:none;
margin-top: 50px;
}
.navbar.navbar-default .navbar-link {
color: #292929;
}
.navbar.navbar-default .navbar-link:hover {
color: #696969;
}
.navbar-brand {
transform: translateX(-50%);
left: 50%;
position: absolute;
}
.nav.navbar-nav > li.navbar-left {
font-family: 'Nunito Sans', sans-serif;
font-size: 11.5px;
}
.navbar-brand {
padding: 10px;
}
.navbar-brand>img {
height: 50px;
width: auto
}
#media (min-width: 768px) {
.navbar-brand { display: block; }
.navbar-bar-default .navbar-toggle {text-align: left;}
}
.fa.fa-instagram {
font-size: 18px;
}
.fa.fa-pinterest {
font-size: 18px;
}
.fa.fa-dribbble {
font-size: 18px;
}
.fa.fa-twitter{
font-size: 18px;
}
.banner {
width: 100%;
}
.banner-inner {
max-width:1100px;
margin: 0 auto;
}
#media (min-width:468px) and (max-width:991px){
.container.navbar-container {
width:100%;
padding:0px;
}
}
#media (min-width:468px) and (max-width:991px){
.container.navbar-container {
width:100%;
padding:0px;
}
}
body { padding-top: 90px; }
#media screen (min-width: 468px) and (max-width: 768px) {
body { padding-top: 0px; }
}
.banner-inner>img {
opacity:0;
-moz-transition: opacity 2s; /* Firefox 4 */
-webkit-transition: opacity 2s; /* Safari and Chrome */
-o-transition: opacity 2s;
transition: opacity 2s;
}
.col-1-1> img{
opacity:0;
-moz-transition: opacity 2s; /* Firefox 4 */
-webkit-transition: opacity 2s; /* Safari and Chrome */
-o-transition: opacity 2s;
transition: opacity 2s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device=width, initial-scale=1.0">
<title></title>
<meta name="author" content="">
<link rel="icon" type="image/png" href="img/icon.png"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href="css/sticky-footer.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito|Nunito+Sans|Playfair+Display" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<header>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div><img class="navbar-brand" href="http://" onload="this.style.opacity='1';" class= "logo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/32877/logo-thing.png"></div>
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
<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><img class="navbar-brand" href="http://" onload="this.style.opacity='1';" class= "logo" src="img/logo.png"></div> -->
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="navbar-left">TRAVEL</li>
<li class="navbar-left"> PORTFOLIO </li>
<li class="navbar-left"> INSPO </li>
<li class="navbar-left"> ABOUT </li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="right"> <i class="fa fa-instagram"></i></li>
<li class="right"> <i class="fa fa-dribbble"></i></li>
<li class="right"> <i class="fa fa-pinterest"></i></li>
<li class="right"> <i class="fa fa-twitter"></i></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</div>
</div>
</header>
<!---End Header-->
<section class="banner">
<div class="banner-inner">
<img onload="this.style.opacity='1';" class="banner" src="img/background.jpg">
</div>
</section>
<!---End Banner-->
<!-- Begin page content -->
<footer class="footer">
<div class="container">
<span class>Copyright © 2017. JH. All rights reserved.</span>
</div>
</footer>
<!---End Footer-->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
EDIT
Updated above code to also center the nav bar links/icons as requested.
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device=width, initial-scale=1.0">
<title></title>
<meta name="author" content="">
<link rel="icon" type="image/png" href="img/icon.png"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href="css/sticky-footer.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito|Nunito+Sans|Playfair+Display" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<header>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div><img class="navbar-brand" href="http://" onload="this.style.opacity='1';" class= "logo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/32877/logo-thing.png"></div>
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
<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><img class="navbar-brand" href="http://" onload="this.style.opacity='1';" class= "logo" src="img/logo.png"></div> -->
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="navbar-left">TRAVEL</li>
<li class="navbar-left"> PORTFOLIO </li>
<li class="navbar-left"> INSPO </li>
<li class="navbar-left"> ABOUT </li>
</ul>
<ul class="nav navbar-nav">
<li class="right"> <i class="fa fa-instagram"></i></li>
<li class="right"> <i class="fa fa-dribbble"></i></li>
<li class="right"> <i class="fa fa-pinterest"></i></li>
<li class="right"> <i class="fa fa-twitter"></i></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</div>
</div>
</header>
<!---End Header-->
<section class="banner">
<div class="banner-inner">
<img onload="this.style.opacity='1';" class="banner" src="img/background.jpg">
</div>
</section>
<!---End Banner-->
<!-- Begin page content -->
<footer class="footer">
<div class="container">
<span class>Copyright © 2017. JH. All rights reserved.</span>
</div>
</footer>
<!---End Footer-->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
<style>
img.navbar-brand {
height: 45px;
margin: 0;
padding: 0;
}
.navbar.navbar-default {
background-color: #ffffff;
border-color: #ffffff;
padding-top:15px;
padding-bottom:30px;
}
.navbar.navbar-default .navbar-brand {
color: #696969;
}
.navbar.navbar-default .navbar-brand:hover,
.navbar.navbar-default .navbar-brand:focus {
color: #ff9c74;
}
.navbar.navbar-default .navbar-text {
color: #292929;
}
.navbar.navbar-default .navbar-nav > li > a {
color: #292929;
}
.navbar.navbar-default .navbar-nav > li > a:hover,
.navbar.navbar-default .navbar-nav > li > a:focus {
color: #747474;
}
.navbar.navbar-default .navbar-nav > .active > a,
.navbar.navbar-default .navbar-nav > .active > a:hover,
.navbar.navbar-default .navbar-nav > .active > a:focus {
color: #ff9c74;
background-color: #ffffff;
}
.navbar.navbar-default .navbar-nav > .open > a,
.navbar.navbar-default .navbar-nav > .open > a:hover,
.navbar.navbar-default .navbar-nav > .open > a:focus {
color: #ff9c74;
background-color: #ffffff;
}
.navbar.navbar-default .navbar-toggle {
border-color: #ffffff;
}
.navbar.navbar-default .navbar-toggle:hover,
.navbar.navbar-default .navbar-toggle:focus {
background-color: #ffffff;
}
.navbar.navbar-default .navbar-toggle .icon-bar {
background-color: #292929;
}
.navbar.navbar-default .navbar-collapse,
.navbar.navbar-default .navbar-form {
border:none;
margin-top: 50px;
}
#navbar {
text-align: center;
}
ul.navbar-nav {
display: inline-block;
}
.navbar.navbar-default .navbar-link {
color: #292929;
}
.navbar.navbar-default .navbar-link:hover {
color: #696969;
}
.navbar-brand {
transform: translateX(-50%);
left: 50%;
position: absolute;
}
.nav.navbar-nav > li.navbar-left {
font-family: 'Nunito Sans', sans-serif;
font-size: 11.5px;
}
.navbar-brand {
padding: 10px;
}
.navbar-brand>img {
height: 50px;
width: auto
}
#media (min-width: 768px) {
.navbar-brand { display: block; }
.navbar-bar-default .navbar-toggle {text-align: left;}
ul.navbar-nav {
float: none;
}
}
ul.navbar-nav {
float: none;
}
.fa.fa-instagram {
font-size: 18px;
}
.fa.fa-pinterest {
font-size: 18px;
}
.fa.fa-dribbble {
font-size: 18px;
}
.fa.fa-twitter{
font-size: 18px;
}
.banner {
width: 100%;
}
.banner-inner {
max-width:1100px;
margin: 0 auto;
}
#media (min-width:468px) and (max-width:991px){
.container.navbar-container {
width:100%;
padding:0px;
}
}
#media (min-width:468px) and (max-width:991px){
.container.navbar-container {
width:100%;
padding:0px;
}
}
body { padding-top: 90px; }
#media screen (min-width: 468px) and (max-width: 768px) {
body { padding-top: 0px; }
}
.banner-inner>img {
opacity:0;
-moz-transition: opacity 2s; /* Firefox 4 */
-webkit-transition: opacity 2s; /* Safari and Chrome */
-o-transition: opacity 2s;
transition: opacity 2s;
}
.col-1-1> img{
opacity:0;
-moz-transition: opacity 2s; /* Firefox 4 */
-webkit-transition: opacity 2s; /* Safari and Chrome */
-o-transition: opacity 2s;
transition: opacity 2s;
}
</style>

How to correctly adjust the position of the menu items in the fixed-top nav bar?

I am having trouble adding padding to the left and right side of the nav bar so the social media buttons and the rest of the menu items are pushed closer towards the center. I tried adding padding to the left and right. However, that moves the position of the button that appears when the menu is collapsed. I have a logo in the center of the nav bar and then social media icons to the right and other menu items the left.
.navbar.navbar-default {
background-color: #ccc;
border-color: #ffffff;
padding-top:15px;
padding-bottom:15px;
}
.navbar.navbar-default .navbar-brand {
color: #292929;
}
.navbar.navbar-default .navbar-brand:hover,
.navbar.navbar-default .navbar-brand:focus {
color: #FC9F9F;
}
.navbar.navbar-default .navbar-text {
color: #292929;
}
.navbar.navbar-default .navbar-nav > li > a {
color: #292929;
}
.navbar.navbar-default .navbar-nav > li > a:hover,
.navbar.navbar-default .navbar-nav > li > a:focus {
color: #FC9F9F;
}
.navbar.navbar-default .navbar-nav > .active > a,
.navbar.navbar-default .navbar-nav > .active > a:hover,
.navbar.navbar-default .navbar-nav > .active > a:focus {
color: #FC9F9F;
background-color: #ffffff;
}
.navbar.navbar-default .navbar-nav > .open > a,
.navbar.navbar-default .navbar-nav > .open > a:hover,
.navbar.navbar-default .navbar-nav > .open > a:focus {
color: #FC9F9F;
background-color: #ffffff;
}
.navbar.navbar-default .navbar-toggle {
border-color: #ffffff;
}
.navbar.navbar-default .navbar-toggle:hover,
.navbar.navbar-default .navbar-toggle:focus {
background-color: #ffffff;
}
.navbar.navbar-default .navbar-toggle .icon-bar {
background-color: #292929;
}
.navbar.navbar-default .navbar-collapse,
.navbar.navbar-default .navbar-form {
border:none;
}
.navbar.navbar-default .navbar-link {
color: #292929;
}
.navbar.navbar-default .navbar-link:hover {
color: #ffd4d4;
}
.navbar-brand {
transform: translateX(-50%);
left: 50%;
position: absolute;
}
.nav.navbar-nav > li.navbar-left {
font-family: 'Nunito Sans', sans-serif;
font-size: 11.5px;
}
.navbar-brand {
padding: 10px;
}
.navbar-brand>img {
height: 30px;
width: auto;
}
#media (min-width: 768px) {
.navbar-brand { display: block; }
.navbar-bar-default .navbar-toggle {text-align: left;}
}
#media (min-width: 468px) {
.navbar-brand { display: block; }
.navbar-bar-default .navbar-toggle {text-align: left;}
}
.fa.fa-instagram {
font-size: 18px;
}
.fa.fa-pinterest {
font-size: 18px;
}
.fa.fa-facebook {
font-size: 18px;
}
.fa.fa-twitter{
font-size: 18px;
}
.banner {
width: 100%;
}
.banner-inner {
max-width:1100px;
margin: 0 auto;
}
#media (min-width:468px) and (max-width:991px){
.container.navbar-container {
width:100%;
padding:0px;
}
}
#media (min-width:768px) and (max-width:1024px){
.container.navbar-container {
width:100%;
padding:0px;
}
}
body { padding-top: 90px; }
#media screen (min-width: 468px) and (max-width: 768px) {
body { padding-top: 0px; }
}
.banner-inner>img {
opacity:0;
-moz-transition: opacity 2s; /* Firefox 4 */
-webkit-transition: opacity 2s; /* Safari and Chrome */
-o-transition: opacity 2s;
transition: opacity 2s;
}
.col-1-1> img{
opacity:0;
-moz-transition: opacity 2s; /* Firefox 4 */
-webkit-transition: opacity 2s; /* Safari and Chrome */
-o-transition: opacity 2s;
transition: opacity 2s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device=width, initial-scale=1.0">
<title>J</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href="css/sticky-footer.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito|Nunito+Sans|Playfair+Display" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body style="padding-top: 70px;">
<header>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
<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="http://"><img class= "logo" src="img/logo.png"></a>
</div>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="navbar-left">TRAVEL</li>
<li class="navbar-left"> PORTFOLIO </li>
<li class="navbar-left"> ABOUT </li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="right"> <i class="fa fa-instagram"></i>
<li class="right"> <i class="fa fa-pinterest"></i>
<li class="right"> <i class="fa fa-facebook"></i>
<li class="right"> <i class="fa fa-twitter"></i>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
</div>
</div>
</header>
<!---End Header-->
<section class="banner">
<div class="banner-inner">
<img onload="this.style.opacity='1';" class="banner" src="img/background.png">
</div>
</section>
<!---End Banner-->
<!-- Begin page content -->
<footer class="footer">
<div class="container">
<span class>Copyright © 2017. All rights reserved.</span>
</div>
</footer>
<!---End Footer-->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>

Use media queries. like this:
#media screen and (min-width:768px){
.navbar.navbar-default {
padding-left:40px;
padding-right:40px;
}
}
This will add padding to your navbar only if the screen size is more than 768px.
.navbar.navbar-default {
background-color: #ccc;
border-color: #ffffff;
padding-top:15px;
padding-bottom:15px;
}
#media screen and (min-width:768px){
.navbar.navbar-default {
padding-left:40px;
padding-right:40px;
}
}
.navbar.navbar-default .navbar-brand {
color: #292929;
}
.navbar.navbar-default .navbar-brand:hover,
.navbar.navbar-default .navbar-brand:focus {
color: #FC9F9F;
}
.navbar.navbar-default .navbar-text {
color: #292929;
}
.navbar.navbar-default .navbar-nav > li > a {
color: #292929;
}
.navbar.navbar-default .navbar-nav > li > a:hover,
.navbar.navbar-default .navbar-nav > li > a:focus {
color: #FC9F9F;
}
.navbar.navbar-default .navbar-nav > .active > a,
.navbar.navbar-default .navbar-nav > .active > a:hover,
.navbar.navbar-default .navbar-nav > .active > a:focus {
color: #FC9F9F;
background-color: #ffffff;
}
.navbar.navbar-default .navbar-nav > .open > a,
.navbar.navbar-default .navbar-nav > .open > a:hover,
.navbar.navbar-default .navbar-nav > .open > a:focus {
color: #FC9F9F;
background-color: #ffffff;
}
.navbar.navbar-default .navbar-toggle {
border-color: #ffffff;
}
.navbar.navbar-default .navbar-toggle:hover,
.navbar.navbar-default .navbar-toggle:focus {
background-color: #ffffff;
}
.navbar.navbar-default .navbar-toggle .icon-bar {
background-color: #292929;
}
.navbar.navbar-default .navbar-collapse,
.navbar.navbar-default .navbar-form {
border:none;
}
.navbar.navbar-default .navbar-link {
color: #292929;
}
.navbar.navbar-default .navbar-link:hover {
color: #ffd4d4;
}
.navbar-brand {
transform: translateX(-50%);
left: 50%;
position: absolute;
}
.nav.navbar-nav > li.navbar-left {
font-family: 'Nunito Sans', sans-serif;
font-size: 11.5px;
}
.navbar-brand {
padding: 10px;
}
.navbar-brand>img {
height: 30px;
width: auto;
}
#media (min-width: 768px) {
.navbar-brand { display: block; }
.navbar-bar-default .navbar-toggle {text-align: left;}
}
#media (min-width: 468px) {
.navbar-brand { display: block; }
.navbar-bar-default .navbar-toggle {text-align: left;}
}
.fa.fa-instagram {
font-size: 18px;
}
.fa.fa-pinterest {
font-size: 18px;
}
.fa.fa-facebook {
font-size: 18px;
}
.fa.fa-twitter{
font-size: 18px;
}
.banner {
width: 100%;
}
.banner-inner {
max-width:1100px;
margin: 0 auto;
}
#media (min-width:468px) and (max-width:991px){
.container.navbar-container {
width:100%;
padding:0px;
}
}
#media (min-width:768px) and (max-width:1024px){
.container.navbar-container {
width:100%;
padding:0px;
}
}
body { padding-top: 90px; }
#media screen (min-width: 468px) and (max-width: 768px) {
body { padding-top: 0px; }
}
.banner-inner>img {
opacity:0;
-moz-transition: opacity 2s; /* Firefox 4 */
-webkit-transition: opacity 2s; /* Safari and Chrome */
-o-transition: opacity 2s;
transition: opacity 2s;
}
.col-1-1> img{
opacity:0;
-moz-transition: opacity 2s; /* Firefox 4 */
-webkit-transition: opacity 2s; /* Safari and Chrome */
-o-transition: opacity 2s;
transition: opacity 2s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device=width, initial-scale=1.0">
<title>J</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href="css/sticky-footer.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito|Nunito+Sans|Playfair+Display" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body style="padding-top: 70px;">
<header>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
<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="http://"><img class= "logo" src="img/logo.png"></a>
</div>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="navbar-left">TRAVEL</li>
<li class="navbar-left"> PORTFOLIO </li>
<li class="navbar-left"> ABOUT </li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="right"> <i class="fa fa-instagram"></i>
<li class="right"> <i class="fa fa-pinterest"></i>
<li class="right"> <i class="fa fa-facebook"></i>
<li class="right"> <i class="fa fa-twitter"></i>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
</div>
</div>
</header>
<!---End Header-->
<section class="banner">
<div class="banner-inner">
<img onload="this.style.opacity='1';" class="banner" src="img/background.png">
</div>
</section>
<!---End Banner-->
<!-- Begin page content -->
<footer class="footer">
<div class="container">
<span class>Copyright © 2017. All rights reserved.</span>
</div>
</footer>
<!---End Footer-->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>

Bootstrap (data toggle) drop down menu on navbar not displaying as a block

For some reason when I click the pancake button, I have been able to get the menu to display as a block using the z-index but on the list of elements of the menu. So the "block" is not the entire navbar but rather just the section that lists the links to the other pages and I ma not sure why. I have tried to drill into css and use block elements with no luck.
Here is the html for the navbar:
<nav class="navbar navbar-default">
<!-- 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=".navbar-collapse" 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="/hug/">Hug a Tree</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav pull-right">
<li>about</li>
{% if user.is_authenticated %}
<li>profile</li>
<li>f<span style="color:#e48666">a</span>vourites</li>
<li>logout</li>
{% else %}
<li>register</li>
<li>login</li>
{% endif %}
</ul>
</div>
</nav>
And the css:
.navbar-default {
background-color: #fff;
border-color: #e9e7b6;
margin: 25px;
height: 100px;
}
.navbar-default .navbar-text {
font-family: 'Raleway', sans-serif;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
font-family: 'Raleway', sans-serif;
color: #5aa47d;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
font-family: 'Raleway', sans-serif;
color: #5aa47d;
}
.navbar-default .navbar-link {
font-family: 'Raleway', sans-serif;
color: #5c606b;
}
.navbar-default .navbar-link:hover {
font-family: 'Raleway', sans-serif;
color: #5aa47d;
}
.navbar-toggle {
margin-top: 33px;
}
ul.nav.navbar-nav.pull-right{
z-index: 2;
position: relative;
}
.nav.navbar-nav.pull-right li{
display: block;
z-index: 1;
background-color: #fff;
}
/*** navbar - icon ***/
img.brand {
display: block;
margin-left: auto;
margin-right: auto;
}
/*** navbar - brand/logo ***/
.navbar-default .navbar-brand{
font-family: 'Oswald', sans-serif;
float: left;
color: #426085;
padding: 35px 15px 0px 25px;
height: 50px;
font-size: 30px;
line-height: 25px
}
.navbar-default .navbar-brand:focus, .navbar-default .navbar-brand:hover{
color: #5aa47d;
}
/*** navbar - list ***/
.navbar-default .navbar-nav > li > a {
font-family: 'Raleway', sans-serif;
font-size: 16px;
color: #5c606b;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:active {
font-family: 'Raleway', sans-serif;
color: #5aa47d;
}
.navbar-nav>li>a {
padding-top: 39px;
padding-right: 20px;
}
Any insight would be great.
Thanks.

I think this is what you're trying to do jsfiddle
pull-right was deprecated as of v3.1.0 and replaced with navbar-right.

Alexis Jensen Hi there. You are using a class pull-right in this line of code...
<ul class="nav navbar-nav pull-right">
If you remove the pull-right class it will expand across.
Is that all you were wanting here?

How can I only make the navigation bar in CSS transparent while keeping the text elements opaque?

This is a just a little project of mine, and I'm wanting to make a navbar where only the navbar itself is transparent while the text elements (anchors I think) are opaque. Thanks in advance,
Jacob
Here is my HTML:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8">
<meta name="description" content="Code Warriors STL">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="C:\\Users\\toshiba\\Desktop\\style.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
</head>
<body data-spy ="scroll" data-target = "nav">
<nav class ="navbar navbar-inverse navbar-fixed-top">
<div class ="container">
<div class="navbar-header">
Code Warriors
<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>
</div>
<div class ="collapse navbar-collapse" id = "navbar-collapse">
<ul class ="nav navbar-nav navbar-center">
<li>Home</li>
<li>About</li>
<li>Programs</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</nav>
<footer>
</footer>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
Here is my CSS
.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {
color: #721639;/*Sets the text hover color on navbar*/
}
.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active >
a:hover, .navbar-inverse .navbar-nav > .active > a:focus {
color: white; /*BACKGROUND color for active*/
background-color: #030033;
}
.navbar-inverse {
background-color: #0f006f;
border-color: #030033;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
color: #262626;
text-decoration: none;
background-color: #66CCFF; /*change color of links in drop down here*/
}
.nav > li > a:hover,
.nav > li > a:focus {
text-decoration: none;
background-color: silver; /*Change rollover cell color here*/
}
.navbar-inverse .navbar-nav > li > a {
color: white; /*Change active text color here*/
}
.navbar-inverse .navbar-brand {
color: #ffffff;
}
.navbar-inverse .navbar-brand:hover, .navbar-inverse .navbar-brand:focus {
color: #721639;
}
.navbar-inverse: not(a) {
opacity: .78;
}
.navbar-wrapper{
background: rgba(0,0,0,0.2);
}
html {
font-family: 'Open Sans', sans-serif;;
}

You mean something like this? Replace this rule for .navbar-inverse with this:
.navbar-inverse {
background: rgba(15,0,111,0.6);
border-color: #030033;
}

Vertically center unordered list in page header Bootstrap

I am developing a website for a local business with the help of Bootstrap, and they would like their contact details on the right hand side of the page header (not the navbar). I am trying to use an unordered list and Bootstrap's column grid system to show their phone number and email address, and potentially other content such as a Facebook like button. I need some help to vertically center the content, because currently the phone number is at the bottom of the page header and the email address is being covered by the navbar.
My code looks like:
<!DOCTYPE html>
<html>
<head>
<title>Excellent Carpet Cleaning - Sample 1</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
<link rel='stylesheet' type='text/css' href='style.css'>
</head>
<body>
<!--header image-->
<div class="page-header">
<center><img src=http://goo.gl/Yk0lCv width=50%/></center>
<div class="col-sm-3 pull-right">
<ul>
<li><span class="glyphicon glyphicon-earphone"></span>555-5555</li>
<li><span class="glyphicon glyphicon-envelope"></span>someone#example.com</li>
</ul>
</div>
</div>
<!--top navbar-->
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-center">
<li class="active">Home</li>
<li>Our Services</li>
<li>Current Offers</li>
<li>Facebook</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
</body>
</html>
It is linked to bootstrap.min.css which can be downloaded here and my own external stylesheet which is:
.navbar-default {
background-color: #0000ff;
border-color: #0000a0;
}
.navbar-default .navbar-brand {
color: #ffffff;
}
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
color: #ffffff;
}
.navbar-default .navbar-text {
color: #ffffff;
}
.navbar-default .navbar-nav > li > a {
color: #ffffff;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color: #ffffff;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: #ffffff;
background-color: #0000a0;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
color: #ffffff;
background-color: #0000a0;
}
.navbar-default .navbar-toggle {
border-color: #0000a0;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
background-color: #0000a0;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #ffffff;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: #ffffff;
}
.navbar-default .navbar-link {
color: #ffffff;
}
.navbar-default .navbar-link:hover {
color: #ffffff;
}
#media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #ffffff;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #ffffff;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #ffffff;
background-color: #0000a0;
}
}
/*end navbar*/
body {
padding-top: 0;
}
.page-header {
margin-top: 10px;
margin-bottom: 10px;
}
.page-footer {
margin-top: 10px;
margin-bottom: 10px;
padding-top: 10px;
padding-bottom: 5px;
background-color: #0000ff;
color: #ffffff;
border-color: #bb0000;
}
li {
list-style-type: none;
}

For Extra Small Devices:
<div class="page-header" style="text-align:center;">
<center>
<img src="http://goo.gl/Yk0lCv" width="50%"/>
</center>
<div class=" hidden-lg hidden-md hidden-sm"> <span class="glyphicon glyphicon-earphone "></span> 555-5555 <span class="glyphicon glyphicon-envelope"></span> someone#example.com</div>
</div>
I took the contact information and stuck it underneath the image, so when the device is sized to an extra small screen it will not inconvenience the mobile user to see it laying inside of the drop down menu (not a pretty site).
For All Other Sizes:
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-center">
<li class="active">Home
</li>
<li>Our Services
</li>
<li>Current Offers
</li>
<li>Facebook
</li>
<li>Contact Us
</li>
<li class="hidden-xs"><span class="glyphicon glyphicon-earphone"></span> 555-5555
<br/> <span class="glyphicon glyphicon-envelope"></span> someone#example.com</li>
</ul>
</div>
I added your contact information and put it inside of the navigation bar, to be in one single list tag, this way both items will size appropriately and also become hidden as the user is sizing to an extra small device.
DEMO JSFiddle