Navbar not staying fixed - javascript

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

Related

How to open en close menu using javascript?

Building my first website and cant open en close the menu using javascript ( first time javascript so be gentle ). This is my code in the following order. HTML/CSS/Java.I know that i have to point to id instead of class in CSS, i thought i did it right but can't get it working`.
So this is my HTML code i use visual studio code.
<!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.0">
<title>Project R-K</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="navbar">
<div class="container">
<a class="logo" herf=#> R&K<span>Productions</span></a>
<img id="mobile-open" class="mobile-menu" src="images/icons8-menu.svg" alt="open navigation">
<nav>
<img id="mobile-close" class="mobile-menu-exit" src="images/icons8-delete.svg" alt="Close navigation">
<ul class="primary-nav">
<li class="current">Home</li>
<li> About us</li>
<li> Sign up</li>
</ul>
<ul class="secundary-nav">
<li> Buy R&K dollars</li>
<li class= "Make-account"> Make account</li>
</ul>
</nav>
</div>
</div>
<section class="hero">
<div class="container">
<div class="left-col">
<p class="subhead">Funny & making you money!</p>
<h1>A gamer website, by gamers for gamers</h1>
<div class="hero-cta">
Try for free
<a href="#" class="video-action">
<img src="images/icons8-binoculars.svg" alt="Watch a gamer">Watch a gamer
</a>
</div>
</section>
<img src="images/PSImage.jpg" class="hero-image" alt="Ps-image">
</div>
<section class="features-section">
<div class="container">
<ul class="feature-list">
<li>Awesome community</li>
<li>Maximale adrenaline</li>
<li>Easy to use</li>
<li>All possible games</li>
<img class="oldskool" src="images/Oldskool.jpg" alt="arcade">
</ul>
</div>
</section>
<section class="explanation-in-short">
<div class="container">
We are Richard and Kick and we are gamers since the early stages of our lifes and very dear friends so we have created something that has been missing in the gamer community.
This is a website where you can subscribe and make money playing your favorite game! Try it and find out just how awesome we are!
</div>
</section>
<section class="contact-section">
<div class="container">
<div class="contact-left">
<h2>Contact</h2>
<form action="">
<label for="name">Name</label>
<input type="text" id="name" name="name">
<label for="message">Message</label>
<textarea name="message" id="message" cols="30" rows="10"></textarea>
<input type="submit" class="send-message-cta" value="send message">
</form>
</div>
</div>
</section>
</div>
</section>
</div>
</script>
</body>
</html>
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;500&display=swap');
:root{
--primary-color: rgb(252, 8, 142);
}
body {
background: rgb(245, 243, 243);
margin: 0;
font-family: 'poppins';
}
.navbar {
background:rgb(245, 243, 243);
padding: 1em;
.logo {
text-decoration: none;
font-weight: bold;
color: var(--primary-color);
font-size: 1.2em;
}
span {
color: black;
}
nav {
display: none;
}
.container {
display: flex;
place-content: space-between;
}
.mobile-menu {
cursor: crosshair;
}
}
a {
color: rgb(83, 83, 83);
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
}
section{
padding: 5em 2em;
}
.hero {
text-align: center;
}
.left-col{
.subhead {
text-transform: uppercase;
font-weight: bold;
color: var(--primary-color);
}
h1 {
font-size: 2.5em;
line-height: 1.5em;
margin-top: .2em;
}
.primairy-action {
background: var(--primary-color);
color: white;
text-decoration: none;
padding: .6em 1.3em;
font-size: 1.4em;
border-radius: 5em;
font-weight: bold;
display: inline-block;
cursor: crosshair;
}
.video-action {
display: block;
margin-top: 1em;
img{
margin-right: .5em;
}
}
}
.hero-image{
width: 50%;
height: 50%;
margin-top: .5em;
margin-left: 7em;
}
.features-section {
background: rgb(83, 83, 83);
color: white;
}
.feature-list {
margin: 0;
padding-left: .1em;
display: grid;
li {
font-size: 1.1em;
margin-bottom: 1em;
margin-left: 2em;
position: relative;
&:before {
content: '';
left: -2em;
position: absolute;
width: 20px;
height: 20px;
background-image: url('../Images/icons8-checked.svg');
background-size: contain;
margin-right: .5em;
}
}
}
.oldskool{
display: none;
}
.explanation-in-short{
background: var(--primary-color);
text-align: center;
color: white;
}
h2{
font-size: 2em;
}
label{
display: block;
font-size: 1.2em;
}
input, textarea{
width: 100%;
padding: .8em;
margin-bottom: 1em;
border: 1px solid gray;
box-sizing: border-box;
}
.send-message-cta {
background-color: var(--primary-color);
color: white;
font-weight: bold;
font-size: 1.3em;
border: none;
margin-bottom: 5em;
border-radius: 5em;
display: inline-block;
padding: .8em 2em;
width: unset;
cursor: crosshair;
}
nav{
position: fixed;
z-index: 999;
width: 50%;
right: 0;
top: 0;
background:rgb(83, 83, 83) ;
height: 100vh;
padding: 1em;
ul.primary-nav{
margin-top: 5em;
}
li {
a {
color: white;
text-decoration: none;
display: block;
padding: .5em;
font-size: 1.3em;
text-align: right;
&:hover {
font-weight: bold;
color: var(--primary-color)
}
}
}
}
.mobile-menu-exit {
float: right;
margin: .5em;
cursor: crosshair;
}
<script>
const mobileBtn = document.getElementById('mobile-open')
nav = document.querySelector('nav')
mobileBtnExit = document.getElementById('mobile-exit');
mobileBtn.addEventListener('click', () =>
{nav.classList.add('mobile-open')
});
</script>

You can do it with CSS :focus-within pseudo class. If you want to do it with JS, first of all you should write the true semantic. In your markup, the menu which you want to open should be written equilavent as your button and you can set this menu's opacity to 0, visibility hidden and display none, then you have to listen for click events coming from your buttons, when the click event fires, you should determine which button was clicked then you can select the menu which you want to open, and make it visible. I still advise to use :focus-within.

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>

Overlay when click on menu (and remove border)

my name is Daniel and im working on my portfolio website. I want an overlay when i click on my hamburger menu so that everything becomes darker and the focus lays on the menu. And i want it to go away when you click on the menu again, or click on one of the menu items or click on the overlay self. (only for my mobile version)
Also i have weird border-line when i open my hamburger menu on mobile and i don't know how to remove it
Link to my website so far: http://20162.hosts.ma-cloud.nl/portfoliowebsite/
(the latest version isn't online yet)
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<meta name="author" content="Daniel Gotz">
<title>Daniel Gotz | Porfolio </title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<link href="css/scrolling-nav.css" rel="stylesheet">
<link href="dist/hamburgers.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Exo+2:600,900|Roboto" rel="stylesheet">
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<!-- Navigation -->
<section id="intro" class="intro-section">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header page-scroll">
<button class="hamburger hamburger--spin navbar-toggle visible-xs" type="button" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class=" hamburger-box">
<span class=" hamburger-inner"></span> </span>
</button>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav right">
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li> <a class="page-scroll" href="#intro">Intro</a> </li>
<li> <a class="page-scroll" href="#mijnwerk">Mijn werk</a> </li>
<li> <a class="page-scroll" href="#overdaniel">Over Daniel</a> </li>
<li> <a class="page-scroll" href="#contact">Contact</a> </li>
</ul>
</div>
</nav>
<div class="overlay" id="overlay"></div>
<div class="title">
<h1> Every mountain top is within reach if you just keep climbing</h1> </div>
<div class="berg">
<img src="berg.svg">
</div>
</section>
<section id="mijnwerk" class="about-section"> </section>
<section id="overdaniel" class="services-section"> </section>
<section id="contact" class="contact-section"> </section>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Scrolling Nav JavaScript -->
<script src="js/jquery.easing.min.js"></script>
<script src="js/scrolling-nav.js"></script>
<script src="js/hamburgers.js"></script>
</body>
</html>
CSS:
.overflow {
overflow-x: hidden;
position: relative;
}
.home {
height: 100vh;
width: 100vw;
background-color: #2ecc71;
}
.mijnwerk {
height: 100vh;
width: 100vw;
background-color: #27ae60;
}
.navbar-default {
background: none;
border-color: transparent;
z-index: 3;
}
.right {
float: right;
text-align: right;
}
.navbar-default .navbar-nav>li>a {
font-family: 'Roboto', sans-serif;
color: #ecf0f1;
font-size: 14px;
}
.nav>li>a {
padding: 15px 25px;
border-style: none;
}
.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li>a:hover {
color: #ecf0f1;
border-style: none;
}
.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover {
background: none
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-style: none;
}
h1 {
font-family: 'Exo 2' , sans-serif;
font-weight: 900;
font-size: 37px;
line-height: 60px;
}
.title {
font-family: 'Exo 2', sans-serif;
text-align: center;
width: 350px;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
}
.berg {
position: absolute;
width: 100%;
bottom: 0;
margin: 0 0 -2px 0;
}
.overlay {
position: fixed;
top: 0;
z-index: 2;
display: none;
overflow: auto;
width: 100%;
height: 100%;
background: #333;
}
body {
width: 100%;
height: 100%;
}
html {
width: 100%;
height: 100%;
}
#media(min-width:767px) {
.navbar {
}
.top-nav-collapse {
padding: 0;
}
}
.intro-section {
height: 100%;
background: #2ecc71;
color: white;
text-align: center;
}
.about-section {
height: 100%;
background: #27ae60;
}
.services-section {
height: 100%;
background: #3498db;
}
.contact-section {
height: 100%;
padding-top: 150px;
text-align: center;
background: #eee;
}
JS:
// Look for .hamburger
var hamburger = document.querySelector(".hamburger");
// On click
hamburger.addEventListener("click", function() {
// Toggle class "is-active"
hamburger.classList.toggle("is-active");
// Do something else, like open/close menu
});
I hope someone can help me out with these problems! :)

With this config you just pass background to the menu, and the close button will not be included and remove the border.
.navbar-collapse navbar-ex1-collapse collapse in {
background: rgba(27, 27, 62, 0.5);
}
.navbar-default {
background: none;
border: none;
z-index: 3;
}

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.

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>

Categories

Resources