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

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>

Related

Bootstrap 4 Landing page to added right side image cant put to correctly

Im tried to added bootstrap 4 my sample project to right side background , I have some conflict on this, i tried to put it right side , its not working, anyone know how to do that correctly
Thanks
// Navbar scroll js //
jQuery(function($) {
"use strict";
// get the value of the bottom of the #main element by adding the offset of that element plus its height, set it as a variable
var mainbottom = $('#main').offset().top;
// on scroll,
$(window).on('scroll',function(){
// we round here to reduce a little workload
stop = Math.round($(window).scrollTop());
if (stop > mainbottom) {
$('.navbar').addClass('past-main');
$('.navbar').addClass('effect-main')
} else {
$('.navbar').removeClass('past-main');
}
});
// Collapse navbar on click
$(document).on('click.nav','.navbar-collapse.in',function(e) {
if( $(e.target).is('a') ) {
$(this).removeClass('in').addClass('collapse');
}
});
/*-----------------------------------
----------- Scroll To Top -----------
------------------------------------*/
$(window).on('scroll', function () {
if ($(this).scrollTop() > 1000) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top').on('click', function () {
$('#back-top').tooltip('hide');
$('body,html').animate({
scrollTop: 0
}, 1500);
return false;
});
/* ------ jQuery for Easing min -- */
// Smooth scrolling using jQuery easing
$('a.js-scroll-trigger[href*="#"]:not([href="#"])').on('click', function () {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: (target.offset().top - 54)
}, 1000, "easeInOutExpo");
return false;
}
}
});
// Closes responsive menu when a scroll trigger link is clicked
$('.js-scroll-trigger').on('click', function () {
$('.navbar-collapse').collapse('hide');
});
// Activate scrollspy to add active class to navbar items on scroll
$('body').scrollspy({
target: '#mainNav',
offset: 54
});
});
/*----- Main Classes -----*/
html * {
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* --- Font Styles ---*/
h1, h2, h3, h4, h5, h6 {
font-family: 'Montserrat';
font-size: 16px;
}
p {
font-family: 'Montserrat';
font-size: 14px;
}
/*------ Navbar Styling ------*/
.navbar {
font-family: sans-serif;
padding-top: 25px;
padding-bottom: 25px;
background-color: transparent !important;
-webkit-transition: 0.5s all ease;
transition: 0.5s all ease;
}
.navbar .navbar-brand {
font-size: 1.1rem;
font-weight: 600;
color: #563D7C;
}
.navbar .navbar-toggler {
border: none;
}
.navbar span.navbar-toggler-icon::before {
outline: none;
}
.navbar .navbar-toggler:focus {
outline: none;
}
.navbar-nav {
text-align: center;
margin-top: 15px;
-webkit-transition: 0.5s all ease; /* For Safari 3.1 to 6.0 */
transition: 0.5s all ease;
}
.navbar-nav .nav-item {
margin-right: 0;
margin-top: 1.5rem;
font-size: 0.85rem;
font-weight: 400;
text-transform: capitalize;
color: #563D7C;
}
.navbar-nav .nav-item .nav-link {
color: #563D7C;
font-weight: 500;
}
.nav-white .nav-item .nav-link {
font-size: 0.9rem;
text-transform: capitalize;
color: #FFFFFF;
}
.nav-white .nav-item .nav-link:hover {
color: #F1F1F1;
}
.nav-white .navbar-brand {
color: #FFFFFF;
}
#media only screen and (max-width: 768px) {
.navbar {
background: rgba(255, 255, 255, 0.99) !important;
padding-top: 10px;
padding-bottom: 10px;
}
.nav-white .navbar-brand {
color: #4957B8;
}
.nav-white .nav-item .nav-link {
color: #4957B8;
}
}
#media only screen and (min-width: 240px) {
.navbar.past-main {
padding-top: 15px;
padding-bottom: 15px;
background-color: rgba(255, 255, 255, 0.99) !important;
-webkit-box-shadow: 0 1px 5px 0 rgba(96, 96, 96, 0.3);
-moz-box-shadow: 0 1px 5px 0 rgba(96, 96, 96, 0.3);
box-shadow: 0 1px 5px 0 rgba(96, 96, 96, 0.3);
}
.navbar.effect-main {
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.nav-white.past-main .nav-item .nav-link {
color: #4957B8;
font-weight: 500;
}
.navbar.past-main .nav-item .nav-link {
font-weight: 500;
}
.nav-white.past-main .navbar-brand {
color: #4957B8;
}
.nav-white.effect-main {
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
/*----------------------------------------------------------
--------------- 3. Hero Home Styling Starts -------------------
----------------------------------------------------------*/
.home-section h4 {
font-family: 'Open Sans';
font-size: 12px;
font-weight: 500;
color: #b2bcc1;
text-transform: uppercase;
line-height: 1.2;
letter-spacing: 2px;
margin-bottom: 20px;
}
.home-section img {
margin-top: 50px;
}
.hero-home h1 {
font-size: 32px;
font-weight: 700;
color: #FFFFFF;
color: #FFF;
line-height: 1.2;
letter-spacing: -1px;
}
.home-section h1 {
font-size: 28px;
font-weight: 700;
color: #364655;
color: #FFF;
line-height: 1.2;
letter-spacing: -1px;
}
.hero-home p {
font-size: 14px;
font-weight: 300;
color: #EFEFEF;
color: #FFF;
line-height: 1.6;
letter-spacing: 1px;
margin-top: 20px;
}
.home-section p {
font-size: 14px;
font-weight: 300;
color: #627382;
color: #FFF;
line-height: 1.6;
letter-spacing: 1px;
margin-top: 20px;
}
/*---------- home-section Styling --------------- */
.home-section {
padding: 100px 0 50px 0 !important;
background:#4529f9 ;height: 100vh;
min-height: 40rem;
padding-top: 72px;
padding-bottom: 0;
}
.home-section .home-content {
text-align: center;
}
/*-----------------------------------------------------------------
------------------ Media Queries -------------------
-----------------------------------------------------------------*/
#media only screen and (min-width: 767px) {
.navbar-nav {
margin-top: 0;
}
.navbar-nav .nav-item {
margin-top: 0;
margin-right: 15px;
font-size: 0.85rem;
font-weight: 400;
}
.home-split .home-left {
padding: 200px 20px 150px 20px;
}
.home-section {
padding: 150px 0 150px 0 !important;
}
.home-section.col-sm-5 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 50%;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
}
}
.banner-one {
width: 100%;
background-image: url(http://brotherslab.thesoftking.com/html/lotten/demo/assets/images/shape/banner-one.png);
background-repeat: no-repeat;
height: 880px;
position: relative;
overflow: hidden;
background-size: 68%;
background-position: top right;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Landing Page</title>
<!-- Bootstrap , Main CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- fontawesome kit -->
<script src="https://kit.fontawesome.com/04ca3524f6.js" crossorigin="anonymous"></script>
</head>
<body>
<!---Nav bar section--->
<div class="wrapper">
<div class="container">
<nav class="navbar navbar-expand-md nav-white navbar-light bg-light fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Label</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto navbar-right">
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#main">Home</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#about">About</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#services">Features</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#pricing">Pricing</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#contact">Contact</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#">Buy Now</a></li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<!---End of Nav bar section--->
<!---Home section--->
<div id="main" class="main">
<div class="home-land home-section">
<div class="container">
<div class="row align-center">
<div class="col-md-6 col-lg-6">
<div class="home-content">
<h4>Label for your big data needs</h4>
<h1>Manage all your data at just one place</h1>
<p>Best in class big data software and analytics services will render your chunks into meaningful data.</p>
<div class="subform subform-alt wow fadeInDown" data-wow-delay="0.3s">
<form id="signup" class="formee formee-alt" action="assets/php/subscribe.php" method="post">
<input name="email" id="email" type="text" /><input class="right inputnew" type="submit" title="Send" value="Get Access" />
</form>
<div id="response"></div>
</div>
<div class="form-note">
<p>14-day free trial and no credit card required.</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-6 offset-lg-1">
<img src="http://brotherslab.thesoftking.com/html/lotten/demo/assets/images/shape/banner-one.png" class="banner-one">
</div>
<div class=""></div>
</div>
</div>
</div>
<!---End of Home section--->
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

I removed image and added banner class to root div.
Changed also banner class to:
.banner-one {
background-image: url(http://brotherslab.thesoftking.com/html/lotten/demo/assets/images/shape/banner-one.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
// Navbar scroll js //
jQuery(function($) {
"use strict";
// get the value of the bottom of the #main element by adding the offset of that element plus its height, set it as a variable
var mainbottom = $('#main').offset().top;
// on scroll,
$(window).on('scroll', function() {
// we round here to reduce a little workload
stop = Math.round($(window).scrollTop());
if (stop > mainbottom) {
$('.navbar').addClass('past-main');
$('.navbar').addClass('effect-main')
} else {
$('.navbar').removeClass('past-main');
}
});
// Collapse navbar on click
$(document).on('click.nav', '.navbar-collapse.in', function(e) {
if ($(e.target).is('a')) {
$(this).removeClass('in').addClass('collapse');
}
});
/*-----------------------------------
----------- Scroll To Top -----------
------------------------------------*/
$(window).on('scroll', function() {
if ($(this).scrollTop() > 1000) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top').on('click', function() {
$('#back-top').tooltip('hide');
$('body,html').animate({
scrollTop: 0
}, 1500);
return false;
});
/* ------ jQuery for Easing min -- */
// Smooth scrolling using jQuery easing
$('a.js-scroll-trigger[href*="#"]:not([href="#"])').on('click', function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: (target.offset().top - 54)
}, 1000, "easeInOutExpo");
return false;
}
}
});
// Closes responsive menu when a scroll trigger link is clicked
$('.js-scroll-trigger').on('click', function() {
$('.navbar-collapse').collapse('hide');
});
// Activate scrollspy to add active class to navbar items on scroll
$('body').scrollspy({
target: '#mainNav',
offset: 54
});
});
/*----- Main Classes -----*/
html * {
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* --- Font Styles ---*/
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Montserrat';
font-size: 16px;
}
p {
font-family: 'Montserrat';
font-size: 14px;
}
/*------ Navbar Styling ------*/
.navbar {
font-family: sans-serif;
padding-top: 25px;
padding-bottom: 25px;
background-color: transparent !important;
-webkit-transition: 0.5s all ease;
transition: 0.5s all ease;
}
.navbar .navbar-brand {
font-size: 1.1rem;
font-weight: 600;
color: #563D7C;
}
.navbar .navbar-toggler {
border: none;
}
.navbar span.navbar-toggler-icon::before {
outline: none;
}
.navbar .navbar-toggler:focus {
outline: none;
}
.navbar-nav {
text-align: center;
margin-top: 15px;
-webkit-transition: 0.5s all ease;
/* For Safari 3.1 to 6.0 */
transition: 0.5s all ease;
}
.navbar-nav .nav-item {
margin-right: 0;
margin-top: 1.5rem;
font-size: 0.85rem;
font-weight: 400;
text-transform: capitalize;
color: #563D7C;
}
.navbar-nav .nav-item .nav-link {
color: #563D7C;
font-weight: 500;
}
.nav-white .nav-item .nav-link {
font-size: 0.9rem;
text-transform: capitalize;
color: #FFFFFF;
}
.nav-white .nav-item .nav-link:hover {
color: #F1F1F1;
}
.nav-white .navbar-brand {
color: #FFFFFF;
}
#media only screen and (max-width: 768px) {
.navbar {
background: rgba(255, 255, 255, 0.99) !important;
padding-top: 10px;
padding-bottom: 10px;
}
.nav-white .navbar-brand {
color: #4957B8;
}
.nav-white .nav-item .nav-link {
color: #4957B8;
}
}
#media only screen and (min-width: 240px) {
.navbar.past-main {
padding-top: 15px;
padding-bottom: 15px;
background-color: rgba(255, 255, 255, 0.99) !important;
-webkit-box-shadow: 0 1px 5px 0 rgba(96, 96, 96, 0.3);
-moz-box-shadow: 0 1px 5px 0 rgba(96, 96, 96, 0.3);
box-shadow: 0 1px 5px 0 rgba(96, 96, 96, 0.3);
}
.navbar.effect-main {
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.nav-white.past-main .nav-item .nav-link {
color: #4957B8;
font-weight: 500;
}
.navbar.past-main .nav-item .nav-link {
font-weight: 500;
}
.nav-white.past-main .navbar-brand {
color: #4957B8;
}
.nav-white.effect-main {
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
/*----------------------------------------------------------
--------------- 3. Hero Home Styling Starts -------------------
----------------------------------------------------------*/
.home-section h4 {
font-family: 'Open Sans';
font-size: 12px;
font-weight: 500;
color: #b2bcc1;
text-transform: uppercase;
line-height: 1.2;
letter-spacing: 2px;
margin-bottom: 20px;
}
.home-section img {
margin-top: 50px;
}
.hero-home h1 {
font-size: 32px;
font-weight: 700;
color: #FFFFFF;
color: #FFF;
line-height: 1.2;
letter-spacing: -1px;
}
.home-section h1 {
font-size: 28px;
font-weight: 700;
color: #364655;
color: #FFF;
line-height: 1.2;
letter-spacing: -1px;
}
.hero-home p {
font-size: 14px;
font-weight: 300;
color: #EFEFEF;
color: #FFF;
line-height: 1.6;
letter-spacing: 1px;
margin-top: 20px;
}
.home-section p {
font-size: 14px;
font-weight: 300;
color: #627382;
color: #FFF;
line-height: 1.6;
letter-spacing: 1px;
margin-top: 20px;
}
/*---------- home-section Styling --------------- */
.home-section {
padding: 100px 0 50px 0 !important;
background: #4529f9;
height: 100vh;
min-height: 40rem;
padding-top: 72px;
padding-bottom: 0;
}
.home-section .home-content {
text-align: center;
}
/*-----------------------------------------------------------------
------------------ Media Queries -------------------
-----------------------------------------------------------------*/
#media only screen and (min-width: 767px) {
.navbar-nav {
margin-top: 0;
}
.navbar-nav .nav-item {
margin-top: 0;
margin-right: 15px;
font-size: 0.85rem;
font-weight: 400;
}
.home-split .home-left {
padding: 200px 20px 150px 20px;
}
.home-section {
padding: 150px 0 150px 0 !important;
}
.home-section.col-sm-5 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 50%;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
}
}
.banner-one {
background-image: url(http://brotherslab.thesoftking.com/html/lotten/demo/assets/images/shape/banner-one.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Landing Page</title>
<!-- Bootstrap , Main CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- fontawesome kit -->
<script src="https://kit.fontawesome.com/04ca3524f6.js" crossorigin="anonymous"></script>
</head>
<body>
<!---Nav bar section--->
<div class="wrapper">
<div class="container">
<nav class="navbar navbar-expand-md nav-white navbar-light bg-light fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Label</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto navbar-right">
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#main">Home</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#about">About</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#services">Features</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#pricing">Pricing</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#contact">Contact</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#">Buy Now</a></li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<!---End of Nav bar section--->
<!---Home section--->
<div id="main" class="main">
<div class="home-land home-section banner-one">
<div class="container">
<div class="row align-center">
<div class="col-md-6 col-lg-6">
<div class="home-content">
<h4>Label for your big data needs</h4>
<h1>Manage all your data at just one place</h1>
<p>Best in class big data software and analytics services will render your chunks into meaningful data.</p>
<div class="subform subform-alt wow fadeInDown" data-wow-delay="0.3s">
<form id="signup" class="formee formee-alt" action="assets/php/subscribe.php" method="post">
<input name="email" id="email" type="text" /><input class="right inputnew" type="submit" title="Send" value="Get Access" />
</form>
<div id="response"></div>
</div>
<div class="form-note">
<p>14-day free trial and no credit card required.</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-6 offset-lg-1">
</div>
<div class=""></div>
</div>
</div>
</div>
<!---End of Home section--->
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

I put the banner-one class with 'home-land home-section' div , now it's working
// Navbar scroll js //
jQuery(function($) {
"use strict";
// get the value of the bottom of the #main element by adding the offset of that element plus its height, set it as a variable
var mainbottom = $('#main').offset().top;
// on scroll,
$(window).on('scroll',function(){
// we round here to reduce a little workload
stop = Math.round($(window).scrollTop());
if (stop > mainbottom) {
$('.navbar').addClass('past-main');
$('.navbar').addClass('effect-main')
} else {
$('.navbar').removeClass('past-main');
}
});
// Collapse navbar on click
$(document).on('click.nav','.navbar-collapse.in',function(e) {
if( $(e.target).is('a') ) {
$(this).removeClass('in').addClass('collapse');
}
});
/*-----------------------------------
----------- Scroll To Top -----------
------------------------------------*/
$(window).on('scroll', function () {
if ($(this).scrollTop() > 1000) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top').on('click', function () {
$('#back-top').tooltip('hide');
$('body,html').animate({
scrollTop: 0
}, 1500);
return false;
});
/* ------ jQuery for Easing min -- */
// Smooth scrolling using jQuery easing
$('a.js-scroll-trigger[href*="#"]:not([href="#"])').on('click', function () {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: (target.offset().top - 54)
}, 1000, "easeInOutExpo");
return false;
}
}
});
// Closes responsive menu when a scroll trigger link is clicked
$('.js-scroll-trigger').on('click', function () {
$('.navbar-collapse').collapse('hide');
});
// Activate scrollspy to add active class to navbar items on scroll
$('body').scrollspy({
target: '#mainNav',
offset: 54
});
});
/*----- Main Classes -----*/
html * {
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* --- Font Styles ---*/
h1, h2, h3, h4, h5, h6 {
font-family: 'Montserrat';
font-size: 16px;
}
p {
font-family: 'Montserrat';
font-size: 14px;
}
/*------ Navbar Styling ------*/
.navbar {
font-family: sans-serif;
padding-top: 25px;
padding-bottom: 25px;
background-color: transparent !important;
-webkit-transition: 0.5s all ease;
transition: 0.5s all ease;
}
.navbar .navbar-brand {
font-size: 1.1rem;
font-weight: 600;
color: #563D7C;
}
.navbar .navbar-toggler {
border: none;
}
.navbar span.navbar-toggler-icon::before {
outline: none;
}
.navbar .navbar-toggler:focus {
outline: none;
}
.navbar-nav {
text-align: center;
margin-top: 15px;
-webkit-transition: 0.5s all ease; /* For Safari 3.1 to 6.0 */
transition: 0.5s all ease;
}
.navbar-nav .nav-item {
margin-right: 0;
margin-top: 1.5rem;
font-size: 0.85rem;
font-weight: 400;
text-transform: capitalize;
color: #563D7C;
}
.navbar-nav .nav-item .nav-link {
color: #563D7C;
font-weight: 500;
}
.nav-white .nav-item .nav-link {
font-size: 0.9rem;
text-transform: capitalize;
color: #FFFFFF;
}
.nav-white .nav-item .nav-link:hover {
color: #F1F1F1;
}
.nav-white .navbar-brand {
color: #FFFFFF;
}
#media only screen and (max-width: 768px) {
.navbar {
background: rgba(255, 255, 255, 0.99) !important;
padding-top: 10px;
padding-bottom: 10px;
}
.nav-white .navbar-brand {
color: #4957B8;
}
.nav-white .nav-item .nav-link {
color: #4957B8;
}
}
#media only screen and (min-width: 240px) {
.navbar.past-main {
padding-top: 15px;
padding-bottom: 15px;
background-color: rgba(255, 255, 255, 0.99) !important;
-webkit-box-shadow: 0 1px 5px 0 rgba(96, 96, 96, 0.3);
-moz-box-shadow: 0 1px 5px 0 rgba(96, 96, 96, 0.3);
box-shadow: 0 1px 5px 0 rgba(96, 96, 96, 0.3);
}
.navbar.effect-main {
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.nav-white.past-main .nav-item .nav-link {
color: #4957B8;
font-weight: 500;
}
.navbar.past-main .nav-item .nav-link {
font-weight: 500;
}
.nav-white.past-main .navbar-brand {
color: #4957B8;
}
.nav-white.effect-main {
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
/*----------------------------------------------------------
--------------- 3. Hero Home Styling Starts -------------------
----------------------------------------------------------*/
.home-section h4 {
font-family: 'Open Sans';
font-size: 12px;
font-weight: 500;
color: #b2bcc1;
text-transform: uppercase;
line-height: 1.2;
letter-spacing: 2px;
margin-bottom: 20px;
}
.home-section img {
margin-top: 50px;
}
.hero-home h1 {
font-size: 32px;
font-weight: 700;
color: #FFFFFF;
color: #FFF;
line-height: 1.2;
letter-spacing: -1px;
}
.home-section h1 {
font-size: 28px;
font-weight: 700;
color: #364655;
color: #FFF;
line-height: 1.2;
letter-spacing: -1px;
}
.hero-home p {
font-size: 14px;
font-weight: 300;
color: #EFEFEF;
color: #FFF;
line-height: 1.6;
letter-spacing: 1px;
margin-top: 20px;
}
.home-section p {
font-size: 14px;
font-weight: 300;
color: #627382;
color: #FFF;
line-height: 1.6;
letter-spacing: 1px;
margin-top: 20px;
}
/*---------- home-section Styling --------------- */
.home-section {
padding: 100px 0 50px 0 !important;
background:#4529f9 ;height: 100vh;
min-height: 40rem;
padding-top: 72px;
padding-bottom: 0;
}
.home-section .home-content {
text-align: center;
}
/*-----------------------------------------------------------------
------------------ Media Queries -------------------
-----------------------------------------------------------------*/
#media only screen and (min-width: 767px) {
.navbar-nav {
margin-top: 0;
}
.navbar-nav .nav-item {
margin-top: 0;
margin-right: 15px;
font-size: 0.85rem;
font-weight: 400;
}
.home-split .home-left {
padding: 200px 20px 150px 20px;
}
.home-section {
padding: 150px 0 150px 0 !important;
}
.home-section.col-sm-5 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 50%;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
}
}
.banner-one {
width: 100%;
background-image: url(http://brotherslab.thesoftking.com/html/lotten/demo/assets/images/shape/banner-one.png);
background-repeat: no-repeat;
height: 880px;
position: relative;
overflow: hidden;
background-size: 68%;
background-position: top right;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Landing Page</title>
<!-- Bootstrap , Main CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- fontawesome kit -->
<script src="https://kit.fontawesome.com/04ca3524f6.js" crossorigin="anonymous"></script>
</head>
<body>
<!---Nav bar section--->
<div class="wrapper">
<div class="container">
<nav class="navbar navbar-expand-md nav-white navbar-light bg-light fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Label</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto navbar-right">
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#main">Home</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#about">About</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#services">Features</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#pricing">Pricing</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#contact">Contact</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#">Buy Now</a></li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<!---End of Nav bar section--->
<!---Home section--->
<div id="main" class="main">
<div class="home-land home-section banner-one">
<div class="container">
<div class="row align-center">
<div class="col-md-6 col-lg-6">
<div class="home-content">
<h4>Label for your big data needs</h4>
<h1>Manage all your data at just one place</h1>
<p>Best in class big data software and analytics services will render your chunks into meaningful data.</p>
<div class="subform subform-alt wow fadeInDown" data-wow-delay="0.3s">
<form id="signup" class="formee formee-alt" action="assets/php/subscribe.php" method="post">
<input name="email" id="email" type="text" /><input class="right inputnew" type="submit" title="Send" value="Get Access" />
</form>
<div id="response"></div>
</div>
<div class="form-note">
<p>14-day free trial and no credit card required.</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-6 offset-lg-1">
</div>
<div class=""></div>
</div>
</div>
</div>
<!---End of Home section--->
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

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;

How to get the navigation bar to stay fixed

I am just trying to get my nav bar to have a fixed position at the top of the screen, so when the user scrolls down it should stay at the top, but for some reason it's not doing it.
$(document).ready(function(){
$(window).bind('scroll', function() {
var navHeight = $( window ).height() - 286;
if ($(window).scrollTop() > navHeight) {
$('nav').addClass('fixed');
}
else {
$('nav').removeClass('fixed');
}
});
});
.section {
background-color: Red;
padding: 33px 0;
height: 5000px;
}
.fixed {
position: fixed;
left: 20;
top: 0;
width: 100%;
list-style: none;
z-index: 1;
}
#navs li {
margin: 0 0 10px 0;
}
#navs li a {
font-size: 0.9em;
font-weight: 600;
color: #999999;
text-decoration: none;
text-transform: uppercase;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
#navs li:hover {
color: #FFFFFF;
font-size: 18px;
}
#navs li a.active {
color: #FFFFFF;
font-size: 18px;
}
/* For Index 2 */
.navbar {
min-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;
}
.sticky-wrapper.is-sticky .main-nav {
width: 100%;
z-index: 10;
}
.navbar-toggle {
background-color: #000000;
background-image: none;
border: 1px solid #000000 !important;
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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-nav">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="navbar-collapse collapse" id="bs-example-navbar-collapse-1" style="height: 0px;">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="">About Me</li>
<li class="">My Skills</li>
<li class="">Portfoilo</li>
<li class="">Contact Me</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
<div class="section">
</div>
Also when I refresh it, when I am half way down the page, the bar goes back to the top, when really it should stay there
I been using this example and trying to implement it; you can see if you scroll down to half way and refresh the bar stays, but mine does not

I am just trying to get my nav bar to have a fixed position at the top
of the screen, so when the user scrolls down it should stay at the top
markup
<nav class='primary-navigation'>
nav stuff...
</nav>
styles
.primary-navigation {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
jsFiddle: https://jsfiddle.net/sheriffderek/3ahupnrk/
I been using this example and trying to implement it; you can see if
you scroll down to half way and refresh the bar stays, but mine does
not
If you are trying to make your navigation only stick under certain conditions - like this example, here is an extensively commented example: https://jsfiddle.net/sheriffderek/zdtLawL4/ - and here is another slightly different example as well: http://codepen.io/sheriffderek/pen/zLEkr
I hope it helps.

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);
});

navbar top fixed shrink with a carousel without overlap

I want to get this effect: www.kemtecnia.com
This website has a navbar fixed top which shrinks on scroll down, has below a carousel fixed which seems to disappear by the content below.
How can I do in my code to get it?
I have the navbar top:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Desplegar menú</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="logo" href="index.php">
<img src="img/logo.gif" class="img-responsive" alt="DIESIA Networking Academic Program - UHU" />
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<?php
$i = 0;
foreach($menuItems as $menuItem => $url){
if($i == 0 && (basename($_SERVER['PHP_SELF']) == 'index.php') || (basename($_SERVER['PHP_SELF']) == ''))
echo "<li class='active'>\n";
else
echo "<li>\n";
echo $url . $menuItem . "</a>\n";
echo "</li>\n";
$i++;
}
?>
</ul>
</div>
</div>
but seems to overlap my carousel. The navbar shrinks too by js. I want to get that doesn't overlap my carousel and carousel dissapear with the rest of the content when scroll.
CSS of the navbar:
#media(min-width:768px) {
.navbar-fixed-top {
padding: 25px 0;
-webkit-transition: padding .3s;
-moz-transition: padding .3s;
transition: padding .3s;
}
.navbar-fixed-top .navbar-brand {
font-size: 2em;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.navbar-fixed-top.navbar-shrink {
padding: 10px 0;
}
.navbar-fixed-top.navbar-shrink .navbar-brand {
font-size: 1.5em;
}
}
.navbar a:focus {
outline: 0;
}
.navbar .navbar-nav {
letter-spacing: 1px;
}
.navbar .navbar-nav li a:focus {
outline: 0;
}
.navbar-default,
.navbar-inverse {
border: 0;
}
Thanks so much in advance!
Edit:
Codepen here: http://codepen.io/jesfer/pen/oLvQYY

don't know if this helps... but might be what you are looking for or atleast push you in the right direction.
http://codepen.io/MatthewBryce/pen/qZBPpp
HTML
<div class="headerWrap">
<div class="headerWrapContent">
Title
</div>
</div>
<div class="menuWrap">
<div class="menuNavigationFloat">
Home
Link 1
Link 2
Link 3
Link 4
</div>
</div>
<div class="headerMast">
This is a Header
</div>
<div class="contentWrap">
<h1>Page Content Bit</h1>
<p>A really simple sticky menu bar</p>
<p>Lorem ipsum dolor sit amet,</p>
</div>
</div><div class="wrap">
<div class="headerWrap">
<div class="headerWrapContent">
Stupidly simple stick-on-scroll Menu
</div>
</div>
<div class="menuWrap">
<div class="menuNavigationFloat">
Home
Link 1
Link 2
</div>
</div>
<div class="headerMast">
This is a Header
</div>
<div class="contentWrap">
<h1>Page Content Bit</h1>
<p>A really simple sticky menu bar</p>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
CSS
body {
color: #444;
font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
margin: 0px;
background: #222;
}
.headerMast {
background: #AAA;
min-height: 200px;
max-height: 200px;
margin-top: 0px;
text-align: center;
padding-top: 110px;
color: #FFF;
-webkit-transition: 1s; /* Safari */
transition: 1s;
}
.headerMastAnim {
margin-top: -300px;
margin-bottom: 300px;
-webkit-transition: 1s; /* Safari */
transition: 1s;
}
.wrap {
background: #444;
overflow: auto;
}
.headerWrap {
background: #222;
font-size: 30px;
height: 100px;
line-height: 100px;
font-weight: lighter;
color: #CCC;
}
.headerWrapContent {
width: 80%;
margin-left: auto;
margin-right: auto;
}
.menuWrap {
background: RGBA(0,0,0,0.7);
color: #fff;
height: 55px;
line-height: 60px;
letter-spacing: 1px;
width: 100%;
margin-bottom: -55px;
-webkit-transition: 0.4s; /* Safari */
transition: 0.4s;
z-index: 100;
position: absolute;
}
.menuWrap.sticky {
position: fixed;
top: 0px;
height: 30px;
line-height: 30px;
-webkit-transition: 0.4s; /* Safari */
transition: 0.4s;
}
.menuNavigationFloat {
background: RGBA(0,0,0,0.5);
padding: 0px 20px;
width: 80%;
height: inherit;
margin-left: auto;
margin-right: auto;
text-align: center;
overflow: hidden;
}
.menuNavigationFloat a{
list-style: none;
color: #FFF;
font-size: 16px;
width: 170px;
height: auto;
margin-left: 0px;
margin-right: 0px;
padding-bottom: 2px;
display: inline-block;
text-align: center;
text-transform: capitalize;
text-decoration: none;
transition: background 0.4s, width 0.3s;
}
.menuNavigationFloat a:hover{
text-decoration: none;
width: 200px;
transition: background 0.4, width 0.3s;
}
.menuNavigationFloat a:nth-child(1) { background: #CC2222; }
.menuNavigationFloat a:nth-child(1):hover { background: #FF3333; }
.contentWrap {
background: #EEE;
width: 80%;
padding: 20px;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
margin-bottom: 80px;
min-height: 1000px;
}
JS
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
$('.menuWrap').addClass("sticky");
$('.headerMast').addClass("headerMastAnim");
}
else{
$('.menuWrap').removeClass("sticky");
$('.headerMast').removeClass("headerMastAnim");
}
});
http://codepen.io/MatthewBryce/pen/qZBPpp

Categories

Resources