I am trying to add padding to my Bootstrap website. However, when i resize the browser, the navigation bar messes up completely instead of staying fixed. Here is a link for pictures http://imgur.com/a/YmyEW
html code:
<nav class="nav`bar navbar-custom">
<div class="container2">
<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="#">logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>WHO</li>
<li>WHAT</li>
<li>WHERE</li>
</ul>
</div>
</div>
css code:
`body{
padding-left: 200px;
padding-right: 200px;
}
.navbar-custom {
background-color:transparent;
color:#000;
border-radius:0;
padding-top: 50px;
}
.navbar-custom .navbar-nav > li > a {
color:#000;
}
.navbar-custom .navbar-nav > .active > a {
color: #000;
background-color:transparent;
}
.navbar-custom .navbar-nav > li > a:hover,
.navbar-custom .navbar-nav > li > a:focus,
.navbar-custom .navbar-nav > .active > a:hover,
.navbar-custom .navbar-nav > .active > a:focus,
.navbar-custom .navbar-nav > .open >a {
text-decoration: none;
background-color: #ff0000;
}
.navbar-custom .navbar-brand {
color:#eeeeee;
}
.navbar-custom .navbar-toggle {
background-color:#eeeeee;
}
.navbar-custom .icon-bar {
background-color:#33aa33;
}
.container {
padding-top: 70px;
padding-bottom: 70px;
font-family: 'Bree Serif', serif;
font-size: 20em;
}
.footer-right{
padding-top: 70px;
font-family: 'Bree Serif', serif;
}`
I see some problems with your code formatting but got the idea. What you need the most ist the class navbar-fixed-top added to your navbar so it'll be always on top. And I also suggest to make custom classes instead overriding the container class completely. Better would be container custom-container - so it'll still got it's basic functionality and additionally your changes. I also see that you're using the class container2 which isn't defined and therefore can't work as a container.
Working Example
HTML
<nav class="navbar navbar-custom navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>WHO</li>
<li>WHAT</li>
<li>WHERE</li>
</ul>
</div>
</div>
</nav>
<div class="container custom-container">
<div class="text-center">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</div><!-- /.container -->
CSS
body{
padding-top: 100px;
padding-left: 200px;
padding-right: 200px;
}
.navbar-custom {
background-color:transparent;
color:#000;
border-radius:0;
padding-top: 50px;
}
.navbar-custom .navbar-nav > li > a {
color:#000;
}
.navbar-custom .navbar-nav > .active > a {
color: #000;
background-color:transparent;
}
.navbar-custom .navbar-nav > li > a:hover,
.navbar-custom .navbar-nav > li > a:focus,
.navbar-custom .navbar-nav > .active > a:hover,
.navbar-custom .navbar-nav > .active > a:focus,
.navbar-custom .navbar-nav > .open >a {
text-decoration: none;
background-color: #ff0000;
}
.navbar-custom .navbar-brand {
color:#eeeeee;
}
.navbar-custom .navbar-toggle {
background-color:#eeeeee;
}
.navbar-custom .icon-bar {
background-color:#33aa33;
}
.container-custom {
padding-top: 70px;
padding-bottom: 70px;
font-family: 'Bree Serif', serif;
font-size: 2em;
}
The <body> is directly under the <head> though. So, it would mess up your container. Michael Cooker is pointing you in a good direction.
Related
I have a complex scenario, please have a look at the below screenshots.
When navbar is collapsed on the smaller screen, and I click on the button to expand, the following screen comes out, and it will go only if I click on any of the tabs( about, services etc), click on the top right icon for navbar, wont affect and the drop down menu does not go back.
The second scenario (please refer to the image below), when I expand the screen back from the smaller one, navbar is totally messed up. I dont know what I am doing wrong. Heres the css of my entire navbar.
CSS
.navbar {
height: 80px;
background-color: transparent;
border: none;
color: white;
z-index: 100;
transition: background-color 1s ease 0s;
}
.navbar-default .navbar-brand {
margin-top: 10px;
color: white;
}
.navbar-default .navbar-brand:hover {
color: #C57ED3;
border: 1px solid #C57ED3;
}
.navbar-default .navbar-nav > li > a {
color: white !important;
margin: 10px 5px 5px 5px;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:active, .navbar-default .navbar-nav > li > a:focus {
color: #C57ED3;
border: 1px solid #C57ED3;
}
.navbar-default .navbar-nav > li > a:visited {
color: #C57ED3;
text-decoration: none;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
background-color: transparent;
color: #C57ED3;
}
.navbar-default .navbar-toggle {
border-color: #C57ED3;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
background-color: #490D40;
}
.navbar-default .navbar-toggle .icon-bar {
color: #C57ED3;
background-color: #C57ED3;
}
.navbar-default .navbar-collapse.collapse.in ul {
background-color: #490D40;
}
html
<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" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="img/logo.png" width="130px;" height="50px;" style="margin-top: 20px;">
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>About</li>
<li><a href="services" >Services</a></li>
<li><div class="dropdown" >
<button class="dropbtn">Work</button>
<div class="dropdown-content">
Web Development
Students
Content Writing
</div>
</div>
</li>
<li><a href="#contact" >Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
I have a Bootstrap Fixed responsive Navigation Bar with an image on the left of the buttons. I used media queries to make the spacing responsive and now I have this code:
My CSS:
.nav > li > a:hover
{
background-color: #FCC;
}
.navbar-header
{
float: right;
}
.navbar-default
{
background-color: #00b5fe;
border-color: #0089ff;
}
.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 > li > .dropdown-menu
{
background-color: #00b5fe;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a
{
color: #ffffff;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:focus
{
background-color: #0089ff;
color: #ffffff;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > .divider
{
background-color: #00b5fe;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus
{
background-color: #0089ff;
color: #ffffff;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus
{
background-color: #0089ff;
color: #ffffff;
}
.navbar-default .navbar-toggle
{
border-color: #0089ff;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus
{
background-color: #0089ff;
}
.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
{
background-color: #0089ff;
color: #ffffff;
}
}
#media (min-width: 767px)
{
body
{
padding-top: 230px;
}
}
#media (max-width: 767px)
{
body
{
padding-top: 130px;
}
}
#media (min-width: 768px)
{
#resize
{
width: 30%;
}
}
#media (min-width: 768px)
{
#alignp
{
text-align: center;
}
}
And My HTML:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-inverse navbar-fixed-top" id="navbar-blue">
<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>
<p></p>
<p id="centerp">
<img align="left" id="resize" width="60%" src="../logo.png" alt="Coding Kids" style="display:block; margin-left: auto; margin-right: auto; margin-bottom: 20px;">
</p>
<br />
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a></a></li>
<li class="active">Home
</li>
<li>About
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="/">Products<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Silver
</li>
<li>Silver+
</li>
<li>Gold
</li>
<li>Gold+
</li>
</ul>
</li>
<li>Contact
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><img src="images/register.png" width="20"> Sign Up
</li>
<li><img src="images/login.png" width="20"> Login
</li>
</ul>
</div>
</div>
</nav>
<div id="signUp" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Sign Up</h4>
</div>
<div class="modal-body">
<p>Sign Up Box Goes Here</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="logIn" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Login</h4>
</div>
<div class="modal-body">
<p>Login Box Goes Here</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="well">
{tag_pagecontent}
</div>
<div class="panel panel-default" style="background-color: black; clear: both;">
<div class="panel-body" style="background-color: black; color: white;">© Coding Kids</div>
</div>
A working version of this page is here.
As you can see in my working version, as you resize the window, the logo changes position. At the moment, it doesn't look very neat as it keeps changing position. All I want is for the logo to always be centred horizontally and vertically in the space it has. How would I go about editing my CSS and media queries to suit this?
Just changing the alignment should do the trick.
<img align="centre" id="resize" width="60%" src="../logo.png" alt="Coding Kids" style="display:block; margin-bottom:20px;>
If it doesn't try adding a div and settling the image in it:
<div align="centre"><img align="left" id="resize" width="60%" src="../logo.png" alt="Coding Kids" style="display:block; margin-left: auto; margin-right: auto; margin-bottom: 20px;"></div>
You can also use the
<div style="text-align:centre;">
CSS rule instead.
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?
I am working on a Bootstrap 3 site and have everything working except the main menu. It has a hair trigger when it comes to resizing and truncates well in advance of the overall page sizing and quickly drops the last two navigation items to the next row, disrupting the slider, before it adjusts to the mobile navigation.
The page can be found here.
The HTML is as follows:
<!-- Navigation -->
<div class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div><!-- navbar-header -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Our Attorneys</li>
<li>Business Ligitagion</li>
<li>Personal Injury</li>
<li>Verdicts & Settlements</li>
<li>Client Testimonials</li>
<li>Map & Directions</li>
</ul>
</div><!--/.nav-collapse -->
</div><!-- container -->
</div><!-- navbar -->
The CSS:
/* #group navigation */
.navbar {
position: relative;
min-height: 35px;
margin-bottom: 0;
}
.navbar-default {
background-color: #9d2024;
border: none;
height: 25px;
}
#media (max-width: 767px) {
.navbar-default {
min-height:50px;
}
}
.navbar-default .navbar-brand {
color: #fff;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #fff;
border-bottom: 6px solid #fff;
}
.navbar-default .navbar-text {
color: #fff;
}
.navbar-default .navbar-nav > li > a {
color: #fff;
padding: 3px 10px;
margin: 5px 0 0 0;
border-right: 1px solid #fff;
font-family: trebuchet ms;
text-transform: uppercase;
}
.navbar-default .navbar-nav > li:last-child > a {
border: none;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #fff;
border-bottom: 4px solid #fff;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #fff;
border-bottom: 4px solid #fff;
background-color: #9d2024;
}
If I remove the container the navigation floats to the far left and does not flow with the page. I could use some insight for getting the navigation to resize properly without truncating.
You need yo use right bootstrap structure.
Problem is here:
row bannerand row slider-bg divs classes. Just remove row name and all need to work.
Error reason of start building a bootstrap is put a row of parent of container class. Container is first wrapping class in bootstrap, then comes row and then cols
For menu use smaller font size or inner li, a paddings.
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