Develop Reference

Can't get navbar to stop showing horizontal scroll bar

I've been playing around with my bootstrap navbar. Its original position was set as "fixed". Now that I have sent it to absolute there's a horizontal scrollbar that appears. How can I prevent the scrollbar from appearing? Thanks!
Keep in mind that "overflow-x: auto;" and "white-space: nowrap;" in my nav ID was just a method I tried to prevent the horizontal scrollbar from appearing.
#nav {
height: 100px;
display: block;
position: absolute;
top: 0;
width: 100%;
transition: all ease .5s;
z-index: 9999;
overflow-x: auto;
white-space: nowrap;
}
#logo {
height: 45px;
transition: all ease .5s;
margin-top: 15px;
margin-left: 50px;
}
#nav a {
transition: all ease .5s;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: white;
}
.navbar-default .navbar-nav > li > a {
margin-right: 50px;
margin-top: 30px;
font-size: 18px;
font-weight: bolder;
}
<div class="navbar navbar-default" id = "nav">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img src="img/logo.png" id="logo" alt="Logo Motive Digital"/></a>
</div>
<ul class="nav navbar-nav navbar-right">
<li>ABOUT</li>
<li>SERVICES</li>
<li>WORK</li>
<li>CONTACT</li>
</ul>
</div>

You should take care of its parent's margin, which is body :
body{
margin:0px;
}

By changing overflow-x:auto to overflow-x:hidden I was able to fix my issue.

arrange side bar, navigation bar and footer

html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
overflow-x: hidden;
}
/*footer*/
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
/*navbar*/
.navbar{
background-color:black;
font-family: sans-serif;
font-size: 20px;
}
.navbar-brand{
font-size: 20px;
}
.logo1{
height: 50px;
width: 75px;
opacity: 0.1px;
left: 0px;
top: 0px;
position: absolute;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color: #000; /*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: white; /*BACKGROUND color for active*/
background-color: #030033;
}
.navbar-default {
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-default .navbar-nav > li > a {
color: whites; /*Change active text color here*/
}
body > .container {
padding: 60px 15px 0;
}
.container .text-muted {
margin: 20px 0;
}
/* side bar*/
/* Toggle Styles */
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 250px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: #000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -250px;
}
/* Sidebar Styles */
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
z-index: 1;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999999;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #fff;
background: rgba(255,255,255,0.2);
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
.btn>.btn-default{
}
#media(min-width:768px) {
#wrapper {
padding-left: 0;
}
#wrapper.toggled {
padding-left: 250px;
}
#sidebar-wrapper {
width: 0;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
#page-content-wrapper {
padding: 20px;
position: relative;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-right: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!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>Bootstrap 101 Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--[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]-->
<link rel="stylesheet" type="text/css" href="style1.css" />
<link href="bootstrap.min1.css" rel="stylesheet">
</head>
<body>
<!--top bar-->
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<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>
<img class="logo1" src="images/capture.png" alt=" logo">
<a class="navbar-brand" href="#">Web Portax</a>
</div>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Account Setting</li>
<li>Message</li>
<li class="dropdown">
Services<span class="caret"></span>
<ul class="dropdown-menu">
<li>Log Out</li>
<li>Edit Profile</li>
<li>Manage prefrences</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="#">
Start Bootstrap
</a>
</li>
<li>
Dashboard
</li>
<li>
Shortcuts
</li>
<li>
Overview
</li>
<li>
Events
</li>
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
</div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script src="jquery1.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="bootstrap.min1.js"></script>
<!-- Menu Toggle Script -->
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
<!-- body-->
<!-- Footer -->
<div class="container">
<div class="page-header">
<h1>Content</h1>
</div>
</div>
<footer class="footer">
<div class="container">
<div class="row">
<p class="text-muted"> All rights reserved. </p>
</div>
</div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Hey guys can anyone help me as my current page looks like this[enter image description here]
enter image description here
When i click toogle to expand my side bar it looks like this.
enter image description here
How can i fix the white spaces that is in between the header and the sidebar? How can i shift the little grey thing to toggle the sidebar to left corner? and lastly how can i shift "Web Portax" from the top nav bar slightly to the right so when i minimize it the logo and the text do not crumple together?
I am new to html thing so sorry for the amateur question. Thank you!

Use the margin property in CSS to adjust the space around your elements.
Example:
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
and the padding element to adjust the space in between the content and the border of the element.
Example:
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
You can also use the height and width properties to adjust the size of the element.
Example height: 100px;

Navbar not staying fixed

Hi guys I am trying to follow this Example and do exactly the same for my site, however I cant get my nav bar to work and follow the screen down. I have tried a lot and not sure what is going on.
HTML:
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
</head>
<body>
<div class="parallax">
<div class="avater" style="background-image: url('Images/Pic1.jpg');background-size: cover;"></div>
<div class="info1">
<h1>Hero</h1>
<h2>Play play play</h2>
</div>
</div>
<nav class="navbar navbar-default">
<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>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="section">
<h1> Section 1 <h1>
</div>
<div class="section2">
<h1> Section 2 <h1>
</div>
<div class="section3">
<h1> Section 3 <h1>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$(window).bind('scroll', function() {
var navHeight = $( window ).height() - 70;
if ($(window).scrollTop() > navHeight) {
$('navbar').addClass('fixed');
}
else {
$('navbar').removeClass('fixed');
}
});
});
</script>
</body>
</html>
CSS:
body {
font-family: 'Open Sans', sans-serif, Arial;
font-size: 16px;
color: #6D6D6D;
background-color: #F5F5F5;
font-weight: 300;
}
h1,h2,h3,h4,h5,h6 {
font-family: 'Montserrat', sans-serif, Arial;
padding-bottom: 5px;
color: #373432;
line-height: 1em;
font-weight: normal;
}
a {
text-decoration: none;
outline: none;
}
/* Header */
.parallax {
background-image: url("../Images/back1.jpg");
min-height: 700px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding: 100px 20px;
}
.avater {
width: 260px;
height: 260px;
border-radius: 50%;
position: relative;
cursor: default;
box-shadow: inset 0 0 0 0 rgba(200, 95, 66, 0.4), inset 0 0 0 16px rgba(255, 255, 255, 0.16), 0 1px 2px rgba(0, 0, 0, 0.1);
margin: 0 auto;
}
.info1 {
text-align: center;
margin-top: 40px;
}
.info1 > h1 {
font-size: 60px;
color: #FFFFFF;
}
.info1 > h2 {
color: #FFFFFF;
font-size: 30px;
}
/* Navbar */
.fixed {
position: fixed;
top: 0;
height: 70px;
z-index: 1;
}
.navbar {
margin-bottom: 0px;
left: 0;
top: 0;
width: 100%;
list-style: none;
height: 70px;
}
.navbar-nav {
float: none;
margin: 0;
text-align: center;
}
.navbar-nav > li {
float: none;
display: inline-block;
}
.navbar-nav > li > a {
line-height: 38px;
}
.navbar-nav > li > a.active {
background-color: #E7E7E7;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #333333;
background-color: #E7E7E7;
}
.navbar-toggle {
background-color: #000000;
background-image: none;
border-radius: 4px;
float: right;
margin-bottom: 8px;
margin-right: 15px;
margin-top: 18px;
padding: 9px 10px;
position: relative;
}
.navbar-inverse .navbar-toggle .icon-bar {
background-color: #2DCC70;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #000000;
}
.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
border-color: transparent;
}
.section{
background-color:Red;
height: 1000px;
margin: 0;
}
.section h1 {
margin: 0;
}
.section2{
background-color:blue;
height: 1000px;
margin: 0;
}
.section3{
background-color:Black;
height: 1000px;
margin: 0;
}
If I change var navHeight = $( window ).height() - 70; to 277 it works fine however if I make the screen smaller it snaps straight up without waiting so its really weird.
Any help on this matter would be great.
Thanks

Apologies. I tried to fix your code instead of giving you a different solution. This works without the jumping.
var $window = $(window),
$el = $('nav'),
elTop = $el.offset().top;
$window.scroll(function() {
$el.toggleClass('navbar-fixed-top', $window.scrollTop() > elTop);
});

Bootstrap 3.0: How to make vertical navbar dropdown not append to only last list item?

So I have a panel layout that I've been throwing together and it has a fancy vertical navbar. I have it aligned correctly and everything and I have successfully been able to get a dropdown menu to appear in a vertical fashion, however, for some reason it is always appending to the last item on list. I can't understand why it is doing this.
I've posted all of my code below, and from previous research on the initial issue of just getting the menu to show up, I believe that my css is correct, so I'm wondering if it may be a javascript issue on the boostrap side, but I have no javascript currently being used with the side menu.
CSS
/************
* side navbar
*************/
#side-nav{
height: 100%;
padding-left: 0;
padding-right: 0;
}
.nav-stacked{
height: 100%;
width: 100%;
background: #3B3B3B;
overflow-x: visible;
overflow-y: hidden;
margin-bottom: -99999px;
padding-bottom: 99999px;
}
.nav-stacked > li > a > p{
font-size: 14px;
padding-left: 4px;
display: block;
text-align: center;
}
.nav-stacked > li > a > span{
font-size: 36px;
display: block;
text-align: center;
}
.nav-pills > li > a{
border-radius: 0;
padding-top: 15px;
}
.nav-pills > li.active > a{
background: linear-gradient(#343434, #000000);
}
.nav-pills > li:not(.active) > a{
background: linear-gradient(#4B4B4B, #3B3B3B);
color : #e5e5e5;
}
.nav-pills > li:last-child:not(.active) > a{
border-bottom: solid 1px #353535;
}
.nav-pills > li:not(.active) > a:hover{
background: linear-gradient(#ffffff, #CACCCB);
color : #333;
}
.nav-stacked > li+li{
margin-top: 0;
}
#side-nav li.active.open, #side-nav li:not(.active).open{
position: static;
}
#side-nav .dropdown-menu{
overflow-x: visible;
width: 100% !important;
margin: -92px 0 0 100%;
border-radius: 0;
}
.dropdown-toggle .glyphicon-chevron-right{
font-size: 14px;
position: absolute;
top: 36px;
left: 85%;
}
html
<nav id='side-nav' class='hidden-xs col-sm-2 col-md-1'>
<ul class='nav nav-pills nav-stacked'>
<li>
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
<span class='glyphicon glyphicon-user'></span>
<p>Driver</p>
<span class='glyphicon glyphicon-chevron-right'></span>
</a>
<ul class='dropdown-menu'>
<li>EXPIRATIONS</li>
<li><a class='clinic' href="#">CLINICS</a></li>
<li><a class='drugTest' href="#">DRUG TESTING</a></li>
<li>RECRUITING</li>
</ul>
</li>
<li>
<a href="/comcheck">
<span class='glyphicon glyphicon-list-alt'></span>
<p>Comcheck</p>
</a>
</li>
<li>
<a href="/equipment">
<span class='glyphicon glyphicon-wrench'></span>
<p>Equipment</p>
</a>
</li>
</ul>
</nav>
I have a working fiddle to demonstrate what my issue is:
https://jsfiddle.net/ye1q4wfu/4/
All I want it to do is, when I click on the list item that has a dropdown. I want the dropdown to appear next to it.

Just set the top of dropdown to top: auto;
#side-nav .dropdown-menu {
top: auto;
}
https://jsbin.com/fukujazuko/
My internet has some trouble with jsfiddle

If you don't mind using a bit of JQuery, I think this will do the trick:
$('.dropdown-menu').each(function() {
$(this).css('top', $(this).closest('li').css('top'));
});
You will also need to change one line of your CSS:
#side-nav .dropdown-menu{
overflow-x: visible;
width: 100% !important;
//margin: -92px 0 0 100%; /* Removed */
margin: 0 0 0 100%; /* Added */
border-radius: 0;
}
Demo Here

Use the following CSS code that the sub-menu appears in front of the item.
#side-nav .dropdown-menu{
overflow-x: visible;
width: 100% !important;
margin: -290px 0 0 100%;
border-radius: 0;
}

I've added the clearfix class to the li element in which your dropdown menu is. Then, these attributes to dropdown-menu
#side-nav .dropdown-menu {
...
top: auto;
float: right;
}
And added this css rule:
#side-nav .dropdown-toggle {
float: left;
width: 100%;
}
This is the complete snippet with the changes. When showing the code snippet, please, click on "Full page" to see the result.
#side-nav{
height: 100%;
padding-left: 0;
padding-right: 0;
}
.nav-stacked{
height: 100%;
width: 100%;
background: #3B3B3B;
overflow-x: visible;
overflow-y: hidden;
margin-bottom: -99999px;
padding-bottom: 99999px;
}
.nav-stacked > li > a > p{
font-size: 14px;
padding-left: 4px;
display: block;
text-align: center;
}
.nav-stacked > li > a > span{
font-size: 36px;
display: block;
text-align: center;
}
.nav-pills > li > a{
border-radius: 0;
padding-top: 15px;
}
.nav-pills > li.active > a{
background: linear-gradient(#343434, #000000);
}
.nav-pills > li:not(.active) > a{
background: linear-gradient(#4B4B4B, #3B3B3B);
color : #e5e5e5;
}
.nav-pills > li:last-child:not(.active) > a{
border-bottom: solid 1px #353535;
}
.nav-pills > li:not(.active) > a:hover{
background: linear-gradient(#ffffff, #CACCCB);
color : #333;
}
.nav-stacked > li+li{
margin-top: 0;
}
#side-nav li.active.open, #side-nav li:not(.active).open{
position: static;
}
#side-nav .dropdown-menu{
overflow-x: visible;
width: 100% !important;
margin: 0 0 0 100%;
border-radius: 0;
top: auto;
float: right;
}
#side-nav .dropdown-toggle {
float: left;
width: 100%;
}
.dropdown-toggle .glyphicon-chevron-right{
font-size: 14px;
position: absolute;
top: 36px;
left: 85%;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<nav id='side-nav' class='hidden-xs col-sm-2 col-md-1'>
<ul class='nav nav-pills nav-stacked'>
<li class="clearfix"> <!-- ADDED THE CLEARFIX CLASS -->
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
<span class='glyphicon glyphicon-user'></span>
<p>Driver</p>
<span class='glyphicon glyphicon-chevron-right'></span>
</a>
<ul class='dropdown-menu'>
<li>EXPIRATIONS</li>
<li><a class='clinic' href="#">CLINICS</a></li>
<li><a class='drugTest' href="#">DRUG TESTING</a></li>
<li>RECRUITING</li>
</ul>
</li>
<li>
<a href="/comcheck">
<span class='glyphicon glyphicon-list-alt'></span>
<p>Comcheck</p>
</a>
</li>
<li>
<a href="/comcheck">
<span class='glyphicon glyphicon-wrench'></span>
<p>Equipment</p>
</a>
</li>
</ul>
</nav>
</body>
</html>

Bootstrap Nav Collapse (Navigation) scroll - need to hide overflow

I'm continuing development with my website and I have now reached another problem.
When the nav bar collapses on smaller screens, there appears to be a scroll bar to suggest that there is overflow of the elements.
I tried to use the overflow:hidden property to remove this problem in CSS, but it doesn't appear to work properly.
See the screenshot and the code snippet below to see the problem.
#font-face {
font-family: 'montserratlight';
src: url('montserrat-light-webfont.eot');
src: url('montserrat-light-webfont.eot?#iefix') format('embedded-opentype'), url('montserrat-light-webfont.woff2') format('woff2'), url('montserrat-light-webfont.woff') format('woff'), url('montserrat-light-webfont.ttf') format('truetype'), url('montserrat-light-webfont.svg#montserratlight') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'montserratsemi_bold';
src: url('montserrat-semibold-webfont.eot');
src: url('montserrat-semibold-webfont.eot?#iefix') format('embedded-opentype'), url('montserrat-semibold-webfont.woff2') format('woff2'), url('montserrat-semibold-webfont.woff') format('woff'), url('montserrat-semibold-webfont.ttf') format('truetype'), url('montserrat-semibold-webfont.svg#montserratsemi_bold') format('svg');
font-weight: normal;
font-style: normal;
}
#header {
padding: 10px 0 0 0;
}
#media (min-width: 768px) {
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
.navbar-brand {
display: none;
}
}
.navbar {
margin-bottom: 0px;
font-family: "montserratlight";
text-transform: uppercase;
border-top: 2px solid #000;
border-bottom: 2px solid #000;
border-radius: 0px;
}
img.logoEmpreus {
margin-left: auto;
margin-right: auto;
display: block;
margin-bottom: 10px;
}
img.logoEmpreus:hover {
-webkit-animation-name: rubberBand;
animation-name: rubberBand;
}
#page {
margin: 0px auto;
}
li {
display: inline;
margin: 0 -1px;
}
li a {
color: black;
font-size: 16px;
text-decoration: none;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
li a:hover {
color: blue;
font-size: 18px;
text-decoration: none
}
li.active a {
font-weight: bold;
color: #333;
text-decoration: none
}
ul {
margin: 0 auto;
font-family: "montserratlight";
text-transform: uppercase;
}
.active {
font-family: 'montserratsemi_bold';
}
.imageInside {
position: relative;
width: 100%;
/* for IE 6 */
}
h2 {
margin-top: 0px;
margin-bottom: 0px;
}
h2 span {
color: white;
font: bold 0.8em 'montserratsemi_bold', Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0);
/* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
#base ul {
margin: 0 auto;
border-top: 2px solid #000;
border-bottom: 2px solid #000;
padding: 10px;
text-align: center;
font-family: "montserratlight";
text-transform: uppercase;
}
<!DOCTYPE html>
<head>
<title>Problems | Stack Overflow</title>
<!-- Tab Title -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div id = "header">
<!-- Empreus logo Image. Animated. Width 300px. -->
<img class = "logoEmpreus animated" src = "http://bit.ly/1P2ZlbH" alt="Empreus" width="300" />
</div>
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#">Stack Overflow</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
<li><b>The Problem</b></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
<div class = "row">
<!-- Declaration of First Row -->
<div class="imageHolder col-md-12" style="margin-top:10px;">
<!-- Image Container as DIV -->
<div class = "imageInside hvr-underline-from-center" >
<h2><span>Logo Issue.</span></h2>
<img id = "imageHomeJPG" src="http://bit.ly/1P2Ylo3" style="width:100%" />
</div>
<!-- Image Link -->
</div>
</div>
<div class="row">
<div id = "base" class="col-md-12" style="margin-bottom:10px">
<p>
<ul class="col-md-12">
<!-- MAIN NENU BAR -->
<li>Copyright Whatever</li>
</ul>
<!-- Unordered lists.-->
</p>
</div>
<!-- Navigation HTML Markup -->
</div>
</div>
</body>
</html>
How can this scroll bar be removed?

In fact, this question is easier to answer then it seems.
In Bootstrap, there is indeed the overflow - x property enabled by default in the bootstrap.css file.
.navbar-collapse {
padding-right: 15px;
padding-left: 15px;
overflow-x: visible;
-webkit-overflow-scrolling: touch;
border-top: 1px solid transparent;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}
To solve this problem, a simple property change is needed.
Overflow-x:hidden
So no more scroll on the collapsed navbar!

This CSS rule is causing your overflow.
li {
display:inline;
margin:0 -1px;
}
Remove it and simply target your elements with specific selectors. Now you menu will remain aligned on mobile and your hover property regarding the color blue work.
See working example Snippet.
#header {
padding: 10px 0 0 0;
}
#header .logoEmpreus {
margin-left: auto;
margin-right: auto;
display: block;
margin-bottom: 10px;
}
#header .logoEmpreus:hover {
-webkit-animation-name: rubberBand;
animation-name: rubberBand;
}
#media (min-width: 768px) {
.navbar.navbar-default .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar.navbar-default .navbar-collapse {
text-align: center;
}
.navbar.navbar-default .navbar-brand {
display: none;
}
}
.navbar.navbar-default {
margin-bottom: 0px;
font-family: "montserratlight";
text-transform: uppercase;
border-top: 2px solid #000;
border-bottom: 2px solid #000;
border-radius: 0px;
}
.navbar.navbar-default .navbar-nav ul {
margin: 0 auto;
font-family: "montserratlight";
text-transform: uppercase;
}
.navbar.navbar-default .navbar-nav li a {
color: black;
font-size: 16px;
text-decoration: none;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.navbar.navbar-default .navbar-nav li a:hover {
color: blue;
font-size: 18px;
text-decoration: none
}
.navbar.navbar-default .navbar-nav .active {
font-family: 'montserratsemi_bold';
}
.navbar.navbar-default .navbar-nav li.active a {
font-weight: bold;
color: #333;
text-decoration: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.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" />
<div id="header">
<!-- Empreus logo Image. Animated. Width 300px. -->
<img class="logoEmpreus animated" src="http://bit.ly/1P2ZlbH" alt="Empreus" width="300" />
</div>
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#">Stack Overflow</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li>Option 1
</li>
<li>Option 2
</li>
<li>Option 3
</li>
<li>Option 4
</li>
<li><b>The Problem</b>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
</div>