We Keep Coding

Fixed page header overlapsing anchors on page

When I click on any of my anchor links my header is overlapsing the actual content of the section. Is it possible to have it move the top of the section?
I've been looking for some solutions already but they're not working out for me.
I tried to add an anchor class to the sections and I also tried scroll-margin-top but it didn't quite work out.
//header Effekt beim scrollen
$(function() {
var shrinkHeader = 100;
$(window).scroll(function() {
var scroll = getCurrentScroll();
if (scroll >= shrinkHeader) {
$('#navbar').addClass('shrink');
} else {
$('#navbar').removeClass('shrink');
}
});
function getCurrentScroll() {
return window.pageYOffset || document.documentElement.scrollTop;
}
});
// JavaScript Document
$(document).ready(function(){
var navTop = $('#navbar').offset().top;
var navHeight = $('#navbar').height();
var windowH = $(window).height();
$('.section').height(windowH);
$(document).scroll(function(){
var st = $(this).scrollTop();
//for the nav bar:
if(st > navTop ){
$('#navbar').addClass('fix');
$('.section:eq(0)').css({'margin-top':navHeight});//fix scrolling issue due to the fix nav bar
}else{
$('#navbar').removeClass('fix');
$('.section:eq(0)').css({'margin-top':'0'});
}
$('.section').each(function(index, element) {
if(st + navHeight > $(this).offset().top && st + navHeight <= $(this).offset().top + $(this).height() ){
$(this).addClass('active');
var id = $(this).attr('id');
$('a[href="#'+id+'"]').parent('li').addClass('active');
// or $('#nav li:eq('+index+')').addClass('active');
}else{
$(this).removeClass('active');
var id = $(this).attr('id');
$('a[href="#'+id+'"]').parent('li').removeClass('active');
//or $('#nav li:eq('+index+')').removeClass('active');
}
});
});
});
//
#charset "utf-8";
/* CSS Document */
* {
font-family: 'Roboto', sans-serif;
}
#container {
background-color: white;
width: 1280px;
height: 4000px;
margin-left: auto;
margin-right: auto;
}
body {
background-color: grey;
margin: 0px;
}
/* Navigation */
ul {
color: black;
list-style: none;
float: right;
margin-right: 20px;
padding-top: 32px;
}
ul li {
display: inline-table;
margin-left: 5px;
padding: 5px;
border-bottom: 1.5px solid;
border-bottom-color: white;
}
ul li a {
color: black;
text-decoration: none;
padding: 10px;
}
/* Smart Navbar / weiß, wo man auf der Seite ist von https://stackoverflow.com/questions/19697696/change-underline-of-active-nav-by-section */
#navbar.fix {
position: fixed;
top: 0;
}
#navbar li.active {
border-bottom: 1.5px solid;
border-bottom-color: #f6bd60;
}
/* Smart Navbar Ende */
/* fixed Navigation von https://codepen.io/malZiiirA/pen/cbfED?css-preprocessor=none */
#navbar {
border-bottom-style: solid;
border-bottom-width: 1.25px;
box-shadow: 0px 2.5px 5px rgba(0, 0, 0, 0.2);
background-color: white;
height: 128px;
transition: 0.32s;
position: fixed;
width: 1280px;
}
#navbar.shrink {
height: 80px;
line-height: 18px;
}
#navbar li {
font-size: 1.2rem;
font-weight: normal;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
#navbar.shrink li {
font-size: 1.2rem;
margin-top: -30px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
/* fixed nav Ende */
/*
#spacer {
height: 128px;
border-bottom: 4px solid;
}
*/
#Home {
margin-top: 0 !important;
border: solid;
height: 1000px;
}
#UberUns {
height: 1000px;
border-style: solid;
}
#Aktionen {
height: 1000px;
border-style: solid;
}
#Terminvereinbarung {
height: 1000px;
border-style: solid;
}
#Infos {
height: 1000px;
border-style: solid;
}
/* Hover Effekt bei Navigation von https://github.com/IanLunn/Hover/blob/master/css/hover.css */
.hvr-sweep-to-top {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.hvr-sweep-to-top:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #f6bd60;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-sweep-to-top:hover,
.hvr-sweep-to-top:focus,
.hvr-sweep-to-top:active {
color: white;
}
.hvr-sweep-to-top:hover:before,
.hvr-sweep-to-top:focus:before,
.hvr-sweep-to-top:active:before {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
/* Hover Effekt Ende */
/* Loader */
.loader {
display: inline-block;
width: 30px;
height: 30px;
position: relative;
border: 4px solid #Fff;
animation: loader 2s infinite ease;
}
.loader-inner {
vertical-align: top;
display: inline-block;
width: 100%;
background-color: #fff;
animation: loader-inner 2s infinite ease-in;
}
#keyframes loader {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(180deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(360deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes loader-inner {
0% {
height: 0%;
}
25% {
height: 0%;
}
50% {
height: 100%;
}
75% {
height: 100%;
}
100% {
height: 0%;
}
}
.loader-wrapper {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #242f3f;
display: flex;
align-items: center;
justify-content: center;
}
/* loader Ende */
<!DOCTYPE html>
<html>
<head>
<title>OptikTack</title>
<link href="style.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</head>
<body>
<div id="container">
<div class="body">
<nav id="navbar">
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="javascript/navbar fixed.js"></script>
<ul>
<li class="hvr-sweep-to-top active">Home</li>
<li class="hvr-sweep-to-top">Wir über uns</li>
<li class="hvr-sweep-to-top">Aktionen</li>
<li class="hvr-sweep-to-top">Terminvereinbarung</li>
<li class="hvr-sweep-to-top">Infos</li>
</ul>
</nav>
<a id="top"></a>
<div id="spacer"></div>
<!-- home section -->
<section id="Home" class="section">
<div>
</div>
</section>
<!-- UberUns section -->
<section id="UberUns" class="section">
<div>
<p>section 2</p>
</div>
</section>
<!-- Aktionen section -->
<section id="Aktionen" class="section">
<div>
<p>section 3</p>
</div>
</section>
<!-- Terminvereinbarung section -->
<section id="Terminvereinbarung" class="section">
<div>
<p>section 4</p>
</div>
</section>
<!-- Infos section -->
<section id="Infos" class="section">
<div>
<p>section 5</p>
</div>
</section>
</div>
</div>
<div class="loader-wrapper">
<span class="loader"><span class="loader-inner"></span></span>
</div>
<script>
$(window).on("load", function() {
$(".loader-wrapper").fadeOut("slow");
});
</script>
<script>
$('a').click(function() {
$('html, body').animate({
scrollTop: $($(this).attr('href')).offset().top
}, 500);
return false;
});
</script>
</body>
</html>

Try this please in your css code:
I just added top:0 to your navbar code and added margin-top to the next element in html, which is the section. I don't think the spacer div is necessary.
#navbar {
border-bottom-style: solid;
border-bottom-width: 1.25px;
box-shadow: 0px 2.5px 5px rgba(0, 0, 0, 0.2);
background-color: white;
height: 128px;
transition: 0.32s;
position: fixed;
top:0;
width: 1280px;
}
body {
margin-top: 128px;
}

How do I fix a menu from disappearing when I toggle it?

It used to work and now I have no idea what I did wrong. When I toggle the mobile menu, the navigation items don't show up but when I inspect it the browser shows they're there but aren't visible.
Can someone help me figure out this menu problem? This has stumped me
I tried making the menu links appear at the top with a high z index, different combinations of selecting the a tags in the list items, still nothing.
var $hamburger = $(".hamburger");
$hamburger.on("click", function(e) {
$hamburger.toggleClass("is-active");
// Do something else, like open/close menu
});
/* Code for the toggling of the navbar */
let toggleNavStatus = false;
let toggleNav = function () {
let getMenu = document.getElementById("main-navigation");
let getSidebar = document.getElementById("bottom-nav-bar");
let getSidebarUL = document.querySelector(".side-nav ul");
let getSidebarLinks = document.querySelectorAll(".side-nav a");
if (toggleNavStatus === false) {
getSidebar.style.visibility = "visible";
getSidebar.style.opacity = "1";
getMenu.style.top = "20px";
getMenu.style.visibility = "visible";
getSidebarLinks.forEach((item, index)=>{
console.log(item);
item.style.display = "block";
item.style.opacity = "1";
})
getSidebar.style.height = "290px";
toggleNavStatus = true;
}
else if (toggleNavStatus === true) {
getSidebar.style.visibility = "hidden";
getSidebar.style.opacity = "1";
getSidebarLinks.forEach((item, index)=>{
item.style.opacity = "0";
item.style.visibility = "hidden";
item.style.display = "none";
})
getSidebar.style.height = "0";
toggleNavStatus = false;
}
}
/*
Core Styles
*/
body, html {
margin: 0;
padding: 0;
}
.container {
padding: 0 5%;
}
a, p, h1, h2, h3, h4, h5, h6, li {
font-family: 'Roboto', sans-serif;
}
p {
font-size: 1.125em;
font-family: 'Poppins', sans-serif;
}
h1 {
font-size: 2.5em;
}
h1+h2 {
font-size: 1.25em;
font-weight: normal;
}
h2 {
font-size: 1em;
}
/* Buttons */
.solid {
background: #000;
color: #fff;
font-size: var(--button-reg);
border: none;
width: 150px;
height: auto;
padding: 10px 25px;
margin-bottom: 15px;
}
.primary {
background: var(--primary);
color: #fff;
font-size: var(--button-reg);
border: none;
width: 150px;
height: auto;
padding: 10px 25px;
}
:root {
--primary: #fdd008;
--button-reg: 1em;
--button-sm: .75em;
--heading: #1a1a1a;
--p: #4c4c4c;
}
/*
Navigation
*/
#top-navbar {
display: none;
}
.sub-nav {
visibility: hidden;
height: 0;
position: relative;
z-index: 2000;
background: #fff;
display: none;
}
.quote {
display: none;
}
/* Side Nav */
#main-navigation {
margin: 0;
padding-right: 20px;
position: relative;
top: -2020px;
z-index: 2;
visibility: hidden;
}
#bottom-nav-bar {
height: 0;
width: 100%;
position: absolute;
top: 0;
right: 0;
z-index: 200;
background: #232b2b;
transition: .3s ease-in-out;
visibility: hidden;
opacity: 0;
}
nav ul li {
position: relative;
list-style: none;
text-align: right;
padding: 0px;
top: 50px;
z-index: 1200;
margin: 15px 0;
width: auto;
font-weight: bold;
font-size: 10px;
}
.side-nav a {
text-decoration: none;
padding: 0;
margin-bottom: 5px;
color: #fff;
font-size: 13px;
opacity: 0;
visibility: hidden;
display: none;
position: relative;
z-index: 200;
}
nav img {
position: absolute;
top: 15px;
left: 0;
z-index: 10;
}
/* Hamburger Menu */
#menu-button {
position: absolute;
right: 10px;
display: flex;
align-items: center;
top: 7px;
width: 60px;
}
.hamburger {
padding: 15px 15px;
display: inline-block;
cursor: pointer;
transition-property: opacity, filter;
transition-duration: 0.15s;
transition-timing-function: linear;
font: inherit;
color: inherit;
text-transform: none;
background-color: transparent;
border: 0;
margin: 0;
overflow: visible;
position: relative;
z-index: 2000;
}
.hamburger:hover {
opacity: 0.7;
cursor: pointer;
}
.hamburger.is-active:hover {
opacity: 0.7;
cursor: pointer;
}
.hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::before, .hamburger.is-active .hamburger-inner::after {
background-color: #fff;
}
.hamburger-box {
width: 40px;
height: 24px;
display: inline-block;
position: relative;
z-index: 2000;
}
.hamburger-inner {
display: block;
top: 50%;
margin-top: -2px;
}
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
width: 30px;
height: 3px;
background-color: #fff;
border-radius: 4px;
position: absolute;
transition-property: transform;
transition-duration: 0.15s;
transition-timing-function: ease;
}
.hamburger-inner::before, .hamburger-inner::after {
content: "";
display: block;
}
.hamburger-inner::before {
top: -10px;
}
.hamburger-inner::after {
bottom: -10px;
}
/* * Spring */
.hamburger--spring .hamburger-inner {
top: 2px;
transition: background-color 0s 0.13s linear;
transition-delay: .22s;
}
.hamburger--spring .hamburger-inner::before {
top: 10px;
transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition-delay: .22s;
}
.hamburger--spring .hamburger-inner::after {
top: 20px;
transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition-delay: .22s;
}
.hamburger--spring.is-active .hamburger-inner {
transition-delay: 0.22s;
background-color: transparent !important;
}
.hamburger--spring.is-active .hamburger-inner::before {
top: 0;
transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
transform: translate3d(0, 10px, 0) rotate(45deg);
}
.hamburger--spring.is-active .hamburger-inner::after {
top: 0;
transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
transform: translate3d(0, 10px, 0) rotate(-45deg);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Stylesheet -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/hamburgers.css">
<link rel="stylesheet" href="https://unpkg.com/aos#next/dist/aos.css" />
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Poppins|Roboto&display=swap" rel="stylesheet">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Valley Construction Supply | Marysville, WA</title>
</head>
<header>
<button id="menu-button" class="hamburger hamburger--spring" onclick="toggleNav()" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
<!-- Top Navigation Bar -->
<div id="top-navbar">
<div class="container">
<img src="" alt="valley_construction_supply_logo">
<div class="location">
<div class="icon">
<!-- icon -->
</div>
<div class="location-info">
<p>Marysville, WA</p>
<p>(800) 559-8566</p>
</div>
</div>
<div class="location">
<div class="icon">
<!-- icon -->
</div>
<div class="location-info">
<p>Tacoma, WA</p>
<p>(800) 922-2082</p>
</div>
</div>
<div class="location">
<div class="icon">
<!-- icon -->
</div>
<div class="location-info">
<p>Hours</p>
<p>Mon-Fri: 9am - 5pm</p>
</div>
</div>
</div>
</div>
<nav>
<!-- Desktop Navigation -->
<img src="images/vcs.png" alt="" height="60px">
<div id="bottom-nav-bar" class="side-nav" class="container">
<ul id="main-navigation" class="side-nav">
<li>HOME</li>
<li>ABOUT</li>
<ul class="sub-nav">
<li>JOBS</li>
<li>ABOUT VCS</li>
</ul>
<li>SERVICES</li>
<ul class="sub-nav">
<li>REBAR FABRICATION</li>
<li>HOMECONCRETE</li>
<li>BUILDING MATERIALS</li>
<li>EQUIPMENT AND TOOLS</li>
</ul>
<li>PRODUCTS</li>
<li>PROMOTIONS</li>
<li>CONTACT</li>
<ul class="sub-nav">
<li>APPLY FOR CREDIT</li>
</ul>
</ul>
<button class="quote" type="button">
REQUEST A QUOTE
</button>
</div>
</nav>
</header>
<body>
</body>
</html>
when you click the hamburger menu the navigation list is supposed to appear from the top with the slide down menu. But no links show up.

The problem is in your toggleNav() function. If you look at this part of the code:
if (toggleNavStatus === false) {
getSidebarLinks.forEach((item, index)=>{
console.log(item);
// here, you are setting display back to block, BUT visibility stays hidden!
item.style.display = "block";
item.style.opacity = "1";
})
}
else if (toggleNavStatus === true) {
getSidebarLinks.forEach((item, index)=>{
item.style.opacity = "0";
// here, you are setting display to none AND visibility to hidden
item.style.visibility = "hidden";
item.style.display = "none";
})
}
Side note for you: In order to hide an element from the page, you don't need to set both visibility:hidden and display:none. Either one will do the job, although they differ in details. If you are interested, you can learn more about these differences in the following question: What is the difference between visibility:hidden and display:none?

How make Javascript code work for each element individually, to create multiple duplicates in HTML with same Javascript code

I have created a simple image carousel that I am using on my site.
It all works well until I only have one but as soon as I try to create a new one it doesn't work properly.
All I need is that all the image sliders I create are independent of each other.
Both of the sliders should work individually.
Any help would be very great.
Here is my code:
//current position
var pos = 0;
//number of slides
var totalSlides = $('.slider-wrap ul li').length;
//get the slide width
var sliderWidth = $('.slider-wrap').width();
$(document).ready(function(){
/*****************
BUILD THE SLIDER
*****************/
//set width to be 'x' times the number of slides
$('.slider-wrap ul.slider').width(sliderWidth*totalSlides);
//next slide
$('.next').click(function(){
slideRight();
});
//previous slide
$('.previous').click(function(){
slideLeft();
});
/*************************
//*> OPTIONAL SETTINGS
************************/
//automatic slider
var autoSlider = setInterval(slideRight, 3000);
//for each slide
$.each($('.slider-wrap ul li'), function() {
//set its color
var c = $(this).attr("data-color");
$(this).css("background",c);
//create a pagination
var li = document.createElement('li');
$('.pagination-wrap ul').append(li);
});
//counter
countSlides();
//pagination
pagination();
//hide/show controls/btns when hover
//pause automatic slide when hover
$('.slider-wrap').hover(
function(){ $(this).addClass('active'); clearInterval(autoSlider); },
function(){ $(this).removeClass('active'); autoSlider = setInterval(slideRight, 3000); }
);
});//DOCUMENT READY
/***********
SLIDE LEFT
************/
function slideLeft(){
pos--;
if(pos==-1){ pos = totalSlides-1; }
$('.slider-wrap ul.slider').css('left', -(sliderWidth*pos));
//*> optional
countSlides();
pagination();
}
/************
SLIDE RIGHT
*************/
function slideRight(){
pos++;
if(pos==totalSlides){ pos = 0; }
$('.slider-wrap ul.slider').css('left', -(sliderWidth*pos));
//*> optional
countSlides();
pagination();
}
/************************
//*> OPTIONAL SETTINGS
************************/
function countSlides(){
$('.counter').html(pos+1 + ' / ' + totalSlides);
}
function pagination(){
$('.pagination-wrap ul li').removeClass('active');
$('.pagination-wrap ul li:eq('+pos+')').addClass('active');
}
/*GLOBALS*/
* {
margin: 0;
padding: 0;
list-style: none;
}
a {
text-decoration: none;
color: #666;
}
a:hover {
color: #1bc1a3;
}
body,
hmtl {
background: #ecf0f1;
font-family: 'Anton', sans-serif;
}
.wrapper {
width: 600px;
margin: 50px auto;
height: 400px;
position: relative;
color: #fff;
text-shadow: rgba(0, 0, 0, 0.1) 2px 2px 0px;
}
.slider-wrap {
width: 600px;
height: 400px;
position: relative;
overflow: hidden;
}
.slider-wrap ul.slider {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.slider-wrap ul.slider li {
float: left;
position: relative;
width: 600px;
height: 400px;
}
.slider-wrap ul.slider li > div {
position: absolute;
top: 20px;
left: 35px;
}
.slider-wrap ul.slider li > div h3 {
font-size: 36px;
text-transform: uppercase;
}
.slider-wrap ul.slider li > div span {
font-family: Neucha, Arial, sans serif;
font-size: 21px;
}
.slider-wrap ul.slider li i {
text-align: center;
line-height: 400px;
display: block;
width: 100%;
font-size: 90px;
}
.object-fit_contain {
object-fit: contain;
height: auto;
max-width: 600px;
}
/*btns*/
.btns {
position: absolute;
width: 50px;
height: 60px;
top: 50%;
margin-top: -25px;
line-height: 57px;
text-align: center;
cursor: pointer;
z-index: 100;
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-ms-user-select: none;
-webkit-transition: all 0.1s ease;
-moz-transition: all 0.1s ease;
-o-transition: all 0.1s ease;
-ms-transition: all 0.1s ease;
transition: all 0.1s ease;
}
.next {
right: -1px;
margin-right: 200px;
}
.previous {
left: -1px;
margin-left: 200px;
}
.counter {}
.slider-wrap.active .next {
right: 0px;
}
.slider-wrap.active .previous {
left: 0px;
}
/*bar*/
.pagination-wrap {
min-width: 20px;
margin-top: 350px;
margin-left: auto;
margin-right: auto;
height: 15px;
position: relative;
text-align: center;
}
.pagination-wrap ul {
width: 100%;
}
.pagination-wrap ul li {
margin: 0 4px;
display: inline-block;
width: 5px;
height: 5px;
border-radius: 50%;
background: #3ab8cb;
opacity: 0.5;
position: relative;
top: 0;
}
.pagination-wrap ul li.active {
width: 12px;
height: 12px;
top: 3px;
opacity: 1;
box-shadow: rgba(0, 0, 0, 0.1) 1px 1px 0px;
}
/*Header*/
h1,
h2 {
text-shadow: none;
text-align: center;
}
h1 {
color: #666;
text-transform: uppercase;
font-size: 36px;
}
h2 {
color: #7f8c8d;
font-family: Neucha, Arial, sans serif;
font-size: 18px;
margin-bottom: 30px;
}
/*ANIMATION*/
.slider-wrap ul,
.pagination-wrap ul li {
-webkit-transition: all 0.3s cubic-bezier(1, .01, .32, 1);
-moz-transition: all 0.3s cubic-bezier(1, .01, .32, 1);
-o-transition: all 0.3s cubic-bezier(1, .01, .32, 1);
-ms-transition: all 0.3s cubic-bezier(1, .01, .32, 1);
transition: all 0.3s cubic-bezier(1, .01, .32, 1);
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- ########################### Slider 1 ##########################-->
<div class="slider-wrap">
<ul class="slider">
<li>
<img class="object-fit_contain" src="http://www.spiritanimal.info/wp-content/uploads/Lion-Spirit-Animal-1.jpg">
</li>
<li>
<img class="object-fit_contain" src="https://cdn.images.express.co.uk/img/dynamic/galleries/x701/156708.jpg">
</li>
</ul>
<!--controls-->
<div class="pagination-wrap">
<div class="btns next"><i class="fas fa-greater-than"></i></div>
<div class="counter"></div>
<div class="btns previous"><i class="fas fa-less-than"></i></div>
</div>
<!--controls-->
</div>
<!-- ########################### Slider 2 ##########################-->
<div class="slider-wrap">
<ul class="slider">
<li>
<img class="object-fit_contain" src="http://www.spiritanimal.info/wp-content/uploads/Lion-Spirit-Animal-1.jpg">
</li>
<li>
<img class="object-fit_contain" src="https://cdn.images.express.co.uk/img/dynamic/galleries/x701/156708.jpg">
</li>
</ul>
<!--controls-->
<div class="pagination-wrap">
<div class="btns next"><i class="fas fa-greater-than"></i></div>
<div class="counter"></div>
<div class="btns previous"><i class="fas fa-less-than"></i></div>
</div>
<!--controls-->
</div>

You have multiple elements with the same ID. You will need to update your code to work off of class and "closest" related items if you need multiples of these on a single page.
For example, where you click "previous", you might need to change to something like:
//previous slide
$('.previous').click(function(event){
slideLeft(event.target); // to pass the clicked 'previous' button to slideLeft()
});
Then in your slideLeft() function, find the slider by whichever one is ancestrally closest to the clicked button:
function slideLeft(target){
pos--;
if(pos==-1){ pos = totalSlides-1; }
$(target).closest('.slider').css('left', -(sliderWidth*pos)); // only line I changed in your example
//*> optional
countSlides();
pagination();
}
I did not run this fully but the concept of "know which one is clicked, then find what to update from there" is what you're going for I believe.

Carousel only displaying 1 div bootstrap 3 javascript

I have created a carousel using bootstrap 3 and javascript. The carousel works perfectly, the only problem is that I have the intention of displaying a triptych display (3 divs at once) but only one of my divs displays. The buttons work backwards and forwards fine.. Why is only one div displaying and how do i change my code so the carousel works similar to this example?: https://codepen.io/mephysto/pen/ZYVKRY
$( document ).ready(function() {
$('.carosuelProperties').each(function() {
var current = $(this);
var image = current.find('img');
current.css('background-image', 'url(' + image.attr('src') + ')');
});
$('.item:nth-child(1), .item:nth-child(2), .item:nth-child(3)').addClass('active');
});
$slides.on('mouseenter', _.debounce(function() {
}, 350));
$('#myCarousel').carousel({
interval: 4000
});
$('.carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i=0;i<2;i++) {
next=next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
.caroImgClass {
display: none;
}
.arrowOf {
color: #008692!important;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
margin-top: -25px;
}
.arrowOf:hover {
color: #000000!important;
cursor: pointer;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.itemProperties {
min-height: 300px;
min-width: 300px;
max-height: 300px;
max-width: 300px;
width: 20vw;
border-radius: 20vw;
background-color: #008692;
}
.carosuelProperties {
min-height: 300px;
min-width: 300px;
max-height: 300px;
max-width: 300px;
width: 20vw;
border-radius: 20vw;
top: 0px;
left: 0px;
position: absolute;
transition: .5s ease-in-out;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.carosuelProperties:hover {
opacity: 0;
transition: .5s ease-in-out;
}
#media only screen and (min-width: 1900px) {
.propertyTitleCaro {
padding: 1vw;
padding-bottom: 0;
font-size: 1.5rem;
font-weight: 1000;
margin-top: 1.5vw;
}}
#media only screen and (max-width: 1900px) {
.propertyTitleCaro {
font-size: 1.5rem;
font-weight: 1000;
margin-top: 3vw;
padding: 10%;
padding-bottom: 0%;
}}
.propertyDesCaro {
padding: 1.5vw;
padding-top: 0px;
}
$carousel-visible-count: 3;
#mixin clearfix() {
&:before,
&:after {
content: ".";
display: block;
height: 0;
overflow: hidden;
}
&:after { clear: both; }
}
* {
box-sizing: border-box;
}
.carousel__control {
position: absolute;
top: 25%;
bottom: 25%;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
cursor: pointer;
outline: 0;
background: none;
}
.carousel-control {
background: none!important;
padding-top: 13%;
}
.carousel-control.left {
margin-left: -155px;
}
.multi-item-carousel{
.carousel-inner{
> .item{
transition: 500ms ease-in-out left;
}
.active{
&.left{
left:-33%;
}
&.right{
left:33%;
}
}
.next{
left: 33%;
}
.prev{
left: -33%;
}
#media all and (transform-3d), (-webkit-transform-3d) {
> .item{
// use your favourite prefixer here
transition: 100000ms ease-in-out left;
transition: 100000ms ease-in-out all;
backface-visibility: visible;
transform: none!important;
}
}
}
.carouse-control{
&.left, &.right{
background-image: none;
}
}
}
<div class="carousel slide" id="myCarousel" data-ride="carousel" data-interval="2000" data-pause="hover">
<div class="carousel-inner">
#if (isset($participatingProperties) && !empty($participatingProperties) && is_array($participatingProperties))
#foreach ($participatingProperties as $property)
<a href="/view/property/{{ $property->property_slug or $property->id }}">
<div class="carousel__box itemProperties col-md-4 col-sm-12 item">
<h2 class="propertyTitleCaro centered white sub-header">
<?php echo mb_strimwidth(strip_tags($property->property_name), 0, 45, '...'); ?>
</h2>
<p class="centered white smallerText propertyDesCaro"><?php echo mb_strimwidth(strip_tags($property->property_short_descript), 0, 140, '...<br><br>SEE MORE'); ?></p>
<div class="carosuelProperties" id="{{ $property->id }}">
<img class="caroImgClass" src="{{$property->property_main_image->images_main}}" alt="{{ $property->property_name or 'No name' }}" title="{{ $property->property_name or 'No name' }}">
</div>
</a>
</div>
#endforeach
#endif
</div>
<a class="left carousel-control arrowOf" href="#myCarousel" data-slide="prev">
<i class="fa fa-chevron-left fa-3x"></i></a>
<a class="right carousel-control arrowOf" href="#myCarousel" data-slide="next">
<i class="fa fa-chevron-right fa-3x"></i></a>
</div>

shuffle.js: position of grids move after shuffle

I have a 3*3 grid layout. It should look something like this:
Then I added shuffle.js to shuffle the grids and filter them. However, the grid layout turns into this.
Why did this happen and how to fix it?? Thank you
My HTML code:
<body>
<div id="wrapper">
<div id="menunav">
<header id="logo">Siyan Zhao</header>
<nav id="nav">
<ul>
<li>Portfolio</li>
<li>About Me</li>
<li>Skills</li>
<li>Resume</li>
</ul>
</nav>
<ul id="filter">
<li><a class="active" href="#" data-group="all">All</a></li>
<li>UI/UX</li>
<li>Design</li>
<li>Research</li>
<li>Illustration</li>
</ul>
</div>
<!--Main content in the format of grids-->
<div id="content">
<div class="grid3">
<article class="bucket">
<a href="firefly-ticket.html">
<img src="images/Firefly/firefly_icon.png" alt=""/>
<div class="img-overlay">
<h5>Firefly: A Smart Ticket</h5>
</div>
</a>
</article>
<article class="bucket">
<a href="Chance.html">
<img src="images/Chance/Chance Icon_2.png" alt=""/>
<div class="img-overlay"
data-group='["all", "design", "research", "ui"]'>
<h5>Chance</h5>
</div>
</a>
</article>
<article class="bucket" >
<a href="monogram.html">
<img src="images/monogram.jpg" alt=""/>
<div class = "img-overlay"
data-group='["all", "design", "illustration"]'>
<h5>Monogram</h5>
</div>
</a>
</article>
<article class="bucket">
<a href="gestalt-composition.html">
<img src="images/gestalt-cover.png" alt=""/>
<div class="img-overlay"
data-group='["all", "design", "illustration"]'>
<h5>Gestalt Composition</h5>
</div>
</a>
</article>
<article class="bucket">
<a href="redthread.html">
<img src="images/redThread.jpg" alt=""/>
<div class="img-overlay"
data-group='["all", "design", "illustration"]'>
<h5>The Red Thread</h5>
</div>
</a>
</article>
<article class="bucket">
<a href="typographic-hierarchy.html">
<img src="images/poster copy.png" alt=""/>
<div class="img-overlay"
data-group='["all", "design", "illustration"]'>
<h5>Typographic Hierarchy</h5>
</div>
</a>
</article>
</div>
</div>
<div id="footer">©Siyan Zhao 2014</div>
</div>
</body>
My CSS code:
/* -------------------------------------*/
#wrapper {
background-color: #FFFfff;
width: 70%;
padding-bottom: 0px;
margin: 0 auto;
position: relative;
min-height: 100%;
overflow-x: hidden;
}
/* Left hand side menu style */
/* -------------------------------------*/
#menunav {
z-index: 20;
background-color: #ffffff;
position: fixed;
width: 210px;
padding-top: 80px;
display: block;
margin: 0px;
border-right-style: none;
border-color: rgba(0,0,0,1.00);
border-right-width: thin;
font-family: 'Droid Sans', sans-serif;;
font-weight: normal;
}
#logo {
text-align: left;
margin-bottom: 48px;
padding-top: 18px;
font-family: "Century Gothic";
font-weight: bold;
font-size:2.3em;
}
#menunav ul {
list-style-type: none;
padding: 0px 0px 0px 0px;
}
#menunav #nav a{
text-align: left;
font-size: 1em;
padding-top: 18px;
border-color: rgba(0,0,0,1.00);
border-bottom-style: solid;
border-width: thin;
-webkit-transition: padding-left 0.3s ease-in-out;
-moz-transition: padding-left 0.3s ease-in-out;
-o-transition: padding-left 0.3s3 ease-in-out;
-ms-transition: padding-left 0.3s3 ease-in-out;
transition: padding-left 0.3s ease-in-out;
}
#menunav #nav a:hover {
padding-left: 50px;
}
#menunav #nav a:active, #mainnav a:focus, #menunav #nav a.thispage{
text-decoration: none;
font-weight: bold;
/*ovrwrite hover effect for active page */
padding-left: 0;
}
/* Formatting for main page grid area*/
/* -------------------------------------*/
.bucket {
float: left;
margin: 0% 0%;
position: relative;
-webkit-transition: .5s all;
-moz-transition: .5s all;
-o-transition: .5s all;
-ms-transition: .5s all;
transition: .5s all;
width: 33.3%;
}
.grid3 .bucket:nth-of-type(3n+1) {
clear: left;
}
.bucket img {
height: auto;
width: 100%;
/*Align image to the baseline to delete white spacing*/
vertical-align: bottom;
}
/*hover over overlay effect*/
/* -------------------------------------*/
.img-overlay {
background-color: rgba(0,0,0,0.7);
bottom: 0;
left: 0;
top: 0;
opacity: 0;
overflow: hidden;
position: absolute;
width: 100%;
z-index: 1000;
transition: opacity 0.25s;
-webkit-transition: opacity 0.25s;
}
.img-overlay h5{
opacity: 1;
display: inline-block;
margin: auto;
font-weight: normal;
font-size: 1.3vw;
line-height: 1vw;
position: absolute;
top: 30%;
right: 10px;
left: 10px;
color: rgba(255,255,255,1.00);
text-align: center;
}
.img-overlay p{
opacity: 1;
display: inline-block;
margin: auto;
position: absolute;
top: 47%;
right: 10px;
left: 10px;
color: rgba(255,255,255,1.00);
text-align: center;
font-family: 'Droid Serif', serif;
font-size: 1.2vw;
line-height: 1vw;
/*vertical-align: middle;*/
}
.bucket:hover .img-overlay {
opacity: 1;
}
My Javascript
$(document).ready(function() {
/* Shuffling buckets */
var $grid3 = $('.grid3');
$grid3.shuffle({
itemSelector: '.bucket'
});
$('#filter a').click(function (e) {
e.preventDefault();
// set active class
$('#filter a').removeClass('active');
$(this).addClass('active');
// get group name from clicked item
var groupName = $(this).attr('data-group');
// reshuffle grid
$grid3.shuffle('shuffle', groupName );
});

You should make sure that the container parent div are set:
#content {
position:relative;
}
or
#content . grid3 {
position:relative;
}