jquery search bar expand on overlay menu - javascript

I want to create a menu like http://www.barangaroo.com/
I have opened the overlay section when click on the humburger menu icon.It worked as i expected.
But for the search option, It doesn't close when closing the overlay.
Here is the code from jsfiddle
https://jsfiddle.net/g7pe9uw6/11/
jQuery(function($) {
'use strict';
$('#toggle').click(function () {
$(this).toggleClass('active');
$('#overlay').toggleClass('open');
});
$('.icon').on('click',function(e){
e.preventDefault();
$('#toggle').addClass('active');
$('#overlay').addClass('open');
$('.search').addClass('expanded');
});
$('.button__container__icon.active').click(function () {
$('.search').removeClass('expanded');
});
}); // JQuery end
header {
height: 400px;
background: rgba(0,0,0,.5);
}
header .header__menu__list li {
display: inline-block;
}
header .header__menu__list li .header__menu__list__search {
display: block;
padding: 0 25px;
}
header .header__menu__list li .header__menu__list__search i {
font-size: 40px;
}
header .header__menu__list .brand img {
margin-top: -30px;
}
.button__container {
position: fixed;
top: 70px;
left: 70px;
float: left;
width: 100%;
height: 27px;
cursor: pointer;
z-index: 100;
transition: opacity .25s ease;
}
.button__container:hover {
opacity: 1;
}
.button__container__icon {
width: 35px;
height: 27px;
float: left;
position: relative;
}
.button__container__icon.active .top {
transform: translateY(11px) translateX(0) rotate(45deg);
background: #fff;
}
.button__container__icon.active .middle {
opacity: 0;
background: #fff;
}
.button__container__icon.active .bottom {
transform: translateY(-11px) translateX(0) rotate(-45deg);
background: #fff;
}
.button__container span {
background: #fff;
border: none;
height: 2px;
width: 100%;
position: absolute;
top: 0;
left: 0;
transition: all .35s ease;
cursor: pointer;
}
.button__container span:nth-of-type(2) {
top: 10px;
}
.button__container span:nth-of-type(3) {
top: 20px;
}
.overlay {
position: fixed;
background: #000;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
opacity: 0;
visibility: hidden;
transition: opacity .35s,visibility .35s;
overflow: hidden;
}
.overlay.open {
opacity: 1;
visibility: visible;
overflow: auto;
}
.overlay.open li {
animation: fadeInRight .5s ease forwards;
animation-delay: .35s;
}
.overlay.open li:nth-of-type(2) {
animation-delay: .4s;
}
.overlay.open li:nth-of-type(3) {
animation-delay: .45s;
}
.overlay.open li:nth-of-type(4) {
animation-delay: .50s;
}
.overlay .overlay-menu {
position: relative;
height: 70%;
top: 50%;
transform: translateY(-50%);
font-size: 50px;
font-weight: 400;
text-align: center;
}
.overlay ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
position: relative;
height: 100%;
}
.overlay ul li {
display: block;
height: 25%;
height: calc(100% / 4);
min-height: 50px;
position: relative;
opacity: 0;
}
.overlay ul li a {
display: block;
position: relative;
color: #FFF;
text-decoration: none;
overflow: hidden;
}
.overlay ul li a:hover:after, .overlay ul li a:focus:after, .overlay ul li a:active:after {
width: 100%;
}
.overlay ul li a:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0%;
transform: translateX(-50%);
height: 3px;
background: #FFF;
transition: .35s;
}
#keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
.box {
position: relative;
width: 220px;
}
.search {
width: 200px;
max-width: 0;
padding: 5px;
transition: all .5s ease;
position: absolute;
right: 20px;
box-sizing: border-box;
opacity: 0;
}
.search.expanded {
max-width: 200px;
opacity: 1;
}
.icon {
width: 20px;
height: 20px;
background: red;
position: absolute;
right: 0;
}
<!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">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="src/css/app.css">
<title>Hello, world!</title>
</head>
<body>
<div id="app">
<header>
<div class="header__menu">
<div class="container">
<div class="header__menu_icon">
<div class="button__container">
<div class="button__container__icon" id="toggle">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
<ul class="header__menu__list">
<li>
<!-- <form action="#">
<a href="#" class="header__menu__list__search" id="search-toggle">
<i class="fa fa-search"></i>
</a>
<input type="text">
</form> -->
<div class="box">
<input class="search" type="search" placeholder="Search" />
<div class="icon">s</div>
</div>
</li>
<li>
<a href="#" class="brand">
<img src="http://via.placeholder.com/176x40" alt="" class="img-fluid">
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- header__menu -->
</header>
<div class="overlay" id="overlay">
<div class="overlay-menu">
<div class="container">
<div class="row">
<div class="col-md-4">
<ul>
<li>
Home
</li>
<li>
About
</li>
<li>
Work
</li>
<li>
Contact
</li>
</ul>
</div>
<div class="col-md-4">
<ul>
<li>
Home
</li>
<li>
About
</li>
<li>
Work
</li>
<li>
Contact
</li>
</ul>
</div>
<div class="col-md-4">
<ul>
<li>
Home
</li>
<li>
About
</li>
<li>
Work
</li>
<li>
Contact
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
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>
<script src="src/js/app.js"></script>
</body>
</html>
Can you please help me to fix the function?
Thanks


Check below js fiddle with your issue resolved if that's what you were looking for
https://jsfiddle.net/g7pe9uw6/27/
You just needed to remove "expanded: class from search box to close it.
$('#toggle').click(function () {
$(this).toggleClass('active');
$('#overlay').toggleClass('open');
$('.search').removeClass('expanded');
});


Not the nicest solution, but it is working :D
Edited
jQuery(function($) {
'use strict';
$('#toggle').click(function () {
var dat = $(this).data('from');
$(this).toggleClass('active');
if (typeof dat === 'undefined') {
$('#overlay').toggleClass('open');
} else {
$('.search').toggleClass('expanded');
}
$(this).removeData('from');
});
$('.icon').on('click',function(e){
e.preventDefault();
var toggleOpened = $('#toggle').hasClass('active');
var dat = $('#toggle').data('from');
if (!toggleOpened) {
$('#toggle').toggleClass('active');
}
if (typeof dat === 'undefined') {
$('#toggle').data('from', 'search');
} else {
$('#toggle').removeData('from');
}
$('#overlay').removeClass('open');
$('.search').toggleClass('expanded');
});
$('.button__container__icon.active').click(function () {
$('.search').removeClass('expanded');
});
}); // JQuery end

Related

Best way to responsively convert nav bar to drop down menu in 2020? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 years ago.
Improve this question
The top Google result is a CSS Tricks guide from 2011, which uses an obtrusive jQuery. Is this the best way to convert a menu to a drop down list in 2020? The site I'm working on is only HTML/CSS so far so I'd prefer to keep it that way (but I'm flexible).
Here's what I'm working with so far.
header {
width: 60%;
margin: 0 auto;
}
header #logo {
float: left;
}
header nav {
float: right;
}
header li {
float: left;
display: inline;
margin-left: 10px;
}
#media (max-width: 960px) {
{
/*TBC*/
}
}
<!DOCTYPE html>
<html>
<head>
<title>Test Page</title>
<link rel="stylesheet" type="text/css" href="./test-styles.css">
</head>
<body>
<header>
<div class="header-container">
<div id="logo">
<h2>MyCompany</h2>
</div>
<nav>
<ul>
<li>Services</li>
<li>Contact Us</li>
<li>Privacy</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
I'd like for the nav bar to convert to a menu at less than 960px width (hence the media query).
Any help would be appreciated 😊

You can totally do it using pure HTML / CSS.
I personally like to use display: grid and the grid-area property to move elements from one column to the other, alongside display / hide.
<header>
<div id="nav-container" class="nav-transparent">
<nav>
<div class="navbar-column" id="left-menu">
<a class="nav-item" href="#">COMPANY</a>
</div>
<div class="navbar-column" id="right-menu">
<a class="nav-item" href="#">Services</a>
<a class="nav-item" href="#">Contact us</a>
<a class="nav-item" href="#">Privacy</a>
</div>
<div class="navbar-column" id="burger-menu-toggle-container">
<input type="checkbox" id="burger-menu-toggle">
<div id="bar1" class="bar"></div>
<div id="bar2" class="bar"></div>
<div id="bar3" class="bar"></div>
<div id="burger-menu">
<div id="burger-menu-content">
<div id="burger-menu-header">
</div>
<div id="burger-menu-body">
<div id="burger-menu-links">
<div class="burger-menu-link">
<a href="#">
</div>
<div class="burger-menu-link">
<a class="nav-item" href="#">Services</a>
</div>
<div class="burger-menu-link">
<a class="nav-item" href="#">Contact us</a>
</div>
<div class="burger-menu-link">
<a class="nav-item" href="#">Privacy</a>
</div>
</div>
</div>
</div>
<div id="burger-menu-footer">
</div>
</div>
</div>
</nav>
</header>
If the current width of the viewport is > 960px, we only display the left-menu and right-menu elements in the form of a classic navbar. You notice that we have a third div which is the dropdown menu toggler, hidden when the width is > 960px.
When the width is < 960px, we hide right-menu and display burger-menu-toggle-container instead. We then move it to the left using the grid-area property. Of course you can chose to let it on the right side.
nav {
max-width: 1268px;
height: 100%;
display: grid;
grid-template-columns: auto 1fr ;
grid-template-areas: 'left right';
margin: 0 auto;
}
#burger-menu-toggle-container {
display: none;
transition: .4s;
padding: 6px;
}
#media screen and (max-width: 960px) {
#right-menu {
display: none;
}
#burger-menu-toggle-container {
display: block;
grid-area: left;
}
}
The dropdown menu toggler is actually a checkbox. Using the :checked selector and ~ we can display / hide the dropdown menu by setting its max-height from 0 to whatever value in px you need.
#burger-menu-toggle {
margin: 0;
display: block;
position: absolute;
width: 35px;
height: 27px;
opacity: 0;
outline: none;
-webkit-appearance: none;
border: none;
z-index: 100;
cursor: pointer;
}
#burger-menu {
transition: .4s;
position: absolute;
z-index: 1;
left: 0;
top: 80px;
width: 100%;
max-height: 0;
overflow: hidden;
}
#burger-menu-toggle:checked ~ #burger-menu {
max-height: 500px;
transition: max-height 0.5s ease-in;
}
Attached is a working example.
html {
height: 100%;
background-color: black;
}
body {
overflow-x: hidden;
font-family: 'poiret one';
font-weight: 400;
font-size: 1.2em;
margin: 0;
min-height: 100%;
background-color: transparent;
display: grid;
grid-template-rows: auto 1fr ;
}
/* hide all scrollbars */
*::-webkit-scrollbar {
display: none;
}
a {
color: white;
text-decoration: none;
}
#nav-container {
font-weight: bold;
width: 100%;
max-height: 100px;
height: 100%;
position: fixed;
z-index: 2;
transition: .4s;
}
#nav-container a:hover {
color: rgba(253, 52, 131, .9);
}
nav {
max-width: 1268px;
height: 100%;
display: grid;
grid-template-columns: auto 1fr ;
grid-template-areas: 'left right';
margin: 0 auto;
}
.navbar-column {
margin: auto 0;
}
#left-menu {
padding: 12px 6px;
}
#right-menu {
text-align: right;
}
#burger-menu-toggle-container {
display: none;
transition: .4s;
padding: 6px;
}
#burger-menu-toggle-container:hover .bar {
background-color: rgba(253, 52, 131, .9);
}
#burger-menu-toggle {
margin: 0;
display: block;
position: absolute;
width: 35px;
height: 27px;
opacity: 0;
outline: none;
-webkit-appearance: none;
border: none;
z-index: 100;
cursor: pointer;
}
#bar1, #bar2, #bar3 {
width: 32px;
height: 4px;
background-color: rgba(225, 225, 225, 1);
border-radius: 6px;
margin: 6px 0;
transition: 0.5s;
}
#burger-menu-toggle:checked ~ #bar1 {
-webkit-transform: rotate(45deg) translate(-6px, 4px) ;
transform: rotate(45deg) translate(6px, 6px) ;
}
#burger-menu-toggle:checked ~ #bar2 {opacity: 0;}
#burger-menu-toggle:checked ~ #bar3 {
-webkit-transform: rotate(-45deg) translate(-8px, -8px) ;
transform: rotate(-45deg) translate(8px, -8px) ;
}
#burger-menu-toggle:checked ~ #burger-menu {
max-height: 500px;
transition: max-height 0.5s ease-in;
}
#burger-menu {
transition: .4s;
position: absolute;
z-index: 1;
left: 0;
top: 80px;
width: 100%;
max-height: 0;
overflow: hidden;
}
#burger-menu-body {
border-radius: 2px;
display: grid;
position: relative;
margin: auto;
padding: 4px;
width: 100%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}
#burger-menu-links {
display: grid;
grid-template-rows: 1fr;
}
.burger-menu-link {
padding: 5px;
}
#media screen and (max-width: 960px) {
#right-menu {
display: none;
}
#burger-menu-toggle-container {
display: block;
grid-area: left;
}
}
.nav-item {
padding: 2px;
}
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale = .9,maximum-scale = .9" />
</head>
<body class="sm-section">
<header>
<header>
<div id="header">
<div id="nav-container" class="nav-transparent">
<nav>
<div class="navbar-column" id="left-menu">
<a class="nav-item" href="/">COMPANY</a>
</div>
<div class="navbar-column" id="right-menu">
<a class="nav-item" href="#">Services</a>
<a class="nav-item" href="#">Contact us</a>
<a class="nav-item" href="#">Privacy</a>
</div>
<div class="navbar-column" id="burger-menu-toggle-container">
<input type="checkbox" id="burger-menu-toggle">
<div id="bar1" class="bar"></div>
<div id="bar2" class="bar"></div>
<div id="bar3" class="bar"></div>
<div id="burger-menu">
<div id="burger-menu-content">
<div id="burger-menu-header">
</div>
<div id="burger-menu-body">
<div id="burger-menu-links">
<div class="burger-menu-link">
<a href="#">
</div>
<div class="burger-menu-link">
<a class="nav-item" href="#">Services</a>
</div>
<div class="burger-menu-link">
<a class="nav-item" href="#">Contact us</a>
</div>
<div class="burger-menu-link">
<a class="nav-item" href="#">Privacy</a>
</div>
</div>
</div>
</div>
<div id="burger-menu-footer">
</div>
</div>
</div>
</nav>
</div>
</header>
<main>
</main>
</body>
<

Search bar seems to be acting as if its position is sticky but I have it set to fixed yet it still moves down when I scroll

NOTE: TO VIEW SEARCH BAR BE SURE TO OPEN THE SNIPPET IN FULL SCREEN
Can someone help me fix this search button so that it doesnt move down the screen when I scroll.
I have it set to position: fixed but for some reason its still scrolling down.
Here is my website so far and I have the search bar on the far right corner. See snippet below (also please view it in full screen to see the search bar properly):
<!DOCTYPE html>
<html>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Pathway+Gothic+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Teko:wght#500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Acme&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#1,200&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Allerta&display=swap" rel="stylesheet">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=yes" />
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
background: white;
}
.third-level-menu {
position: absolute;
top: 0;
right: -190px;
width: 190px;
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.third-level-menu>li {
height: 45px;
background-color: #6640C1;
background: #6640C1;
}
.third-level-menu>li:hover {
background-color: gold;
}
.second-level-menu {
position: absolute;
top: 45px;
left: 0;
width: 100%;
/* width: 273.2px; */
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.second-level-menu>li {
position: relative;
height: 45px;
background-color: #6640C1;
background: #6640C1;
width: 100%;
}
.second-level-menu>li:hover {
background-color: gold;
}
.top-level-menu {
display: flex;
list-style: none;
padding: 0;
margin: 0;
width: 100%;
height: 100px;
z-index: 1;
justify-content: space-between;
}
.top-level-menu>li {
position: relative;
height: 30px;
/* width: 273.2px; */
background: #6640C1;
z-index: 2;
text-align: center;
flex: 1;
}
.top-level-menu>li:hover {
background-color: gold !important;
}
.top-level-menu li:hover>ul {
/* On hover, display the next level's menu */
display: inline;
}
/* Menu Link Styles */
.top-level-menu a
/* Apply to all links inside the multi-level menu */
{
font-family: 'Fjalla One', sans-serif;
color: #FFFFFF;
text-decoration: none;
padding: 0 0 0 10px;
background: #6640C1;
/* Make the link cover the entire list item-container */
display: block;
line-height: 45px;
}
.top-level-menu a:hover {
color: #000000;
background-color: gold;
}
.container1 {
max-width: 1200px;
margin: auto;
background-color: white;
overflow: auto;
}
.gallery {
margin: 5px;
border: 5px solid black;
border-radius: 5%;
float: left;
width: 390px;
}
.gallery img {
width: 100%;
height: auto;
border-radius: 5%;
}
.gallery:hover {
transform: scale(1.03);
}
.desc {
padding: 15px;
text-align: center;
font-family: 'Fjalla One', sans-serif;
;
}
#main-title {
font-family: 'Alfa Slab One', cursive;
color: black;
font-size: 60px;
margin: 20px;
padding: 30px;
position: relative;
bottom: -20px;
background-color: transparent;
display: inline-block;
text-align: center;
}
.footer {
background-color: black;
font-family: Verdana, Geneva, Tahoma, sans-serif;
width: 100%;
color: white;
height: 300px;
}
.footer a {
text-decoration: none;
color: white;
}
.container2 {
max-width: 1500px;
margin: auto;
overflow: auto;
}
.container-top {
position: fixed;
background-color: gold;
top: 0;
width: 100%;
height: 10%;
z-index: 1;
text-align: center;
}
.top {
display: inline-block;
font-family: 'Permanent Marker', cursive;
font-size: 30px;
width: 100%;
margin: -20px;
z-index: 1;
}
body {
font-family: Verdana, sans-serif;
}
.mySlides {
object-fit: cover;
width: 100%;
}
.moving-images {
vertical-align: middle;
}
/* Slideshow container */
.slideshow-container {
max-width: auto;
position: relative;
margin-top: -4%;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* The dots/bullets/indicators */
.dot {
height: 15px;
width: 15px;
margin: 2px 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
background-color: #717171;
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.text {
font-size: 11px
}
}
.arrow {
border: solid white;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
align-items: center;
}
.arrow i:hover {
color: black;
}
.down {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.title-block {
position: relative;
background-color: white;
font-family: 'Alfa Slab One', cursive;
width: 100%;
color: black;
margin: 50px 0 0 0px;
height: 20px;
text-decoration: none;
}
:root {
--line-thickness: 0.1em;
--glass-size: 50%;
--icon-height: 2.5rem;
--transition-speed: 0.15s;
--timing-function: cubic-bezier(0.66, 1.51, 0.77, 1.13);
--icon-color: black;
}
/* this is already done */
* {
box-sizing: border-box;
}
body {
margin: 0;
background: white;
background-repeat: no-repeat;
background-attachment: fixed;
}
.search-icon {
box-sizing: border-box;
width: 30px;
height: 30px;
max-width: 20em;
transition: all var(--transition-speed) linear, border-color 0s linear var(--transition-speed);
position: fixed;
top: 0;
right: 0;
bottom: 400px;
left: 0;
margin: auto;
border: solid var(--line-thickness);
border-color: rgba(255, 255, 255, 0);
border-radius: 100px;
padding: 0.25em;
}
.search-icon__wrapper {
width: var(--icon-height);
height: var(--icon-height);
position: absolute;
border-radius: 100px;
top: 0;
bottom: 0;
right: 0;
margin: auto 0;
transform: rotate(-45deg);
transition: all 0 linear;
}
.search-icon__wrapper:hover {
cursor: pointer;
}
.search-icon__input {
background: none;
text-align: center;
outline: none;
display: block;
border: none;
background: rgba(255, 255, 255, 0);
width: calc(90% - (var(--icon-height) / 2 + 1rem));
margin-right: 6rem;
height: 100%;
border-radius: 100px;
transition: all var(--transition-speed) linear;
font-size: 20px;
padding: 0 0.5em;
color: black;
}
.search-icon__input::placeholder {
color: grey;
}
.search-icon__glass {
width: var(--glass-size);
height: var(--glass-size);
border: solid var(--line-thickness);
border-color: var(--icon-color);
border-radius: 100px;
margin: 0 auto;
position: relative;
transition: all var(--transition-speed) var(--timing-function) var(--transition-speed), border-color 0s linear var(--transition-speed);
}
.search-icon__handle {
height: calc(100% - var(--glass-size));
width: var(--line-thickness);
margin: 0 auto;
background: var(--icon-color);
position: absolute;
border-radius: 0 0 100px 100px;
left: 0;
right: 0;
bottom: 0;
transition: all var(--transition-speed) var(--timing-function);
transition-delay: var(--transition-speed);
}
.search-icon__handle::after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: inherit;
background: var(--icon-color);
transform: rotate(0deg);
transition: all var(--transition-speed) var(--timing-function);
transition-delay: 0s;
}
.search-icon.open {
width: 200px;
border-color: var(--icon-color);
transition-delay: var(--transition-speed);
}
.search-icon.open .search-icon__input {
transition-delay: var(--transition-speed);
}
.search-icon.open .search-icon__glass {
width: 45%;
height: 45%;
transition: all var(--transition-speed) var(--timing-function) 0s, border-color 0s linear var(--transition-speed);
border-color: rgba(0, 0, 0, 0);
}
.search-icon.open .search-icon__handle {
bottom: calc(50% - (100% - var(--glass-size)) / 2);
border-radius: 100px;
transition-delay: 0s;
}
.search-icon.open .search-icon__handle::after {
transition-delay: var(--transition-speed);
transform: rotate(90deg);
}
</style>
<title>TheLeague.com</title>
</head>
<body>
<main>
<div class="container-top">
<div class="top">
<p>Shop 20% Off All Jerseys Now!</p>
</div>
</div>
<div class="title-block">
<div style="float:right; margin: 0 auto;">
<div class=" search-icon" style="margin-right: 50px; position: fixed;">
<input class="search-icon__input" placeholder="search ...">
<div class="search-icon__wrapper">
<div class="search-icon__glass"></div>
<div class="search-icon__handle"></div>
</div>
</div>
</div>
</div>
<div style="margin:0 auto; width:300px; padding: 1px 0 50px 0; font-size: 25px;">
<a style="text-decoration: none;" href="#">
<h1 style="color: black;">The<u>League</u></h1>
</a>
</div>
</div>
<!-- <div>
<div style="text-align: center;">
<a style="text-decoration: none;" href="#">
<h1 id="main-title">The<u>League</u></h1>
</a>
</div>
</div> -->
<ul class="top-level-menu">
<li><i class="fa fa-home" style="font-size: 20px;"></i> Home</li>
<li>
<i class="fa fa-tag" style="font-size: 20px"></i> Shop All ▼
<ul class="second-level-menu">
<li>Jerseys</li>
<li>Hats</li>
<li>Gym Shorts</li>
</ul>
</li>
<li><i class="fa fa-flask" style="font-size: 20px;"></i> Customize</li>
<li>
<i class="fa fa-futbol-o" style="font-size: 20px;"></i> Teams ▼
<ul class="second-level-menu">
<li>
Soccer
<ul class="third-level-menu">
<li>Barcelona</li>
<li>PSG</li>
<li>Real Madrid</li>
</ul>
</li>
<li>
Basketball
<ul class="third-level-menu">
<li>Golden State Warriors</li>
<li>Celtics</li>
<li>Chicago Bulls</li>
</ul>
</li>
<li>
Football
<ul class="third-level-menu">
<li>New England Patriots</li>
<li>Ravens</li>
<li>Atlanta Falcons</li>
</ul>
</li>
</ul>
<li><i class="fa fa-envelope" aria-hidden="true" style="font-size: 20px;"></i> Contacts Us
</li>
</li>
</ul>
<div class="slideshow-container moving-images">
<div class="mySlides">
<img src="https://images.daznservices.com/di/library/sporting_news/a/fe/kobe-bryant-041315-getty-ftrjpg_hnmwtxmeqtvu1fyv5fnzn6abh.jpg?t=926331162&quality=100"
alt="kobe holding shirt" style="width:100%">
</div>
<div class="mySlides">
<img src="https://images.hdqwalls.com/download/lionel-messi-fc-art-1m-1366x768.jpg" style="width:100%">
<!-- <div class="text">Caption Two</div> -->
</div>
<div class="mySlides">
<img src="https://images.wallpapersden.com/image/download/tom-brady-new-england-patriots-football_21828_1366x768.jpg"
style="width:100%;">
<!-- <div class="text">Caption Three</div> -->
</div>
<div style="text-align: center;">
<button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)"><strong>❮ Prev</strong>
</button>
<button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)"><strong>Next ❯</strong>
</button>
</div>
</div>
<div style="text-align:center; margin: 10px;">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<!-- JavaScript -->
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) { slideIndex = 1 }
if (n < 1) { slideIndex = x.length }
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex - 1].style.display = "block";
}
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) { slideIndex = 1 }
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
setTimeout(showSlides, 5000); // Change image every 2 seconds
}
const searchIcon = document.querySelector(".search-icon__wrapper");
searchIcon.addEventListener("click", e => searchIcon.parentElement.classList.toggle("open"))
</script>
<!-- End of JavaScript -->
<div style="margin: 30px;">
<hr>
</hr>
</div>
<br><br>
<h3 style="text-align: center;font-size: 30px; color: black;font-family:'Fjalla One', sans-serif; ;">Featured
Jerseys</h3><br><br><br>
<div class="container1">
<div class="gallery">
<img src="https://www.teamzo.com/images/re-2019-2020-barcelona-home-nike-shirt-kids-messi-10-1559836177.png"
alt="The image shows the 2019-2020 Barcelona jersey">
<div class="desc"> Barcelona 2019: Messi Jersey </div>
</div>
<div class="gallery">
<img src="https://fanatics.frgimages.com/FFImage/thumb.aspx?i=/productimages/_1768000/altimages/FF_1768829ALT1_full.jpg&w=900"
alt="The image shows the 2019-2020 Barcelona jersey">
<div class="desc"> Golden State Warriors 2019: StephCurry Jersey </div>
</div>
<div class="gallery">
<img src="https://images.footballfanatics.com/FFImage/thumb.aspx?i=/productimages/_3775000/altimages/ff_3775300-29e956db2213fbdbcf67alt1_full.jpg&w=325"
alt="The image shows the 2019-2020 Barcelona jersey">
<div class="desc"> Canucks 2019: Customizable Jersey </div>
</div>
<div class="gallery">
<img src="https://contestimg.wish.com/api/webimage/5e86c1d100c605394a614f9c-large.jpg?cache_buster=71f3e987b756bb4df19be721d299a68b"
alt="The image shows the 2019-2020 Barcelona jersey">
<div class="desc"> Patriots 2019: Tom Brady Jersey </div>
</div>
<div class="gallery">
<img src="https://fanatics.frgimages.com/FFImage/thumb.aspx?i=/productimages/_3609000/altimages/ff_3609123-ef2947d2ef78011fbfc1alt3_full.jpg&w=600"
alt="The image shows the 2019-2020 Barcelona jersey">
<div class="desc"> PSG 2019: Neymar Jersey </div>
</div>
<div class="gallery">
<img src="https://cdn.shopify.com/s/files/1/0271/0975/2920/products/thumb.jpg?v=1580412625"
alt="The image shows the 2019-2020 Barcelona jersey">
<div class="desc"> Lakers 2019: Kobe Bryant Jersey </div>
</div>
</div>
<div style="margin: 30px;">
<hr>
</hr>
</div>
<div class="footer">
<div style="float: left; margin: 0 auto; padding: 0 0 0 40px;">
<p><strong>Find a Store</strong></p>
<p><strong>Sign Up For Email</strong></p>
<p><strong>Become A Member</strong></p>
<p><strong>Site Feedback</strong></p>
</div>
<div style="float:right; margin: 0 auto; width: 300px;">
<p>Get Help</p>
<p>Order Status</p>
<p>Shipping and Delivery</p>
<p>Returns</p>
<p>Payment Options</p>
<p>Contact Us</p>
</div>
<div style="margin:0 auto; width:200px; padding:4px 0 0 0;">
<strong>
<p>About The League</p>
</strong>
<p>News</p>
<p>Careers</p>
<p>Investors</p>
<p>Sustainability</p>
</div>
<div style="margin: 30px; color: white;"><br>
<hr>
</hr>
</div>
</div>
</main>
</body>
</html>

The problem seems to be the positioning of your container-top.
The position:Fixed effects the element in such a way that it follows the user's viewport. the position Absolute, on the other hand, takes the actual document into consideration.
Have a look at w3schools description here: https://www.w3schools.com/css/css_positioning.asp

You should define the position to absolute. Fixed means that it is always fixed to the same position on the screen, while absolute will force it to stay where it is in the element.

Aligning Carousel Items with Jquery

I want to achieve this layout with the items of the carousel:
But this is what I've been able to accomplish:
Here is my code and a fiddle http://jsfiddle.net/xvac9usr/8/:
HTML:
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Card Carousel</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet">
</head>
<body>
<div class="carousel">
<button class="carousel__icon carousel__prev">
Prev
</button>
<ul class="carousel__list">
<li class="carousel__item">
<div class="card card__small">
<div class="card__image card__image--1">
<h1 class="heading-primary">Wild</h1>
<h2 class="heading-secondary">Nevada</h2>
<div class="card__tag-box">
<div class="card__tag">Beautiful</div>
<div class="card__tag">Rocky</div>
</div>
</div>
</div>
</li>
<li class="carousel__item">
<div class="card">
<div class="card__image card__image--2">
<h1 class="heading-primary">Hot</h1>
<h2 class="heading-secondary">El Salvador</h2>
<div class="card__tag-box">
<div class="card__tag">Beautiful</div>
<div class="card__tag">Peaceful</div>
<div class="card__tag">Green</div>
</div>
</div>
</div>
</li>
<li class="carousel__item">
<div class="card card__active">
<div class="card__image card__image--3">
<h1 class="heading-primary">Refreshing</h1>
<h2 class="heading-secondary">Amazonas</h2>
<div class="card__tag-box">
<div class="card__tag">Beautiful</div>
<div class="card__tag">Rainy</div>
<div class="card__tag">Dangerous</div>
</div>
</div>
</div>
</li>
<li class="carousel__item">
<div class="card">
<div class="card__image card__image--4">
<h1 class="heading-primary">Hot</h1>
<h2 class="heading-secondary">El Salvador</h2>
<div class="card__tag-box">
<div class="card__tag">Beautiful</div>
<div class="card__tag">Peaceful</div>
<div class="card__tag">Green</div>
</div>
</div>
</div>
</li>
<li class="carousel__item">
<div class="card card__small">
<div class="card__image card__image--5">
<h1 class="heading-primary">Hot</h1>
<h2 class="heading-secondary">El Salvador</h2>
<div class="card__tag-box">
<div class="card__tag">Beautiful</div>
<div class="card__tag">Peaceful</div>
<div class="card__tag">Green</div>
</div>
</div>
</div>
</li>
</ul>
<button class="carousel__icon carousel__next">
Next
</button>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="main.js"></script>
</body>
</html>
JS:
$(document).ready(() => {
var carousel = $(".carousel__list"),
carouselItems = $(".carousel__item"),
clickCount = (centerItemIndex = Math.ceil(carouselItems.length / 2)),
itemWidth =
carouselItems.width() +
parseInt(carouselItems.first().css("marginRight"));
const refreshChildPosition = () => {
for(let i = 0; i < carouselItems.length; ++i){
$(carouselItems[i]).css("left", itemWidth * i);
}
};
refreshChildPosition();
//carousel.width(itemWidth * carouselItems.length);
$(".carousel__next").click(e => {
e.preventDefault();
});
$(".carousel__prev").click(e => {
e.preventDefault();
moveRight();
});
});
CSS:
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: inherit; }
html {
box-sizing: border-box;
font-size: 62.5%; }
body {
font-family: "Open Sans", sans-serif; }
.card {
overflow: hidden;
width: 50rem;
height: 60vh;
border-radius: 0.8rem;
box-shadow: 0px 122px 264px -115px black;
transition: all 0.3s ease-out; }
.card:hover {
transform: translateY(-1rem);
box-shadow: 0px 122px 264px -115px rgba(0, 0, 0, 0.7); }
.card:not(:last-child) {
margin-right: 9rem; }
.card__image {
width: 100%;
height: 100%;
border-radius: inherit;
padding: 3rem 0;
z-index: 1;
position: relative;
text-align: center;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: white;
cursor: pointer;
transition: all 0.2s ease-in-out; }
.card__image--1 {
background-image: url("https://images.unsplash.com/photo-1526512340740-9217d0159da9?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=ea034e0fa9d41f2687c143ab9ab7a30f&auto=format&fit=crop&w=645&q=80");
}
.card__image--2 {
background-image: url("https://images.unsplash.com/photo-1485237254814-0003b25e5672?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=d9ee4c294ead6d83c34334b2f19508fe&auto=format&fit=crop&w=2089&q=80");
}
.card__image--3 {
background-image: url("https://images.unsplash.com/photo-1517174637803-6929e01b6e63?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=24a8fc94192aa7a08c7a3575c7190980&auto=format&fit=crop&w=634&q=80");
}
.card__image--4 {
background-image: url("https://images.unsplash.com/photo-1534990874943-dceb856eff5b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f9c8dbe969d60257bef71ac433ba7575&auto=format&fit=crop&w=634&q=80");
}
.card__image--5 {
background-image: url("https://images.unsplash.com/photo-1535089894977-83d4c8854f62?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=0e70b451b32ef8730ad0620338ff4e49&auto=format&fit=crop&w=754&q=80");
}
.card__image:hover {
transform: scale(1.03); }
.card__tag-box {
position: absolute;
left: 0;
bottom: 0;
padding: 2rem 3rem;
display: flex;
flex-wrap: wrap; }
.card__tag {
border: solid 1px white;
padding: 3px 5px;
border-radius: 3px;
transition: transform 0.2s, background-position 0.3s ease-out;
background-image: linear-gradient(120deg, transparent 0%, transparent 50%, #9e9e9e 50%);
background-size: 225%;
display: inline-block;
margin: 0.2rem 0; }
.card__tag:hover {
background-position: 100%;
transform: translateY(-0.2rem); }
.card__tag:not(:last-child) {
margin-right: 1rem; }
.card__active {
transform: translateY(-0.5rem) scale(1.1); }
.card__active:hover {
transform: translateY(-2rem) scale(1.1); }
.card__small {
transform: scale(0.9); }
.card__small:hover {
transform: translateY(-1rem) scale(0.9); }
.carousel {
height: 100vh;
position: relative; }
.carousel__list {
position: relative;
height: 100%;
width: 100%;
overflow-x: hidden;
display: flex;
justify-content: center;
align-items: center;
list-style-type: none; }
.carousel__item {
position: absolute; }
.carousel__item:not(:last-child) {
margin-right: 4%; }
.carousel__icon {
cursor: pointer;
position: absolute;
width: 5rem;
height: 5rem; }
.carousel__prev {
left: 0;
top: 50%;
z-index: 100; }
.carousel__next {
right: 0;
top: 50%;
z-index: 100; }
body {
font-family: "Open Sans", sans-serif;
font-size: 1.4rem; }
.heading-primary {
font-weight: 300;
letter-spacing: 1px;
font-size: 2em; }
.heading-secondary {
font-size: 1.7rem;
font-weight: 300;
letter-spacing: 1px; }
By subtracting the position by 440 I can seem to get a similar result but it is a hard coded solution and not responsive.

Try removing/comment this piece of css code and test your application
.carousel__item {
position: absolute; }

Trying to toggle class on group of items for accordion style functionality but it's acting funny

I am trying to toggle a class on the wrapper of a header (that you click to drop the body) and the body. The class changes the visibility, opacity, and max-height of the body to create the drop down effect.
This first item is dropped down by default. When another is open, all currently open items should close.
instead, when I click on a closed one it opens all of them but and closes the first one that is open by default.
here is my code:
$(".template_wrap").first().addClass("open");
$('.templates').find('.template_header').click(function(){
$(this).drop();
$('.template_header').not($(this)).drop();
});
$.fn.drop = function() {
$(this).parent(".template_wrap").toggleClass('open');
};
.page_center {
margin: 0 auto;
float: none;
}
.page_center.large {
width: 95%;
}
.page_center.medium {
width: 85%;
max-width: 1350px;
}
.page_center.small {
width: 85%;
max-width: 1130px;
}
.page_center.x-small {
width: 75%;
max-width: 680px;
}
.page_center:after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;
}
* html .page_center { zoom: 1; } /* IE6 */
*:first-child+html .page_center { zoom: 1; } /* IE7 */
.template_wrap {
border: 1px solid #a32021;
width: 100%;
margin-bottom: 30px;
}
.template_header {
background: #a32021;
position: relative;
cursor: pointer;
padding: 1px 0 1px 2%;
}
.template_header:after {
position: absolute;
right: 2%;
top: 50%;
transform: translateY(-50%);
color: #fff;
font-size: 36px;
font-family:"FontAwesome";
content: "\f107";
transition: all 0.4s ease;
}
.template_wrap.open .template_header:after {
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
transition: all 0.4s ease;
content: "\f106";
top: 30%;
}
.template_header h2 {
color: #fff;
margin: 0;
line-height: 65px;
font-weight: 400;
}
.template_body {
visibility: hidden;
opacity: 0;
max-height: 0;
transition: opacity .4s ease-out, visibility .4s, max-height: .8s;
}
.template_wrap.open .template_body {
visibility: visible;
opacity: 1;
max-height: 10000px;
transition: opacity .4s ease-out, visibility .4s, max-height: .8s;
padding: 2%;
}
.template_links {
width: 50%;
float: left;
}
.template_links_wrap {
border: 1px solid #f47628;
padding: 0;
margin: 0;
list-style: none;
}
.template_links_wrap li {
padding-left: 3%;
line-height: 52px;
}
.template_links_wrap li:nth-child(odd) {
background: #fbe4d6;
}
.template_links_wrap li a {
color: #f47628;
}
.template_img {
width: 50%;
float: right;
}
.template_img img {
margin: 0 auto;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="content templates">
<div class="page_center medium">
<div class="template_wrap">
<div class="template_header">
<h2>Template Header</h2>
</div>
<div class="template_body">
<div class="page_center">
<div class="template_links">
<ul class="template_links_wrap">
<li>Download PDF</li>
<li>Download PDF</li>
<li>Download PDF</li>
</ul>
</div>
<div class="template_img">
<img src="images/template_placeholder.jpg">
</div>
</div>
</div>
</div>
<div class="template_wrap">
<div class="template_header">
<h2>Template Header</h2>
</div>
<div class="template_body">
<div class="page_center">
<div class="template_links">
<ul class="template_links_wrap">
<li>Download PDF</li>
<li>Download PDF</li>
<li>Download PDF</li>
</ul>
</div>
<div class="template_img">
<img src="images/template_placeholder.jpg">
</div>
</div>
</div>
</div>
<div class="template_wrap">
<div class="template_header">
<h2>Template Header</h2>
</div>
<div class="template_body">
<div class="page_center">
<div class="template_links">
<ul class="template_links_wrap">
<li>Download PDF</li>
<li>Download PDF</li>
<li>Download PDF</li>
</ul>
</div>
<div class="template_img">
<img src="images/template_placeholder.jpg">
</div>
</div>
</div>
</div>
</div>
</section>
Also, Something strange happens to the h2s where they move around based on various clicks. Any help would be appreciated.

This should do the trick:
$(".template_wrap").first().addClass("open");
$('.template_header').click(function(){
$('.template_wrap').removeClass("open");
$(this).parent().addClass("open");
})
Fiddle: https://jsfiddle.net/26kasg4t/

The trick here is to make all accordions close and then afterwards make this the only one open:
$('.template_wrap:first').addClass('open');
$('.template_header').click(function() {
if ($(this).parent().hasClass('open')) {
$('.template_wrap').removeClass('open');
$('.template_body').slideUp();
} else {
$('.template_wrap').removeClass('open');
$('.template_body').slideUp();
$(this).next('.template_body').slideDown();
$(this).parent().addClass('open');
}
});
Added a condition, should an accordion be open while it's clicked, it will just close.
SNIPPET
$('.template_wrap:first').addClass('open');
$('.template_header').click(function() {
if ($(this).parent().hasClass('open')) {
$('.template_wrap').removeClass('open');
$('.template_body').slideUp();
} else {
$('.template_wrap').removeClass('open');
$('.template_body').slideUp();
$(this).next('.template_body').slideDown();
$(this).parent().addClass('open');
}
});
.page_center {
margin: 0 auto;
float: none;
}
.page_center.large {
width: 95%;
}
.page_center.medium {
width: 85%;
max-width: 1350px;
}
.page_center.small {
width: 85%;
max-width: 1130px;
}
.page_center.x-small {
width: 75%;
max-width: 680px;
}
.page_center:after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;
}
* html .page_center {
zoom: 1;
}
/* IE6 */
*:first-child+html .page_center {
zoom: 1;
}
/* IE7 */
.template_wrap {
border: 1px solid #a32021;
width: 100%;
margin-bottom: 30px;
}
.template_header {
background: #a32021;
position: relative;
cursor: pointer;
padding: 1px 0 1px 2%;
}
.template_header:after {
position: absolute;
right: 2%;
top: 50%;
transform: translateY(-50%);
color: #fff;
font-size: 36px;
font-family: "FontAwesome";
content: "\f107";
transition: all 0.4s ease;
}
.template_wrap.open .template_header:after {
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
transition: all 0.4s ease;
content: "\f106";
top: 30%;
}
.template_header h2 {
color: #fff;
margin: 0;
line-height: 65px;
font-weight: 400;
}
.template_body {
visibility: hidden;
opacity: 0;
max-height: 0;
transition: opacity .4s ease-out, visibility .4s, max-height: .8s;
}
.template_wrap.open .template_body {
visibility: visible;
opacity: 1;
max-height: 10000px;
transition: opacity .4s ease-out, visibility .4s, max-height: .8s;
padding: 2%;
}
.template_links {
width: 50%;
float: left;
}
.template_links_wrap {
border: 1px solid #f47628;
padding: 0;
margin: 0;
list-style: none;
}
.template_links_wrap li {
padding-left: 3%;
line-height: 52px;
}
.template_links_wrap li:nth-child(odd) {
background: #fbe4d6;
}
.template_links_wrap li a {
color: #f47628;
}
.template_img {
width: 50%;
float: right;
}
.template_img img {
margin: 0 auto;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="content templates">
<div class="page_center medium">
<div class="template_wrap">
<div class="template_header">
<h2>Template Header</h2>
</div>
<div class="template_body">
<div class="page_center">
<div class="template_links">
<ul class="template_links_wrap">
<li>Download PDF
</li>
<li>Download PDF
</li>
<li>Download PDF
</li>
</ul>
</div>
<div class="template_img">
<img src="images/template_placeholder.jpg">
</div>
</div>
</div>
</div>
<div class="template_wrap">
<div class="template_header">
<h2>Template Header</h2>
</div>
<div class="template_body">
<div class="page_center">
<div class="template_links">
<ul class="template_links_wrap">
<li>Download PDF
</li>
<li>Download PDF
</li>
<li>Download PDF
</li>
</ul>
</div>
<div class="template_img">
<img src="images/template_placeholder.jpg">
</div>
</div>
</div>
</div>
<div class="template_wrap">
<div class="template_header">
<h2>Template Header</h2>
</div>
<div class="template_body">
<div class="page_center">
<div class="template_links">
<ul class="template_links_wrap">
<li>Download PDF
</li>
<li>Download PDF
</li>
<li>Download PDF
</li>
</ul>
</div>
<div class="template_img">
<img src="images/template_placeholder.jpg">
</div>
</div>
</div>
</div>
</div>
</section>

Arrows on Slick Carousel not appearing

I did a test of the slick carousel on it's own in an empty html page before integrating it into the rest of my code. It worked perfectly and the arrows were there. I copy and pasted my test code into a page with code that already existed. The carousel still worked as intended, but the arrows to toggle the images have now disappeared. I'm not sure what happened or how to fix it.
This is my code:
$(document).ready(function() {
$('.slider').slick({
dots: true,
infinite: true,
speed: 500,
fade: true,
cssEase: 'linear',
autoplay: true,
autoplaySpeed: 5000,
});
});
#header {
height: 40px;
position: relative;
margin: 80px auto 0;
}
#header ul {
margin: 0 auto;
width: 800px;
padding: 0;
list-style: none;
}
#header ul li {
float: left;
width: 97px;
}
#header ul li:nth-of-type(4) {
margin-left: 217px;
}
#header ul li a {
text-transform: lowercase;
text-decoration: none;
display: block;
text-align: center;
padding: 12px 0 0 0;
height: 28px;
color: #000;
-o-transition: .5s;
-ms-transition: .5s;
-moz-transition: .5s;
-webkit-transition: .5s;
transition: .5s;
}
#header ul li a:hover {
color: #c4c4c4;
}
.logo {
position: absolute;
left: 50%;
margin: -60px 0 0 -124px;
}
#media screen and (max-width: 800px) {
.logo {
bottom: 100%;
}
#header ul li:nth-of-type(4) {
margin-left: 0;
}
#header ul {
width: 600px;
position: relative;
}
}
ul.sub-menu {
display: none;
position: absolute;
top: 30;
left: 0;
width: auto!important;
overflow: hidden;
padding: 0 1em;
z-index: 2;
background: white;
}
.sub-menu li {
display: block;
float: none!important;
}
.more {
position: relative;
}
.more:hover .sub-menu {
display: inline-block;
}
#filler {
height: 100px;
}
.slider {
width: 750px;
margin: 20px auto;
background: white;
text-align: center;
}
.slider div img {
height: 500px;
margin: auto;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Whatever Photography</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="Content/bootstrap.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="slick/slick.css" />
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css" />
<link href="style.css" rel="stylesheet" />
</head>
<body>
<div id="header">
<a class="logo">
<img src="imgs/logo.jpg" alt="Whatever Photography" height="140" width="230" />
</a>
<ul>
<li>About
</li>
<li class="more">
Galleries <span class="caret"></span>
<ul class="sub-menu">
<li>Portraits
</li>
<li>Landscapes
</li>
<li>Personal
</li>
</ul>
</li>
<li>Blog
</li>
<li>Info/Rates
</li>
<li>Prints
</li>
<li>Contact
</li>
</ul>
</div>
<div class="container">
<div class="col-md-12" id="filler">
</div>
<div class="col-md-12">
<div class="slider">
<div>
<img src="imgs/slider01.jpg" />
</div>
<div>
<img src="imgs/slider02.jpg" />
</div>
<div>
<img src="imgs/slider03.jpg" />
</div>
<div>
<img src="imgs/slider04.jpg" />
</div>
<div>
<img src="imgs/slider05.jpg" />
</div>
<div>
<img src="imgs/slider06.jpg" />
</div>
<div>
<img src="imgs/slider07.jpg" />
</div>
</div>
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<script src="scripts.js"></script>
</body>
</html>

I figured it out. I had the carousel set to a white background and the arrows/dots are colored white by default hence the "disappearance," so I just have to go in and restyle the colors....

You 2 time Add jquery-1.11.0.min.js
one more thing first load jquery library file
Demo link https://jsfiddle.net/a9g1bum6/1/

Categories

Resources