I have child element sidebar and i'd like to set him 100% width of parent element. That works without fixed position. But also i need fixed position for "collapse/expand" function.
.non-active{left: -250px;} Parent element is maximum 250px of width;
Javascript collapse/expand
$(".close-btn").click(function () {
$(".side-bar").addClass("non-active");
$(".menu-btn").css("visibility", "visible");
});
$(".menu-btn").click(function () {
$(".side-bar").removeClass("non-active");
$(".menu-btn").css("visibility", "hidden");
});
Sidebar.html
<div class="menu-btn">
<i class="fas fa-bars vertical"></i>
</div>
<div class="side-bar">
<div class="close-btn">
<i class="fas fa-times vertical"></i>
</div>
<h1>Doučování</h1>
<div class="menu">
<div class="item">
<a class="sub-btn">
Matice
<i class="fas fa-angle-right dropdown"></i>
</a>
<div class="sub-menu">
<a
href="/pages/matice/zakladni-operace.html"
id="matice/zakladni-operace"
onClick="reply_click(this.id)"
class="sub-item">
Základní operace
</a>
<a
href="/pages/matice/hodnosti.html"
id="matice/hodnosti"
onClick="reply_click(this.id)"
class="sub-item">
Hodnost
</a>
</div>
</div>
</div>
</div>
Sidebar.css
.side-bar {
background: #1b1a1b;
backdrop-filter: blur(15px);
width: 100%;
height: 100vh;
position: fixed;
top: 0;
z-index: 50;
overflow-y: auto;
transition: 0.6s ease;
transition-property: left;
}
Related
I have created a web portfolio for myself. Everything was fine while I was viewing it on my Desktop, but the issue happens when I view it on my phone.
a) The navbar collapses but it is not aligned properly.
b) There is some space on the right side of the viewport on my hero section. I am trying to understand the error but to no avail.
Link to portfolio: https://smammar.netlify.app/
HTML code
<header class="navigation fixed-top">
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand font-tertiary h3" href="index.html"><img src="images/logo2.png" alt="logo"
style="width: 130px; height: 130px;"> </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation"
aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation" id="responsiveNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-center" id="navigation">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">about</a>
</li>
<li class="nav-item">
<a class="nav-link" href="portfolio.html">Portfolio</a>
</li>
</ul>
</div>
</nav>
</header>
<!-- hero area -->
<section class="hero-area bg-primary" id="parallax">
<div class="container">
<div class="row">
<div class="col-lg-12 mx-auto">
<h2 class="text-white font-tertiary">Hi! I’m <br> Syed Mohammad Ammar <br> Full-Stack Designer</h2>
</div>
</div>
</div>
<div class="layer" id="l2">
<img src="images/illustrations/dots-cyan.png" alt="bg-shape">
</div>
<div class="layer" id="l4">
<img src="images/illustrations/dots-orange.png" alt="bg-shape">
</div>
<div class="layer" id="l6">
<img src="images/illustrations/dots-group-cyan.png" alt="illustrations" class="bg-shape-6">
</div>
<div class="layer" id="l9">
<img src="images/illustrations/dots-orange.png" alt="bg-shape">
</div>
<!-- social icon -->
<ul class="list-unstyled ml-5 mt-3 position-relative zindex-1">
<li class="mb-3"><a class="text-white" href="https://twitter.com/SMAmmar5"><i class="fab fa-github"
id="socialIcons"></i></a></li>
<li class="mb-3"><a class="text-white" href="#"><i class="fab fa-twitter" id="socialIcons1"></i></a></li>
<li class="mb-3"><a class="text-white" href="#"><i class="fab fa-behance" id="socialIcons2"></i></a></li>
<li class="mb-3"><a class="text-white" href="#"><i class="fab fa-linkedin" id="socialIcons3"></i></i></a></li>
</ul>
<!-- /social icon -->
</section>
<!-- /hero area -->
<!-- about -->
<section class="section">
<div class="container">
<div class="row">
<div class="col-lg-10 mx-auto text-center">
<p class="font-secondary paragraph-lg text-dark">I'm a full-stack designer based in Karachi, <span style="color: #228B22"> Pakistan </span> with
experience in delivering end-to-end UX/UI design to complete website for software products. I'm passionate about improving the
lives of others by creating human centric products.</p>
<a href="https://www.dropbox.com/.../syed%20mohammad%20ammar.pdf..." class="btn "
id="viewResume">View Resume</a>
</div>
</div>
</div>
</section>
CSS Code
.navigation {
padding: 40px 100px;
transition: .3s ease;
}
.navigation.nav-bg {
background-color: #000
;
padding: 0 70px;
}
#media (max-width: 600px) {
.navigation.nav-bg {
padding: 15px 20px;
}
}
#media (max-width: 600px) {
.navigation {
padding: 20px;
background: #000
;
}
}
.navbar .nav-item .nav-link {
font-family: "BwNistaInt-xBd";
text-transform: uppercase;
padding: 15px;
}
.navbar .nav-item.active {
font-weight: bold;
}
.navbar-dark .navbar-nav .nav-link {
color: #fff;
}
.navbar-dark .navbar-nav .nav-link:hover{
border-color: #ffa500;
color: #ffa500;
box-shadow: 0 0.5em 0.5em -0.5em #ffa500;
transition: all 0.2s;
cursor: pointer;
}
.hero-area {
padding: 300px 0 200px;
position: relative;
}
.hero-area h2 {
position: relative;
z-index: 2;
}
.layer {
position: absolute;
z-index: 1;
}
#l1 {
bottom: 0;
left: 0;
}
#l2 {
top: 190px;
left: -250px;
}
#l3 {
top: 200px;
left: 40%;
}
#l4 {
top: 200px;
right: 40%;
}
#l5 {
top: 100px;
right: -150px;
}
#l6 {
bottom: -20px;
left: 10%;
}
#l7 {
bottom: 100px;
left: 20%;
}
#l8 {
bottom: 160px;
right: 45%;
}
#l9 {
bottom: 100px;
right: -10px;
}
.layer-bg {
position: absolute;
bottom: 0;
left: 0;
}
Here's a quick fix. Try to add this into your css this will remove the spacing and improper alignments in responsive mode.
body, html {
overflow-x:hidden;
}
You can remove the header tag & it's class and then add 'fixed-top' class to the nav tag. That might solve the issue.
The button already has Javascript this is why I'm including it below - this code is separate to my question though. This is to change the button into something else ON CLICK - I want to keep the button hidden, until scroll... Looked all over and I'm unable to find the right way. (very new to JS).. and whenever I fiddle with the code it's breaking the JS which is why I'm seeking help.. it would be greatly appreciated.
$(document).ready(function() {
$("#mydiv").hide();
$("#show").click(function() {
$("#mydiv").toggle();
$("#show").toggle();
});
$("#hide").click(function() {
$("#mydiv").hide();
$("#show").show();
});
});
#mydiv {
position: fixed;
bottom: 0;
left: 0;
width: 360px;
}
.btn-purple {
width: 360px;
background: #721a71;
color: #fff;
padding: 10px;
position: fixed;
bottom: 0;
left: 0;
}
.myheader {
background: #721a71;
color: #fff;
padding: 10px;
}
.mybody {
background: #f5f5f5;
padding: 10px;
}
<div class="btn btn-purple" id="show">
Get in touch <i class="fa fa-angle-up pull-right" aria-hidden="true" style="color:#fff; font-weight:bolder; font-size:20px;"></i>
</div>
<div id="mydiv">
<div class="myheader text-center">
Get in touch <i id="hide" class="fa fa-angle-down pull-right" aria-hidden="true" style="color:#fff; font-weight:bolder; font-size:20px;"></i>
</div>
<div class="mybody">
<p class="d-none d-md-block">Number: <a class="external" href="#">01522 123456</a></p>
<p class="d-none d-md-block">Email: <a class="external" href="#">example#example.co.uk</a></p>
<p class="d-none d-md-block">Bookings: <a class="external" href="#">booking.example.co.uk</a></p>
<p class="d-md-none"><a class="btn btn-primary btn-block mt-4 mb-4" href="#">Call <span class="fa fa-phone" aria-hidden="true"></span></a></p>
<p class="d-md-none"><a class="btn btn-primary btn-block mt-4 mb-4" href="#">Email <span class="fa fa-envelope" aria-hidden="true"></span></a></p>
<p class="d-md-none"><a class="btn btn-primary btn-block mt-4 mb-4" href="#">Book <span class="fa fa-sign-in" aria-hidden="true"></span></a></p>
</div>
</div>
You need to attach a scroll function to the window if you want to show your div on scroll Jquery Scroll. Then the easiest way if you are not that familiar with javascript is to just add a class and control everything else with css. So you can just do something like the following:
$(window).scroll(function(){
$('#show').addClass('scrolled', $(this).scrollTop() > 100);
});
This will add the class of scrolled when the window reaches 100px. If you want it to also remove the class when it goes back up instead of using addCLass you can just switch that to toggleClass and it will remove it as well.
So here it is:
$(document).ready(function() {
$("#mydiv").hide();
$("#show").click(function() {
$("#mydiv").toggle();
$("#show").toggle();
});
$("#hide").click(function() {
$("#mydiv").hide();
$("#show").show();
});
});
$(window).scroll(function(){
$('#show').addClass('scrolled', $(this).scrollTop() > 100);
});
body{
height:300vh;
}
#mydiv {
position: fixed;
bottom: 0;
left: 0;
width: 360px;
}
.btn-purple {
width: 360px;
background: #721a71;
color: #fff;
padding: 10px;
position: fixed;
bottom: 0;
left: 0;
opacity:0;
transition:opacity 1000ms ease-in-out;
}
.btn-purple.scrolled{
opacity:1;
}
.myheader {
background: #721a71;
color: #fff;
padding: 10px;
}
.mybody {
background: #f5f5f5;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn btn-purple" id="show">
Get in touch <i class="fa fa-angle-up pull-right" aria-hidden="true" style="color:#fff; font-weight:bolder; font-size:20px;"></i>
</div>
<div id="mydiv">
<div class="myheader text-center">
Get in touch <i id="hide" class="fa fa-angle-down pull-right" aria-hidden="true" style="color:#fff; font-weight:bolder; font-size:20px;"></i>
</div>
<div class="mybody">
<p class="d-none d-md-block">Number: <a class="external" href="#">01522 123456</a></p>
<p class="d-none d-md-block">Email: <a class="external" href="#">example#example.co.uk</a></p>
<p class="d-none d-md-block">Bookings: <a class="external" href="#">booking.example.co.uk</a></p>
<p class="d-md-none"><a class="btn btn-primary btn-block mt-4 mb-4" href="#">Call <span class="fa fa-phone" aria-hidden="true"></span></a></p>
<p class="d-md-none"><a class="btn btn-primary btn-block mt-4 mb-4" href="#">Email <span class="fa fa-envelope" aria-hidden="true"></span></a></p>
<p class="d-md-none"><a class="btn btn-primary btn-block mt-4 mb-4" href="#">Book <span class="fa fa-sign-in" aria-hidden="true"></span></a></p>
</div>
</div>
If you dont want the transition effect you can instead just use the display property and remove opacity and transition from the css like so:
.btn-purple {
width: 360px;
background: #721a71;
color: #fff;
padding: 10px;
position: fixed;
bottom: 0;
left: 0;
display:none;
}
.btn-purple.scrolled{
display:block;
}
Not 100 percent sure your requirement so I gave you something to start with. I added an element to measure on window scroll that will scroll (first .big) that when off screen a bit will trigger one event and when back on screen shows via another event trigger. I also put some style in the CSS that was in the markup. Note you probably only need one of the hide/show and just need the up/down class thing instead but I left that alone for you.
$(document).ready(function() {
$("#show").on('click', function() {
$("#mydiv").toggle(true);
$("#show").toggle(false);
});
$("#hide").on('click', function() {
$("#mydiv").toggle(false);
$("#show").toggle(true);
});
$(window).on('scroll', function() {
var t = document.getElementsByClassName("big")[0];
var tt = t.getBoundingClientRect().top;
if (tt < -100) { // as soon as its 100px off screen
setTimeout(function() {
$("#show").trigger('click');
}, 1000);
}
if (tt >= 0) { // as soon as its back on screen
setTimeout(function() {
$("#hide ").trigger('click');
}, 1000);
}
});
});
#mydiv {
position: fixed;
bottom: 0;
left: 0;
width: 360px;
display: none;
}
#show>i,
#hide>i {
color: #fff;
font-weight: bolder;
font-size: 20px;
}
.big {
height: 20em;
}
.btn-purple {
width: 360px;
background: #721a71;
color: #fff;
padding: 10px;
position: fixed;
bottom: 0;
left: 0;
}
.myheader {
background: #721a71;
color: #fff;
padding: 10px;
}
.mybody {
background: #f5f5f5;
padding: 10px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="btn btn-purple" id="show">
Get in touch S<i class="fa fa-angle-up pull-right" aria-hidden="true">^^^</i>
</div>
<div id="mydiv">
<div class="myheader text-center">
Get in touch H<i id="hide" class="fa fa-angle-down pull-right" aria-hidden="true">xxx</i>
</div>
<div class="mybody">
<p class="d-none d-md-block">Number: <a class="external" href="#">01522 123456</a></p>
<p class="d-none d-md-block">Email: <a class="external" href="#">example#example.co.uk</a></p>
<p class="d-none d-md-block">Bookings: <a class="external" href="#">booking.example.co.uk</a></p>
<p class="d-md-none"><a class="btn btn-primary btn-block mt-4 mb-4" href="#">Call <span class="fa fa-phone" aria-hidden="true"></span></a></p>
<p class="d-md-none"><a class="btn btn-primary btn-block mt-4 mb-4" href="#">Email <span class="fa fa-envelope" aria-hidden="true"></span></a></p>
<p class="d-md-none"><a class="btn btn-primary btn-block mt-4 mb-4" href="#">Book <span class="fa fa-sign-in" aria-hidden="true"></span></a></p>
</div>
</div>
<div class='big'>make me scroll</div>
<div class='big'>(I just take up space)</div>
I have such a layout:
I would like that when one clicks the orange button, the sidebar shrinks and leaves only the icons visible. And for the mobile should totally shrink and when one clicks the button only the icons should be visible. The behaviour should be like this but I don't understand how to make it work.
For now I have my header:
<div class="navbar-header">
<a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#menu-toggle" onclick="toggle()"><i class="fa fa-bars"></i></a>
<a class="navbar-brand" href="#">...</a>
</div>
But I don't know how to make it collapse when one clicks.. Thanks
In a rough way you could assign 2 classes (one for the icon, one for the relative text) for example, class "icon" and class "text", and on button click, toggle (hide and show) the element with the class "text". Then in a callback you could animate the resizing of the sidebar.
Edit2: Improved example
$('#togglebutton').click(function() {
if ($(window).width() > 500) { //your chosen mobile res
$('.text').toggle(300);
} else {
$('.menu').animate({
width: 'toggle'
}, 350);
}
});
.wrapper { width: 100% }
.menu {
background: #222;
float: left;
display: block;
}
.icon { max-width: 1em }
.menu ul {
list-style-type: none;
margin: 0;
padding: 0.2em 0.5em;
}
.menu li { margin: 0 }
.menu a, .menu a:visited {
color: white;
text-decoration: none;
}
.text {
display: inline;
margin: 0;
}
.content { display: block; }
button { margin: 1em; }
#media only screen and (max-width: 500px) {
.text {
display: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="menu">
<ul>
<li>
<a href="#">
<img class="icon" src="http://bit.do/iconUrl">
<p class="text">Text 1</p>
</a>
</li>
<li>
<a href="#">
<img class="icon" src="http://bit.do/iconUrl">
<p class="text">Text 2</p>
</a>
</li>
</ul>
</div>
<div class="content">
<button id="togglebutton">☰</button>
</div>
</div>
Hope it was useful to have a general idea of my suggestion.
Update 2019
Bootstrap 4
This is also possible in Bootstrap 4, but still requires extra CSS to handle the sidebar state.
https://www.codeply.com/p/e5IcpodgE2
Bootstrap 3
You can create an "off canvas" sidebar, and then use Bootstrap's responsive utility classes to toggle display of the icons.
<div class="wrapper">
<div class="row row-offcanvas row-offcanvas-left">
<!-- sidebar -->
<div class="column col-sm-3 col-xs-1 sidebar-offcanvas" id="sidebar">
<ul class="nav" id="menu">
<li><i class="glyphicon glyphicon-list-alt"></i> <span class="collapse in hidden-xs">Link 1</span></li>
<li><i class="glyphicon glyphicon-list"></i> <span class="collapse in hidden-xs">Stories</span></li>
<li><i class="glyphicon glyphicon-paperclip"></i> <span class="collapse in hidden-xs">Saved</span></li>
<li><i class="glyphicon glyphicon-refresh"></i> <span class="collapse in hidden-xs">Refresh</span></li>
</ul>
</div>
<!-- main right col -->
<div class="column col-sm-9 col-xs-11" id="main">
<i class="fa fa-navicon"></i>
<p>
content...
</p>
</div>
</div>
</div>
https://www.codeply.com/p/uunNOeQAqo
2 problems when trying to implement this:
Putting it in the body breaks the sticky nav.
Scroll bar on div.
If i try to do http://keithclark.co.uk/articles/pure-css-parallax-websites/ in a div. It causes a scrollbar in that div.
Trying to counter it by putting it in the body directly breaks the sticky nav (made using bootstrap).
Here is the pen http://codepen.io/dam0/pen/zviHr that I tried to do also. Similar concept.
I only need a parallax on a div. The different element speed type. Any help?
Here's the html structure i have. Please take a look. I already some put comments there.
I'm trying to make it Pure CSS as long as possible. But if it can't be done, help me with js.
EDIT: Added a Pen
http://codepen.io/anon/pen/qZVEgM
Adding the .parallax to the div i want to have a parallax effect causes it to have scrollbar. Putting the parallax class to the body will break the position:fixed of the sticky nav.
EDIT 2: Moved the pen code here
HTML:
<div class="parallax holder">
<div id="carousel" class="parallax__layer parallax__back carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://loremflickr.com/1920/1080/vegetable,healthy,plate" class="img-responsive center-block">
</div>
<div class="item">
<img src="http://loremflickr.com/1920/1080/vegetable,healthy,plate" class="img-responsive center-block">
</div>
</div>
</div>
<div id="headerCaption" class="parallax__layer parallax__layer--base">
<img src="http://healthyaxcess.ph/img/CaptionBg.png" id="curve" class="img-responsive center-block">
</div>
</div>
<div id="nav-wrapper">
<nav class="navbar navbar-inverse navbar-static-top" id="navbar-main">
<div class="container">
<!-- 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="#"><img src="http://healthyaxcess.ph/img/logo.png"></a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-shopping-cart"></i> Cart</li>
<li><i class="fa fa-user"></i> Sign Up/Login</li>
</ul>
<!-- Nav links -->
<div class="collapse navbar-collapse navbar-right" id="navbar-collapse">
<ul class="nav navbar-nav" id="nav-section">
<li class="current active">
First Section
</li>
<li>
Second Section
</li>
<li>
Third Section
</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Dropdown link 1</li>
<li>Dropdown link 2</li>
<li>Dropdown link 3</li>
</ul>
</li>
</ul>
</div><!-- End of navbar collapse -->
</div><!-- End of Container Fluid -->
</nav>
</div>
<div class="container main">
<div class="text-center" id="section-2">
<h1>Sample Title</h1>
<p>The sample title's description here.</p>
</div>
CSS:
.navbar-inverse {
background: #303030;
}
#navbar-main {
margin: 0;
}
/* To override the static-top */
#navbar-main.affix {
position: fixed;
top: 0;
width: 100%;
}
#media (min-width: 992px) {
#navbar-main .navbar-nav {
position: relative;
margin-top: 16px;
}
}
.main {
/* for example only */
min-height: 200px;
}
.navbar-brand {
padding: 0;
/* firefox bug fix */
height: 80px;
}
.navbar-brand>img {
height: 100%;
padding: 8px;
/* firefox bug fix */
width: auto;
position: relative;
}
#footerBox {
background-color: #303030;
color: #FAFAFA;
}
.holder {
display: none;
}
#headerCaption {
position: relative;
}
#headerCaption img {
z-index: 3;
position: absolute;
width: 100%;
}
.carousel {
position: relative;
}
.parallax {
perspective: 1px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
}
.parallax__layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.parallax__layer--base {
transform: translateZ(0);
}
.parallax__layer--back {
transform: translateZ(-1px);
}
JS:
$('#carousel img').on("load", function(){
$('body').scrollspy({ target: '#navbar-collapse' });
$('.holder').css('display', 'block');
$('#nav-wrapper').height($("#navbar-main").height());
$('#navbar-main').affix( { offset:{ top:$('#navbar-main').offset().top } } );
$('.carousel').carousel({pause: false});
})
I am trying to create an Offcanvas Left nav bar that can be brought into view on button click.
Currently it opens fine but when it closes the top navigation of the page is very jumpy and closes instantly without an animation.
The left bar also overlaps the footer and the footer doesn't move the way it should like the top nav bar.
Bootply
Added -webkit-transition: all 1s ease; to the footer and wrapper class, because everything has to be animated.
I set overflow hidden on html, body selector, this is a fix for the jumpy footer.
The only thing left to do now is adding two lines in your javascript:
$(".footer").css('-webkit-transform', 'translate(20%, 0)');
and
(".footer").css('-webkit-transform', 'translate(0, 0)');
I'm no expert so feel free to correct me, but i think it works the way you want it to.
$(document).ready(function() {
var menu = "close";
$(".menuToggle").click(function() {
if (menu == "close") {
$(".leftNavbar").css("-webkit-transform", "translate(0, 0)");
$(".wrapper").css('-webkit-transform', 'translate(20%, 0)');
$(".footer").css('-webkit-transform', 'translate(20%, 0)');
menu = "open";
} else {
$(".leftNavbar").css("-webkit-transform", "translate(-100%, 0)");
$(".wrapper").css('-webkit-transform', 'translate(0, 0)');
$(".footer").css('-webkit-transform', 'translate(0, 0)');
menu = "close";
}
});
});
/* CSS used here will be applied after bootstrap.css */
.leftNavbar {
position: fixed;
width: 20%;
left: 0;
overflow: hidden;
background-color: green;
-webkit-transform: translate(-100%, 0);
-webkit-transition: all 1s ease;
}
.menuToggle .navbar-toggle .icon-bar {
background-color: black;
}
.menuToggle .navbar-toggle {
display: block;
float: left;
border: 1px solid gray;
margin-left: 5px;
margin-top: -10px;
}
html,
body {
height: 100%;
overflow: hidden;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -40px;
-webkit-transition: all 1s ease;
}
footer,
.push {
min-height: 40px;
height: auto;
}
.footer {
color: white;
-webkit-transition: all 1s ease;
}
<div class="leftNavbar">
<h2>Sidebar menu</h2>
<nav>
Home
About
Contact
Prices
</nav>
</div>
<div class="wrapper">
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<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">
<img id="logo" src="Logos/LetterHillustrator.png">
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li>Services
</li>
<li>Our Prices
</li>
<li>About Us
</li>
<li>Contact Us
</li>
</ul>
</div>
</div>
</div>
<!--------SIDE NAVBAR-------->
<!--<div class="leftNavbar">
<ul class="nav nav-pills nav-stacked">
<li class="active"><span class="glyphicon glyphicon-chevron-right"></span> Home</li>
<li><span class="glyphicon glyphicon-chevron-right"></span> Option 1</li>
<li><span class="glyphicon glyphicon-chevron-right"></span> Option 2 (active)</li>
<li><span class="glyphicon glyphicon-chevron-right"></span> Option 3</li>
<li><span class="glyphicon glyphicon-chevron-right"></span> Option 4</li>
<li><span class="glyphicon glyphicon-chevron-right"></span> Option 5</li>
</ul>
</div>-->
<!-----SIDEBAR------->
<div class="menuToggle">
<button class="navbar-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="push"></div>
</div>
<footer class="footer navbar-inverse">
<div class="container">
<h6 style="width:50%; text-align:center;">34 The Broadway, Greenford UB6 9PT, tel: 020 8575 0880, Email: info#GoodHome.co.uk</h6>
</div>
</footer>