Image transition fade - javascript

So I'm having a bit of an issue with my image gallery. I want my images to fade to the next or previous image when I press the prev/next buttons. But I also have a toggle feature that when you click on the image, it changes to a different one.
The toggle works for the first two images, but I lost the fade in transition. What can I do so I can have both the toggle and the fade in?
If I change the javascript code from
slides[i].style.display = "none"; slides[slideIndex-1].style.display = "block"
to
slides[i].style.opacity = "0"; slides[slideIndex-1].style.opacity = "1";
the fade in transition works, but I lose the toggle effect.
Here's the codepen: https://codepen.io/GabriellaFarfan/pen/VBYQGy.
var slideIndex = 1;
showSlide(slideIndex);
function plusSlides(n){
showSlide(slideIndex += n);
}
function currentSlide(n) {
showSlide(slideIndex = n);
}
function showSlide(n){
var i;
var slides = document.getElementsByClassName("myslides");
if (n > slides.length) { slideIndex = 1};
if (n < 1) { slideIndex = slides.length};
for (i=0;i<slides.length;i++) {
slides[i].style.display = "none";
};
slides[slideIndex-1].style.display = "block";
}
function toggleImage(id) {
var image = document.getElementById(id);
image.style.display = image.style.display == "none" ? "block" : "none";
}
function toggleBoth() {
toggleImage('image1')
toggleImage('image2')
toggleImage('image3')
toggleImage('image4')
}
$(document).ready(function(){
$(".next").click(function(){
$("")
});
});
* {
margin: 0;
padding: 0;
list-style-type:none;
}
body{
margin: 0;
font-size: 100%;
background-color: #232324;
height: 100vh;
}
.header {
overflow: auto;
background-color: #ECAAAC;
}
.logo {
float: left;
padding-top: 1em;
width: 20%;
text-align: center;
font-family: 'Allerta', sans-serif;
text-transform: uppercase;
font-weight: 700;
}
.logo a {
text-decoration: none;
font-size: 1em;
color: black;
}
.nav {
background-color: #232324;
padding-top: 1em;
padding-bottom: 1em;
width: 80%;
float: right;
}
li {
display: inline-block !important;
border-right: 1px solid #656568;
padding-right: 1.5em;
padding-left: 1.5em;
}
li:last-child{
border-right: none;
}
li a {
text-decoration: none;
text-align: center;
color: white;
font: normal 62.5% "proxima-nova-alt", Helvetica, Arial, sans-serif;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 1px;
}
li a:hover {
color: #ECAAAC;
}
.text {
background-color: black;
padding: .75em 0 .75em 0;
}
p {
color: #656568;
text-align: center;
font-size: 1em;
font: italic 80% "proxima-nova-alt", Helvetica, Arial, sans-serif;
}
#slideshow-container{
position: relative;
margin: auto;
background-color: black;
overflow: hidden;
padding-bottom: 2.5em;
height: 1000px !important;
}
#slideshow-container img{
display: block;
margin: 0 auto;
max-width: 100%;
position: relative;
height: 960px;
}
.myslides {
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
opacity: 1;
-webkit-transition: opacity .5s ease;
transition: opacity .5s ease;
}
.prev , .next{
position: absolute;
top: 50%;
font-size: 30px;
font-weight: bold;
padding: 16px;
margin-top: -22px;
color: #fff;
cursor: pointer;
z-index: 1;
}
.next{
right: 0;
}
.prev:hover,.next:hover{
/* color: #b0d5d0 ; */
/* background-color: rgba(0,0,0,0.8); */
}
.caption{
text-align: center;
position: absolute;
width: 100%;
color: #f2f2f2;
text-shadow: 2px 2px 4px black;
font: normal 62.5% "proxima-nova-alt", Helvetica, Arial, sans-serif;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 1px;
padding-top: 1.25em;
}
#media(max-width: 798px) {
#slideshow-container {
height: 640px !important;
}
#slideshow-container img {
max-height: 600px !important;
display: block;
margin: 0 auto;
max-width: 100%;
}
.nav {
width: 75%;
}
.logo {
width: 25%;
text-align: center;
}
.logo a {
font-size: .75em;
}
li {
padding-right: .75em !important;
padding-left: .75em !important;
}
}
#media(max-width: 468px) {
#slideshow-container {
height: 440px !important;
}
#slideshow-container img{
max-height: 400px !important;
display: block;
margin: 0 auto;
max-width: 100%;
}
.nav {
width: 65%;
}
.logo {
width: 35%;
text-align: center;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!---Images not owned by me --->
<link href="https://fonts.googleapis.com/css?family=Allerta" rel="stylesheet">
<div class="header">
<div class="logo">
Gabriella Farfan
</div>
<div class="nav">
<ul>
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
<div id="slideshow-container">
<div class="text">
<p>Click on the image to see the before and after</p>
</div>
<div class="myslides fade">
<div>
<img id="image1" onclick="toggleBoth()" src="http://www.hestetika.it/wp-content/uploads/2016/10/stevemccurry_5.jpg">
<img id="image2" onclick="toggleBoth()" style="display:none;" src="https://static.boredpanda.com/blog/wp-content/uploads/2014/12/Top-10-photographers-for-travel-portraits27__700.jpg">
</div>
<div class="caption">Text 1</div>
</div>
<div class="myslides fade">
<div>
<img id="image3" onclick="toggleBoth()" src="https://i.pinimg.com/736x/2f/7a/33/2f7a33e82f03de319faa0663371e2609--interesting-faces-freckles.jpg">
<img id="image4" onclick="toggleBoth()" style="display:none;" src="http://cdn3.spiegel.de/images/image-945792-galleryV9-buud-945792.jpg">
</div>
<div class="caption">Text 2</div>
</div>
<div class="myslides fade">
<div>
<img src="https://media.discordapp.net/attachments/327123793040637952/436369548996902913/nwts_ariana.jpg?width=1050&height=1050">
</div>
<div class="caption">Text 3</div>
</div>
<div class="myslides fade">
<div>
<img src="http://jmacpratt.weebly.com/uploads/1/2/0/1/12013129/portrait2_orig.jpg">
</div>
<div class="caption">Text 4</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>


Apart from making display none and display block try using visibility visible and hidden with transition:0.5s and opacity 0 / 1

Related

jQuery toggle() working bottom to top, but not top to bottom

In the demo below, when in a mobile viewport <=768px I do the following:
Click on Product, to open Product's mega menu.
Scroll down, and click on Resources.
I expect Product's mega menu to close, and Resource's mega menu to open.
What happens is Product's mega menu closes, but Resource's mega menu doesn't open.
The problem doesn't exist working in the reverse order, i.e. opening Resource's mega menu first, then clicking on Product to close Resource's mega menu, and opening Product's mega menu (this works fine).
I've considered if an element is overlapping the correct item and preventing the right element from being clicked - I don't think this is the case.
You'll need to click the burger menu # top right to see what happens.
Help appreciated.
$(document).ready(function () {
if (window.innerWidth > 768) {
$(".mega-drop-down").hover(function() {
$(this).find('a span').toggleClass('hover');
$('.mega-menu').not($(this).children('.mega-menu').toggle()).hide();
$('.exo-menu').find('a span').not($(this).find('a span')).removeClass('hover');
});
}
$(".mega-drop-down").on('click', function () {
if (window.innerWidth <= 768) {
$('.mega-menu').not($(this).children('.mega-menu').toggleClass('hide-block')).addClass('hide-block');
$(this).find('a span').toggleClass('hover');
$('.exo-menu').find('a span').not($(this).find('a span')).removeClass('hover');
}
});
$('.toggle-menu').click(function(){
$('.exo-menu').toggleClass('display');
$('#mm-button-group').toggle();
});
});
.fl-builder-content[data-type="header"].fl-theme-builder-header-sticky {
z-index: 1000;
}
ul.exo-menu {
list-style: none;
margin: 0;
padding: 0;
}
ul.cabeza, ul.manos, ul.corporal {
list-style-type: none;
padding: 0;
}
/*.container-fluid.megamenusip {
width: 1200px;
}*/
.content {
margin: 50px 100px 0px 100px;
}
.mega-menu-wrap .row {
margin-right: 0;
margin-left: 0;
padding-left: 0;
padding-right: 0;
}
.exo-menu {
float: none;
margin: auto;
list-style: none;
position: relative;
}
.exo-menu > li {
display: inline-block;
float: left;
position: relative;
}
.exo-menu > li > a {
color: black;
font-size: 15px;
font-weight: 600;
text-decoration: none;
}
.exo-menu > li > a:hover {
color: #23ADF8;
}
.exo-menu i {
float: left;
font-size: 18px;
margin-right: 6px;
line-height: 20px !important;
}
li.drop-down, .flyout-right, .flyout-left {
position: relative;
}
li.drop-down:before {
content: "f103";
color: #fff;
font-family: FontAwesome;
font-style: normal;
display: inline;
position: absolute;
right: 6px;
top: 20px;
font-size: 14px;
}
li.drop-down > ul {
left: 0px;
min-width: 230px;
}
.drop-down-ul {
display: none;
}
.flyout-right > ul, .flyout-left > ul {
top: 0;
min-width: 230px;
display: none;
border-left: 1px solid #365670;
}
li.drop-down > ul > li > a, .flyout-right ul > li > a, .flyout-left ul > li > a {
color: #fff;
display: block;
padding: 20px 22px;
text-decoration: none;
background-color: #365670;
border-bottom: 1px dotted #547787;
-webkit-transition: color 0.2s linear, background 0.2s linear;
-moz-transition: color 0.2s linear, background 0.2s linear;
-o-transition: color 0.2s linear, background 0.2s linear;
transition: color 0.2s linear, background 0.2s linear;
}
.flyout-right ul > li > a, .flyout-left ul > li > a {
border-bottom: 1px dotted #B8C7BC;
}
.flyout-mega-wrap {
top: 0;
right: 0;
left: 100%;
width: 100%;
display: none;
height: 100%;
padding: 15px;
min-width: 742px;
}
h4.row.mega-title {
color: #838383;
margin-top: 0px;
font-size: 15px;
padding-bottom: 13px;
}
.flyout-mega ul > li > a {
font-size: 90%;
line-height: 25px;
color: #fff;
font-family: inherit;
}
.flyout-mega ul > li > a:hover, .flyout-mega ul > li > a:active, .flyout-mega ul > li > a:focus {
text-decoration: none;
background-color: transparent !important;
color: #ccc !important
}
.animated.fadeIn.mega-menu {
margin-top: 0;
}
.mega-menu {
left: 0;
right: 0;
width: 100vw;
display: none;
position: fixed;
padding-top: 0;
padding-top: 10px;
}
.mega-menu-wrap {
background-color: white;
}
.mm-mega-menu-wrap {
box-shadow: 3px 3px 10px 0 rgb(206 206 206 / 51%);
}
h4.row.mega-title {
color: #838383;
margin-top: 0px;
font-size: 15px;
padding-bottom: 13px;
padding-top: 23px;
}
.mega-menu ul li a {
line-height: 25px;
font-size: 15px;
color: black;
font-weight: 600;
display: block;
}
ul.stander li a {
padding: 3px 0px;
}
ul.description li {
padding-bottom: 12px;
line-height: 8px;
}
ul.description li span {
color: #ccc;
font-size: 85%;
}
a.view-more {
border-radius: 1px;
margin-top: 15px;
background-color: #009FE1;
padding: 2px 10px !important;
line-height: 21px !important;
display: inline-block !important;
}
a.view-more:hover {
color: #fff;
background: #0DADEF;
}
ul.icon-des li a i {
color: #fff;
width: 35px;
height: 35px;
border-radius: 50%;
text-align: center;
background-color: #009FE1;
line-height: 35px !important;
}
ul.icon-des li {
width: 100%;
display: table;
margin-bottom: 11px;
}
/*Blog DropDown*/
.Blog {
left: 0;
display: none;
color: #fefefe;
padding-top: 15px;
background: #547787;
padding-bottom: 15px;
}
.Blog .blog-title {
color: #fff;
font-size: 15px;
text-transform: uppercase;
}
.Blog .blog-des {
color: #ccc;
font-size: 90%;
margin-top: 15px;
}
.Blog a.view-more {
margin-top: 0px;
}
/*Images*/
.Images {
left: 0;
width: 100%;
display: none;
color: #fefefe;
padding-top: 15px;
background: #547787;
padding-bottom: 15px;
}
.Images h4 {
font-size: 15px;
margin-top: 0px;
text-transform: uppercase;
}
/*common*/
.flyout-right ul > li > a, .flyout-left ul > li > a, .flyout-mega-wrap {
background-color: white;
}
/*hover*/
.Blog:hover, .Images:hover, .mega-menu:hover, .drop-down-ul:hover, li.flyout-left > ul:hover, li.flyout-right > ul:hover, .flyout-mega-wrap:hover, li.flyout-left a:hover + ul, li.flyout-right a:hover + ul, .blog-drop-down > a:hover + .Blog, li.drop-down > a:hover + .drop-down-ul, .images-drop-down > a:hover + .Images, .mega-drop-down a:hover + .mega-menu, li.flyout-mega > a:hover + .flyout-mega-wrap {
display: block;
}
a.toggle-menu {
position: absolute;
right: 10px;
padding: 20px;
font-size: 27px;
color: black;
top: 0px;
transform: rotate(90deg);
margin-top: -13px;
}
.fl-node-5dafd29034e78 {
z-index: 210 !important;
position: relative;
}
.megamenusip, .mega-menu, .Images, .Blog, .flyout-right > ul, .flyout-left > ul, li.drop-down > ul {
z-index: 200;
}
.circle_image02 {
opacity: 1.0 !important;
filter: alpha(opacity=50) !important; /* For IE8 and earlier */
}
.circle_image02:hover {
opacity: 0.5 !important;
filter: alpha(opacity=100) !important; /* For IE8 and earlier */
}
.mega-menu-wrap li {
margin-bottom: 22px;
padding-right: 30px;
}
.mm-mm-icon {
vertical-align: top;
margin-right: 14px;
width: 32;
height: 32;
}
.mm-mm-subtext {
display: inline-block;
margin-left: 46px;
font-size: 13px;
}
.mega-drop-down > a > span::after {
font-family: 'Font Awesome\ 5 Free';
content: '\f107';
padding-left: 5px;
}
.mega-drop-down > a > span.hover::after {
font-family: 'Font Awesome\ 5 Free';
content: '\f106';
}
.mega-drop-down > a > span.hover, .mega-drop-down > a:active {
color: #23ADF8;
}
.mm-grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
.mm-grid div:nth-of-type(2) {
padding: 10px 10px 10px 35px;
}
.mm-mm-video {
display: inline-block;
background-color: white;
border: 2px solid #EDEDED;
margin-top: 17px;
padding: 13px;
border-radius: 24px;
height: 47px;
width: 161px;
}
.mm-mm-video:hover {
background-color: #23ADF8;
border-color: #23ADF8;
}
.mm-mm-video a {
color: #23ADF8;
}
.mm-mm-video:hover a {
color: white;
}
.mm-mm-video:hover img {
filter: invert(42%) brightness(180%) contrast(180%);
}
.mega-drop-down a:hover + .mega-menu.hide-block {
display: none;
}
.mm-mm-flyout {
display: inline-block;
width: 100%;
font-size: 15px;
}
.animated.mega-menu {
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
}
.mega-menu ul li a:hover {
color: #23ADF8;
}
.container-fluid {
padding-left: 0;
padding-right: 0;
}
.mm-grid {
width: 400px;
max-width: 100%;
}
h4.row.mega-title {
padding-left: 0;
}
.row .col-md-2, .row .col-md-3, .row .col-md-4 {
padding-left: 0;
padding-right: 0;
}
#media (min-width: 1349px) {
.fl-node-5dafd29034e79 {
width: 16%;
}
.fl-node-g84bp2nweskf {
width: 3%;
}
}
#media (min-width: 1300px) {
.mega-menu-wrap {
width: 1280px;
margin: auto;
}
}
#media (max-width: 1299px) {
.mega-menu-wrap {
width: 100%;
}
}
#media (min-width: 1252px) {
.exo-menu > li > a {
display: block;
padding: 30px 22px 32px;
}
}
#media (max-width: 1251px) {
.exo-menu > li > a {padding: 30px 15px 32px;}
}
#media (max-width: 1199px) {
.mega-menu {
width: 100vw;
}
}
#media (max-width: 1151px) {
.fl-col-group-equal-height .fl-col.fl-node-5dafd77b08a6a {display: none;}
}
#media (max-width: 1025px) {
.fl-col-group-equal-height .fl-col.fl-node-5e6078af59549 {display: none;}
}
#media (min-width: 992px) {
.exo-menu > li:nth-child(1) > a {
padding-left: 0;
}
.col-md-2 {
width: 16.66666667%;
float: left;
}
.col-md-3 {
width: 25%;
float: left;
padding-left: 0;
}
.col-md-4 {
width: 33.33333333%;
float: left;
}
}
#media (max-width: 991px) {
.empty {
display: none;
}
}
#media (min-width: 789px) and (max-width: 800px) {
.exo-menu > li > a {
padding: 30px 12px 32px;
}
}
#media (min-width: 769px) {
.mm-grid {
margin-bottom: 27px;
}
#mm-button-group {display: none;}
}
#media (min-width: 768px) {
.mega-menu, .flyout-mega-wrap, .Images, .Blog, .flyout-right > ul, .flyout-left > ul, li.drop-down > ul {
position: fixed;
margin-top: 0;
}
.flyout-right > ul {
left: 100%;
}
.flyout-left > ul {
right: 100%;
}
.mega-menu-wrap .row {
margin-right: 0;
margin-left: 0;
padding: 0 15px;
}
}
#media (max-width: 768px) {
.fl-builder-content .fl-node-5dafd29034e79 {
width: calc(100vw - 130px) !important;
}
.fl-builder-content .fl-node-5dafd29034e7a {
width: 130px !important;
}
.fl-builder-content .fl-node-g84bp2nweskf {display: none;}
.fl-node-5dafd2ede7f58 > .fl-module-content {
margin-left: 0;
}
.exo-menu {
min-height: 58px;
width: 100%;
}
.mega-menu {
padding: 15px;
}
.animated.mega-menu {
padding-left: 22px;
padding-right: 22px;
margin-left: -22px;
margin-right: -22px;
}
.mm-mega-menu-wrap {
box-shadow: none;
}
.mega-menu-wrap {
background-color: transparent;
}
ul.exo-menu.display {
/*width: 100vw;*/
left: 0;
position: relative;
margin-top: 25px;
background-color: white;
min-height: calc(100vh - 238px);
}
a.toggle-menu {
right: 0;
top: 0;
}
.mega-drop-down > a > span::after {
float: right;
padding-right: 6px;
}
.exo-menu.display a.toggle-menu span {
display: none;
}
.exo-menu.display a.toggle-menu {
position: absolute;
right: 21px;
padding: 20px 4px;
font-size: 27px;
margin-top: -70px;
color: #212121;
}
.exo-menu.display a.toggle-menu:hover, a.toggle-menu:hover {
color: #212121;
}
.exo-menu.display a.toggle-menu:before {
display: block !important;
font-family: 'Font Awesome\ 5 Free';
content: '\f00d';
transform: rotate(90deg);
color: #B2B2B2;
font-weight: 900;
margin-top: 20px;
margin-right: -48px;
}
.exo-menu > li > a {
display: none;
padding: 30px 8px 32px;
}
.exo-menu > li {
margin-left: auto;
margin-right: auto;
border-bottom: 1px solid #EDEDED;
}
.exo-menu > li.mm-li-button {
border-bottom: none;
}
.display.exo-menu > li {
width: calc(100vw - 44px);
display: block;
float: none;
}
.display.exo-menu > li > a {
display: block;
padding: 20px 0;
font-size: 24px;
}
.mega-menu, .Images, .Blog, .flyout-right > ul, .flyout-left > ul, li.drop-down > ul {
position: relative;
}
.mega-menu {
background-color: #F8F8F8;
}
#menu-item-1225 {
margin-top: -5px;
}
.fl-builder-content .fl-node-5dafd29034e7a {
width: 40px !important;
}
#see-all-features {content: url('https://global-site.local/wp-content/uploads/2022/02/what-is-digital-signage-mobile.jpg');}
#just-4-steps {content: url('https://global-site.local/wp-content/uploads/2022/02/Just-4-steps-to-get-digital-signage-for-your-business-mobile.jpg');}
.mega-menu.hide-block {
display: none !important;
}
#mm-button-group {display: none;}
#mm-button-group .mm-mm-button a.fl-button {
font-family: Poppins, sans-serif;
font-weight: 600;
font-size: 16px;
border: 1px solid #23ADF8 !important;
background-color: white !important;
background-clip: border-box;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
width: 100%;
text-align: center;
/*margin: 10px 0;*/
}
.fl-page #mm-mm-button-2 .mm-mm-button a.fl-button {
border: 1px solid #EDEDED !important;
}
.fl-page .mm-mm-button a.fl-button span {
color: #23ADF8 !important;
}
#mm-button-group {
position: relative;
bottom: -5px;
list-style-type: none;
padding-left: 0;
width: 100%;
background-color: white;
padding-bottom: 24px;
}
#mm-button-group li {
padding: 10px 0 0 0;
background-color: white;
}
.container-fluid.megamenusip {
display: flex;
flex-direction: column;
flex-wrap: wrap;
position: absolute;
left: 0;
width: 100vw;
min-height: 100vh;
}
h4.row.mega-title {padding-top: 11px;}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="header-top">
<div class="container-fluid megamenusip">
<ul class="exo-menu">
<li class="mega-drop-down"><span>Product</span>
<div class="animated fadeIn mega-menu hide-block">
<div class="mm-mega-menu-wrap">
<div class="mega-menu-wrap">
<div class="row">
<div class="col-md-3">
<h4 class="row mega-title">Instant Digital Signage Platform</h4>
<ul class="cabeza">
<li><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-features.svg" alt="features" class="mm-mm-icon" />Features <span class="mm-mm-subtext">See all the features packed into this powerful digital signage platform.</span></li>
<li><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-templates.svg" alt="templates" class="mm-mm-icon" />Templates <span class="mm-mm-subtext">1000’s of professionally designed templates for every business.</span></li>
</ul>
</div>
<div class="col-md-3">
<h4 class="row mega-title empty"> </h4>
<ul class="corporal">
<li><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-how-it-works.svg" alt="templates" class="mm-mm-icon" />How it Works <span class="mm-mm-subtext">Find out how easy it is to get digital signage for your business.</span></li>
<li><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-industries.svg" alt="templates" class="mm-mm-icon" />Industries <span class="mm-mm-subtext">Digital signage is perfect for any business with tailored solutions.</span></li>
</ul>
</div>
<div class="col-md-2">
<h4 class="row mega-title">Get the Player</h4>
<ul class="manos">
<li>Hardware</li>
<li>Player Software</li>
</ul>
</div>
<div class="col-md-4">
<h4 class="row mega-title">What is Instant Digital Signage?</h4>
<div class="mm-grid">
<div><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/what-is-digital-signage.jpg" alt="What is Instant Digital Signage?" style="width: 100%;" id="see-all-features"/></div>
<div><span class="mm-mm-flyout"> Get an overview of how easy it is to get digital signage</span><br />
<button class="mm-mm-video">
<img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-play.svg" alt="play video" title="play video"> Play Video
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="mega-drop-down"><span>Solutions</span>
<div class="animated fadeIn mega-menu hide-block">
<div class="mm-mega-menu-wrap">
<div class="mega-menu-wrap">
<div class="row">
<div class="col-md-3">
<h4 class="row mega-title">Industries</h4>
<ul class="cabeza">
<li><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-hospitality.svg" alt="features" class="mm-mm-icon" />Hospitality <span class="mm-mm-subtext">Cafe, Restaurant, Fast Food…</span></li>
<li><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-retail.svg" alt="templates" class="mm-mm-icon" />Retail <span class="mm-mm-subtext">Cafe, Restaurant, Fast Food…</span></li>
<li><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-hair-beauty.svg" alt="templates" class="mm-mm-icon" />Hair & Beauty <span class="mm-mm-subtext">Hair Salons, Nail Salon, Laser…</span></li>
</ul>
</div>
<div class="col-md-3">
<h4 class="row mega-title empty"> </h4>
<ul class="cabeza">
<li><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-medical.svg" alt="features" class="mm-mm-icon" />Medical <span class="mm-mm-subtext">Cafe, Restaurant, Fast Food…</span></li>
<li><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-fitness.svg" alt="templates" class="mm-mm-icon" />Fitness <span class="mm-mm-subtext">Cafe, Restaurant, Fast Food…</span></li>
<li><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-more.svg" alt="templates" class="mm-mm-icon" />More <span class="mm-mm-subtext">We have solutions for all industries…</span></li>
</ul>
</div>
<div class="col-md-3">
<h4 class="row mega-title">Use Cases</h4>
<ul class="manos">
<li>Digital Menu Boards</li>
<li>Window Signage</li>
<li>In-Store Signage</li>
</ul>
</div>
<div class="col-md-3">
<h4 class="row mega-title">About Mandoe</h4>
<ul class="manos">
<li>Enterprise</li>
<li>Customers</li>
<li>Partner Program</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="mega-drop-down"><span>Resources</span>
<div class="animated fadeIn mega-menu hide-block">
<div class="mm-mega-menu-wrap">
<div class="mega-menu-wrap">
<div class="row">
<div class="col-md-3">
<h4 class="row mega-title">Learn about the product</h4>
<ul class="cabeza">
<li><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-blog.svg" alt="features" class="mm-mm-icon" />Blog <span class="mm-mm-subtext">Ultimate Guides for getting started, news, updates and much more.</span></li>
<li><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-case-studies.svg" alt="templates" class="mm-mm-icon" />Case Studies <span class="mm-mm-subtext">See how our customers have found success in their journey with us.</span></li>
</ul>
</div>
<div class="col-md-3">
<h4 class="row mega-title empty"> </h4>
<ul class="corporal">
<li><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-help-centre.svg" alt="templates" class="mm-mm-icon" />Help Centre <span class="mm-mm-subtext">Learn how to get started, create content, manage schedules & more.</span></li>
</ul>
</div>
<div class="col-md-2">
<h4 class="row mega-title">Get in Touch</h4>
<ul class="manos">
<li>About</li>
<li>Contact</li>
<li>Support</li>
</ul>
</div>
<div class="col-md-4">
<h4 class="row mega-title">Learn how it works</h4>
<div class="mm-grid">
<div><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/Just-4-steps-to-get-digital-signage-for-your-business.jpg" alt="Just 4 steps to get digital signage for your business" style="width: 100%;" id="just-4-steps" /></div>
<div><span class="mm-mm-flyout">Just 4 steps to get digital signage for your business</span><br />
<button class="mm-mm-video">
<img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-play.svg" alt="play video" title="play video"> Play Video
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li>Pricing</li>
<span>|||</span>
</ul>
<ul id="mm-button-group">
<li class="mm-li-button" id="mm-mm-button-1">
<div class="fl-button-wrap mm-mm-button">
<a href="https://sandbox.mandoemedia.com/signup?origin=mktg_portal" target="_self" class="fl-button" role="button">
<span class="fl-button-text">Start Free Trial</span>
</a>
</div>
</li>
<li class="mm-li-button" id="mm-mm-button-2">
<div class="fl-button-wrap mm-mm-button">
<a href="https://activate.mandoemedia.com" target="_self" class="fl-button" role="button">
<span class="fl-button-text">Log In</span>
</a>
</div>
</li>
</ul>
</div>
</div>

Remove display: none; from .mega-menu:
.mega-menu {
left: 0;
right: 0;
width: 100vw;
/*display: none;*/
position: fixed;
padding-top: 0;
padding-top: 10px;
}
Also, use same method to toggle menus for both hover and click handlers. Using different methods for both makes things complicated. I've used .mega-menu.hide-block for both small and wide screens in following demo:
Demo on codesandbox
$(document).ready(function() {
$(".mega-drop-down").hover(function() {
if (window.innerWidth > 768) {
showMenu(this);
}
});
$(".mega-drop-down").on("click", function() {
if (window.innerWidth <= 768) {
showMenu(this);
}
});
$(".toggle-menu").click(function() {
$(".exo-menu").toggleClass("display");
$("#mm-button-group").toggle();
$(".mega-menu").addClass("hide-block");
});
});
function showMenu(self) {
$(".mega-menu")
.not($(self).children(".mega-menu").toggleClass("hide-block"))
.addClass("hide-block");
$(self).find("a span").toggleClass("hover");
$(".exo-menu")
.find("a span")
.not($(self).find("a span"))
.removeClass("hover");
}
.fl-builder-content[data-type="header"].fl-theme-builder-header-sticky {
z-index: 1000;
}
ul.exo-menu {
list-style: none;
margin: 0;
padding: 0;
}
ul.cabeza,
ul.manos,
ul.corporal {
list-style-type: none;
padding: 0;
}
/*.container-fluid.megamenusip {
width: 1200px;
}*/
.content {
margin: 50px 100px 0px 100px;
}
.mega-menu-wrap .row {
margin-right: 0;
margin-left: 0;
padding-left: 0;
padding-right: 0;
}
.exo-menu {
float: none;
margin: auto;
list-style: none;
position: relative;
}
.exo-menu>li {
display: inline-block;
float: left;
position: relative;
}
.exo-menu>li>a {
color: black;
font-size: 15px;
font-weight: 600;
text-decoration: none;
}
.exo-menu>li>a:hover {
color: #23ADF8;
}
.exo-menu i {
float: left;
font-size: 18px;
margin-right: 6px;
line-height: 20px !important;
}
li.drop-down,
.flyout-right,
.flyout-left {
position: relative;
}
li.drop-down:before {
content: "f103";
color: #fff;
font-family: FontAwesome;
font-style: normal;
display: inline;
position: absolute;
right: 6px;
top: 20px;
font-size: 14px;
}
li.drop-down>ul {
left: 0px;
min-width: 230px;
}
.drop-down-ul {
display: none;
}
.flyout-right>ul,
.flyout-left>ul {
top: 0;
min-width: 230px;
display: none;
border-left: 1px solid #365670;
}
li.drop-down>ul>li>a,
.flyout-right ul>li>a,
.flyout-left ul>li>a {
color: #fff;
display: block;
padding: 20px 22px;
text-decoration: none;
background-color: #365670;
border-bottom: 1px dotted #547787;
-webkit-transition: color 0.2s linear, background 0.2s linear;
-moz-transition: color 0.2s linear, background 0.2s linear;
-o-transition: color 0.2s linear, background 0.2s linear;
transition: color 0.2s linear, background 0.2s linear;
}
.flyout-right ul>li>a,
.flyout-left ul>li>a {
border-bottom: 1px dotted #B8C7BC;
}
.flyout-mega-wrap {
top: 0;
right: 0;
left: 100%;
width: 100%;
display: none;
height: 100%;
padding: 15px;
min-width: 742px;
}
h4.row.mega-title {
color: #838383;
margin-top: 0px;
font-size: 15px;
padding-bottom: 13px;
}
.flyout-mega ul>li>a {
font-size: 90%;
line-height: 25px;
color: #fff;
font-family: inherit;
}
.flyout-mega ul>li>a:hover,
.flyout-mega ul>li>a:active,
.flyout-mega ul>li>a:focus {
text-decoration: none;
background-color: transparent !important;
color: #ccc !important
}
.animated.fadeIn.mega-menu {
margin-top: 0;
}
.mega-menu {
left: 0;
right: 0;
width: 100vw;
/*display: none;*/
position: fixed;
padding-top: 0;
padding-top: 10px;
}
.mega-menu-wrap {
background-color: white;
}
.mm-mega-menu-wrap {
box-shadow: 3px 3px 10px 0 rgb(206 206 206 / 51%);
}
h4.row.mega-title {
color: #838383;
margin-top: 0px;
font-size: 15px;
padding-bottom: 13px;
padding-top: 23px;
}
.mega-menu ul li a {
line-height: 25px;
font-size: 15px;
color: black;
font-weight: 600;
display: block;
}
ul.stander li a {
padding: 3px 0px;
}
ul.description li {
padding-bottom: 12px;
line-height: 8px;
}
ul.description li span {
color: #ccc;
font-size: 85%;
}
a.view-more {
border-radius: 1px;
margin-top: 15px;
background-color: #009FE1;
padding: 2px 10px !important;
line-height: 21px !important;
display: inline-block !important;
}
a.view-more:hover {
color: #fff;
background: #0DADEF;
}
ul.icon-des li a i {
color: #fff;
width: 35px;
height: 35px;
border-radius: 50%;
text-align: center;
background-color: #009FE1;
line-height: 35px !important;
}
ul.icon-des li {
width: 100%;
display: table;
margin-bottom: 11px;
}
/*Blog DropDown*/
.Blog {
left: 0;
display: none;
color: #fefefe;
padding-top: 15px;
background: #547787;
padding-bottom: 15px;
}
.Blog .blog-title {
color: #fff;
font-size: 15px;
text-transform: uppercase;
}
.Blog .blog-des {
color: #ccc;
font-size: 90%;
margin-top: 15px;
}
.Blog a.view-more {
margin-top: 0px;
}
/*Images*/
.Images {
left: 0;
width: 100%;
display: none;
color: #fefefe;
padding-top: 15px;
background: #547787;
padding-bottom: 15px;
}
.Images h4 {
font-size: 15px;
margin-top: 0px;
text-transform: uppercase;
}
/*common*/
.flyout-right ul>li>a,
.flyout-left ul>li>a,
.flyout-mega-wrap {
background-color: white;
}
/*hover*/
.Blog:hover,
.Images:hover,
.mega-menu:hover,
.drop-down-ul:hover,
li.flyout-left>ul:hover,
li.flyout-right>ul:hover,
.flyout-mega-wrap:hover,
li.flyout-left a:hover+ul,
li.flyout-right a:hover+ul,
.blog-drop-down>a:hover+.Blog,
li.drop-down>a:hover+.drop-down-ul,
.images-drop-down>a:hover+.Images,
.mega-drop-down a:hover+.mega-menu,
li.flyout-mega>a:hover+.flyout-mega-wrap {
display: block;
}
a.toggle-menu {
position: absolute;
right: 10px;
padding: 20px;
font-size: 27px;
color: black;
top: 0px;
transform: rotate(90deg);
margin-top: -13px;
}
.fl-node-5dafd29034e78 {
z-index: 210 !important;
position: relative;
}
.megamenusip,
.mega-menu,
.Images,
.Blog,
.flyout-right>ul,
.flyout-left>ul,
li.drop-down>ul {
z-index: 200;
}
.circle_image02 {
opacity: 1.0 !important;
filter: alpha(opacity=50) !important;
/* For IE8 and earlier */
}
.circle_image02:hover {
opacity: 0.5 !important;
filter: alpha(opacity=100) !important;
/* For IE8 and earlier */
}
.mega-menu-wrap li {
margin-bottom: 22px;
padding-right: 30px;
}
.mm-mm-icon {
vertical-align: top;
margin-right: 14px;
width: 32;
height: 32;
}
.mm-mm-subtext {
display: inline-block;
margin-left: 46px;
font-size: 13px;
}
.mega-drop-down>a>span::after {
font-family: 'Font Awesome\ 5 Free';
content: '\f107';
padding-left: 5px;
}
.mega-drop-down>a>span.hover::after {
font-family: 'Font Awesome\ 5 Free';
content: '\f106';
}
.mega-drop-down>a>span.hover,
.mega-drop-down>a:active {
color: #23ADF8;
}
.mm-grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
.mm-grid div:nth-of-type(2) {
padding: 10px 10px 10px 35px;
}
.mm-mm-video {
display: inline-block;
background-color: white;
border: 2px solid #EDEDED;
margin-top: 17px;
padding: 13px;
border-radius: 24px;
height: 47px;
width: 161px;
}
.mm-mm-video:hover {
background-color: #23ADF8;
border-color: #23ADF8;
}
.mm-mm-video a {
color: #23ADF8;
}
.mm-mm-video:hover a {
color: white;
}
.mm-mm-video:hover img {
filter: invert(42%) brightness(180%) contrast(180%);
}
.mega-drop-down a:hover+.mega-menu.hide-block {
display: none;
}
.mm-mm-flyout {
display: inline-block;
width: 100%;
font-size: 15px;
}
.animated.mega-menu {
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
}
.mega-menu ul li a:hover {
color: #23ADF8;
}
.container-fluid {
padding-left: 0;
padding-right: 0;
}
.mm-grid {
width: 400px;
max-width: 100%;
}
h4.row.mega-title {
padding-left: 0;
}
.row .col-md-2,
.row .col-md-3,
.row .col-md-4 {
padding-left: 0;
padding-right: 0;
}
#media (min-width: 1349px) {
.fl-node-5dafd29034e79 {
width: 16%;
}
.fl-node-g84bp2nweskf {
width: 3%;
}
}
#media (min-width: 1300px) {
.mega-menu-wrap {
width: 1280px;
margin: auto;
}
}
#media (max-width: 1299px) {
.mega-menu-wrap {
width: 100%;
}
}
#media (min-width: 1252px) {
.exo-menu>li>a {
display: block;
padding: 30px 22px 32px;
}
}
#media (max-width: 1251px) {
.exo-menu>li>a {
padding: 30px 15px 32px;
}
}
#media (max-width: 1199px) {
.mega-menu {
width: 100vw;
}
}
#media (max-width: 1151px) {
.fl-col-group-equal-height .fl-col.fl-node-5dafd77b08a6a {
display: none;
}
}
#media (max-width: 1025px) {
.fl-col-group-equal-height .fl-col.fl-node-5e6078af59549 {
display: none;
}
}
#media (min-width: 992px) {
.exo-menu>li:nth-child(1)>a {
padding-left: 0;
}
.col-md-2 {
width: 16.66666667%;
float: left;
}
.col-md-3 {
width: 25%;
float: left;
padding-left: 0;
}
.col-md-4 {
width: 33.33333333%;
float: left;
}
}
#media (max-width: 991px) {
.empty {
display: none;
}
}
#media (min-width: 789px) and (max-width: 800px) {
.exo-menu>li>a {
padding: 30px 12px 32px;
}
}
#media (min-width: 769px) {
.mm-grid {
margin-bottom: 27px;
}
#mm-button-group {
display: none;
}
}
#media (min-width: 768px) {
.mega-menu,
.flyout-mega-wrap,
.Images,
.Blog,
.flyout-right>ul,
.flyout-left>ul,
li.drop-down>ul {
position: fixed;
margin-top: 0;
}
.flyout-right>ul {
left: 100%;
}
.flyout-left>ul {
right: 100%;
}
.mega-menu-wrap .row {
margin-right: 0;
margin-left: 0;
padding: 0 15px;
}
}
.mega-menu.hide-block {
display: none !important;
}
#media (max-width: 768px) {
.fl-builder-content .fl-node-5dafd29034e79 {
width: calc(100vw - 130px) !important;
}
.fl-builder-content .fl-node-5dafd29034e7a {
width: 130px !important;
}
.fl-builder-content .fl-node-g84bp2nweskf {
display: none;
}
.fl-node-5dafd2ede7f58>.fl-module-content {
margin-left: 0;
}
.exo-menu {
min-height: 58px;
width: 100%;
}
.mega-menu {
padding: 15px;
}
.animated.mega-menu {
padding-left: 22px;
padding-right: 22px;
margin-left: -22px;
margin-right: -22px;
}
.mm-mega-menu-wrap {
box-shadow: none;
}
.mega-menu-wrap {
background-color: transparent;
}
ul.exo-menu.display {
/*width: 100vw;*/
left: 0;
position: relative;
margin-top: 25px;
background-color: white;
min-height: calc(100vh - 238px);
}
a.toggle-menu {
right: 0;
top: 0;
}
.mega-drop-down>a>span::after {
float: right;
padding-right: 6px;
}
.exo-menu.display a.toggle-menu span {
display: none;
}
.exo-menu.display a.toggle-menu {
position: absolute;
right: 21px;
padding: 20px 4px;
font-size: 27px;
margin-top: -70px;
color: #212121;
}
.exo-menu.display a.toggle-menu:hover,
a.toggle-menu:hover {
color: #212121;
}
.exo-menu.display a.toggle-menu:before {
display: block !important;
font-family: 'Font Awesome\ 5 Free';
content: '\f00d';
transform: rotate(90deg);
color: #B2B2B2;
font-weight: 900;
margin-top: 20px;
margin-right: -48px;
}
.exo-menu>li>a {
display: none;
padding: 30px 8px 32px;
}
.exo-menu>li {
margin-left: auto;
margin-right: auto;
border-bottom: 1px solid #EDEDED;
}
.exo-menu>li.mm-li-button {
border-bottom: none;
}
.display.exo-menu>li {
width: calc(100vw - 44px);
display: block;
float: none;
}
.display.exo-menu>li>a {
display: block;
padding: 20px 0;
font-size: 24px;
}
.mega-menu,
.Images,
.Blog,
.flyout-right>ul,
.flyout-left>ul,
li.drop-down>ul {
position: relative;
}
.mega-menu {
background-color: #F8F8F8;
}
#menu-item-1225 {
margin-top: -5px;
}
.fl-builder-content .fl-node-5dafd29034e7a {
width: 40px !important;
}
#see-all-features {
content: url('https://global-site.local/wp-content/uploads/2022/02/what-is-digital-signage-mobile.jpg');
}
#just-4-steps {
content: url('https://global-site.local/wp-content/uploads/2022/02/Just-4-steps-to-get-digital-signage-for-your-business-mobile.jpg');
}
#mm-button-group {
display: none;
}
#mm-button-group .mm-mm-button a.fl-button {
font-family: Poppins, sans-serif;
font-weight: 600;
font-size: 16px;
border: 1px solid #23ADF8 !important;
background-color: white !important;
background-clip: border-box;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
width: 100%;
text-align: center;
/*margin: 10px 0;*/
}
.fl-page #mm-mm-button-2 .mm-mm-button a.fl-button {
border: 1px solid #EDEDED !important;
}
.fl-page .mm-mm-button a.fl-button span {
color: #23ADF8 !important;
}
#mm-button-group {
position: relative;
bottom: -5px;
list-style-type: none;
padding-left: 0;
width: 100%;
background-color: white;
padding-bottom: 24px;
}
#mm-button-group li {
padding: 10px 0 0 0;
background-color: white;
}
.container-fluid.megamenusip {
display: flex;
flex-direction: column;
flex-wrap: wrap;
position: absolute;
left: 0;
width: 100vw;
min-height: 100vh;
}
h4.row.mega-title {
padding-top: 11px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="header-top">
<div class="container-fluid megamenusip">
<ul class="exo-menu">
<li class="mega-drop-down"><span>Product</span>
<div class="animated fadeIn mega-menu hide-block">
<div class="mm-mega-menu-wrap">
<div class="mega-menu-wrap">
<div class="row">
<div class="col-md-3">
<h4 class="row mega-title">Instant Digital Signage Platform</h4>
<ul class="cabeza">
<li>
<img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-features.svg" alt="features" class="mm-mm-icon" />Features <span class="mm-mm-subtext">See all the features packed into this powerful digital signage platform.</span></li>
<li>
<img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-templates.svg" alt="templates" class="mm-mm-icon" />Templates <span class="mm-mm-subtext">1000’s of professionally designed templates for every business.</span></li>
</ul>
</div>
<div class="col-md-3">
<h4 class="row mega-title empty"> </h4>
<ul class="corporal">
<li>
<img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-how-it-works.svg" alt="templates" class="mm-mm-icon" />How it Works <span class="mm-mm-subtext">Find out how easy it is to get digital signage for your business.</span></li>
<li>
<img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-industries.svg" alt="templates" class="mm-mm-icon" />Industries <span class="mm-mm-subtext">Digital signage is perfect for any business with tailored solutions.</span></li>
</ul>
</div>
<div class="col-md-2">
<h4 class="row mega-title">Get the Player</h4>
<ul class="manos">
<li>Hardware</li>
<li>Player Software</li>
</ul>
</div>
<div class="col-md-4">
<h4 class="row mega-title">What is Instant Digital Signage?</h4>
<div class="mm-grid">
<div><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/what-is-digital-signage.jpg" alt="What is Instant Digital Signage?" style="width: 100%;" id="see-all-features" /></div>
<div><span class="mm-mm-flyout"> Get an overview of how easy it is to get digital signage</span><br />
<button class="mm-mm-video">
<img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-play.svg" alt="play video" title="play video"> Play Video
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="mega-drop-down"><span>Solutions</span>
<div class="animated fadeIn mega-menu hide-block">
<div class="mm-mega-menu-wrap">
<div class="mega-menu-wrap">
<div class="row">
<div class="col-md-3">
<h4 class="row mega-title">Industries</h4>
<ul class="cabeza">
<li>
<img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-hospitality.svg" alt="features" class="mm-mm-icon" />Hospitality <span class="mm-mm-subtext">Cafe, Restaurant, Fast Food…</span></li>
<li>
<img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-retail.svg" alt="templates" class="mm-mm-icon" />Retail <span class="mm-mm-subtext">Cafe, Restaurant, Fast Food…</span></li>
<li>
<img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-hair-beauty.svg" alt="templates" class="mm-mm-icon" />Hair & Beauty <span class="mm-mm-subtext">Hair Salons, Nail Salon, Laser…</span></li>
</ul>
</div>
<div class="col-md-3">
<h4 class="row mega-title empty"> </h4>
<ul class="cabeza">
<li>
<img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-medical.svg" alt="features" class="mm-mm-icon" />Medical <span class="mm-mm-subtext">Cafe, Restaurant, Fast Food…</span></li>
<li>
<img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-fitness.svg" alt="templates" class="mm-mm-icon" />Fitness <span class="mm-mm-subtext">Cafe, Restaurant, Fast Food…</span></li>
<li>
<img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-more.svg" alt="templates" class="mm-mm-icon" />More <span class="mm-mm-subtext">We have solutions for all industries…</span></li>
</ul>
</div>
<div class="col-md-3">
<h4 class="row mega-title">Use Cases</h4>
<ul class="manos">
<li>Digital Menu Boards</li>
<li>Window Signage</li>
<li>In-Store Signage</li>
</ul>
</div>
<div class="col-md-3">
<h4 class="row mega-title">About Mandoe</h4>
<ul class="manos">
<li>Enterprise</li>
<li>Customers</li>
<li>Partner Program</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="mega-drop-down"><span>Resources</span>
<div class="animated fadeIn mega-menu hide-block">
<div class="mm-mega-menu-wrap">
<div class="mega-menu-wrap">
<div class="row">
<div class="col-md-3">
<h4 class="row mega-title">Learn about the product</h4>
<ul class="cabeza">
<li>
<img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-blog.svg" alt="features" class="mm-mm-icon" />Blog <span class="mm-mm-subtext">Ultimate Guides for getting started, news, updates and much more.</span></li>
<li>
<img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-case-studies.svg" alt="templates" class="mm-mm-icon" />Case Studies <span class="mm-mm-subtext">See how our customers have found success in their journey with us.</span></li>
</ul>
</div>
<div class="col-md-3">
<h4 class="row mega-title empty"> </h4>
<ul class="corporal">
<li>
<img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-help-centre.svg" alt="templates" class="mm-mm-icon" />Help Centre <span class="mm-mm-subtext">Learn how to get started, create content, manage schedules & more.</span></li>
</ul>
</div>
<div class="col-md-2">
<h4 class="row mega-title">Get in Touch</h4>
<ul class="manos">
<li>About</li>
<li>Contact</li>
<li>Support</li>
</ul>
</div>
<div class="col-md-4">
<h4 class="row mega-title">Learn how it works</h4>
<div class="mm-grid">
<div><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/Just-4-steps-to-get-digital-signage-for-your-business.jpg" alt="Just 4 steps to get digital signage for your business" style="width: 100%;" id="just-4-steps" /></div>
<div><span class="mm-mm-flyout">Just 4 steps to get digital signage for your business</span><br />
<button class="mm-mm-video">
<img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-play.svg" alt="play video" title="play video"> Play Video
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li>Pricing</li>
<span>|||</span>
</ul>
<ul id="mm-button-group">
<li class="mm-li-button" id="mm-mm-button-1">
<div class="fl-button-wrap mm-mm-button">
<a href="https://sandbox.mandoemedia.com/signup?origin=mktg_portal" target="_self" class="fl-button" role="button">
<span class="fl-button-text">Start Free Trial</span>
</a>
</div>
</li>
<li class="mm-li-button" id="mm-mm-button-2">
<div class="fl-button-wrap mm-mm-button">
<a href="https://activate.mandoemedia.com" target="_self" class="fl-button" role="button">
<span class="fl-button-text">Log In</span>
</a>
</div>
</li>
</ul>
</div>
</div>

How to position the next/prev buttons of my slideshow relative to the column they're in rather than the page? (Bonus: Make them circles?)

Okay, so. I have a slideshow on a page of my website. It's supposed to be in one column of my website. The images conform to the column just fine, but the buttons for "next" and "previous" do not. I want them to be on the left and right sides of the column they slideshow is in, and preferably centered vertically as well.
Bonus: Is there any way to make the next and prev buttons circles?
Here is a mock-up of what I'm envisioning for this page.
And here's my code:
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
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";
captionText.innerHTML = dots[slideIndex-1].alt;
}
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Mozart Armstrong Portfolio Homepage</title>
<style>
#font-face {
font-family: Klik;
src: url(klik-light-webfont.woff);
}
#font-face {
font-family: theBoldFont;
src: url(theboldfont.ttf);
}
.main {
margin-left: 200px;
padding: 0px 10px;
font-size: 16px;
font-family: Klik;
display: flex;
}
.main p {
font-size: 14px;
font-family: Klik;
color: #000000;
}
.main h1 {
font-size: 24px;
font-family: theBoldFont;
color: #000000;
}
.main a {
font-size: 12px;
font-family: Klik;
color: #808080;
}
.sidebar {
height: 100%;
width: 200px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #000000;
overflow-x: hidden;
padding-top: 20px;
}
.sidebar a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 16px;
font-family: Klik;
color: #ffffff;
display: block;
}
.sidebar a:hover {
color: #808080;
}
.sidebar b {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 28px;
font-family: theBoldFont;
color: #ffffff;
display: block;
}
.sidebar c {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 13px;
font-family: Klik;
color: #ffffff;
display: block;
}
.return {
padding: 5px 0px 5px 5px;
right: 0;
margin-left: 200px;
top: 0;
z-index: 2;
overflow-x: hidden;
background-color: #808080;
}
.return a {
width: 100%;
height: 0px;
text-decoration: none;
font-size: 12px;
font-family: Klik;
color: #000000;
display: inline-block;
}
.row {
display: -webkit-flex;
display: flex;
}
.column1 {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 10px;
margin-left: 200px;
}
.column2 {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 10px;
}
.column2 h1 {
font-family: theBoldFont;
font-size: 28px;
}
.column2 h {
font-family: theBoldFont;
}
.column2 p {
font-family: Klik;
}
/* Style the footer */
.footer {
background-color: #f1f1f1;
padding: 10px;
text-align: center;
margin-left: 200px;
font-family: Klik;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
#media (max-width: 600px) {
.row {
-webkit-flex-direction: column;
flex-direction: column;
}
}
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 40%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 42%;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
</style>
</head>
<body>
<div class="return">
<< Back
</div>
<div class="sidebar">
<b>Mozart</b>
<b>Armstrong</b>
<c>design • marketing • branding</c>
<b></b>
<b></b>
<b></b>
Graphic Design
Illustration
Animations
Photography
Writing
Fashion Design
<b></b>
<b></b>
About
</div>
<div class="row">
<div class="column1" style="background-color:#aaa;">
<div class="mySlides">
<center><img src="Block.png" style="width:75%"></center>
</div>
<div class="mySlides">
<center><img src="Block2.png" style="width:75%"></center>
</div>
<div class="mySlides">
<center><img src="Block3.png" style="width:75%"></center>
</div>
<div class="mySlides">
<center><img src="Block4.png" style="width:75%"></center>
</div>
<div class="mySlides">
<center><img src="Block5.png" style="width:75%"></center>
</div>
<div class="mySlides">
<center><img src="Block3.png" style="width:75%"></center>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<div class="column2" style="background-color:#bbb;">
<h1>This is the title of the design</h1>
<h>Date of Origin: </h><p>(e.g. Summer 2020)</p>
<h>Purpose: </h><p>(e.g. Freelance Commission)</p>
<h>Medium: </h><p>(e.g. Digital PDF)</p>
<h>Program(s) Utilized: </h><p>(e.g. Adobe Photoshop, Adobe InDesign)</p>
<h>Relevant to Positions: </h><p>(e.g. Freelance Graphic Designer)</p>
<h></h>
</div>
</div>
<div class="footer">
<p>Description of process and intention behind the work. Ique nulparunt, consed et ullacep tatur? Hilluptat esti ut velest, simus, nos et dionseq uidigenducia sequis aut aut vellabor a consequat venim eum res nos vendam si sus.
Menihil estias illest ipsae de doluptis apit fugiandae. Nonsequist, simus.
Fic tem re volupid mos es et et, exeris eata doles dollati busdam quati unt.
Ugitiosapis aborpore ea nonsed que velique milicii ssitiatem. Nequia seque as sinvella qui in poresti niment plique mod maio eossecatur? Uriatus.
Endunt res velest, officideliam doluptaspel ipis in cone secto ipsum quas mos autempos</p>
</div>
<script src="move.js"></script>
</body>
</html>

CSS:
column1 class has now property positon: relative;
prev and next both get property border-radius: 50%;
next class has now property right: 0%;
#font-face {
font-family: Klik;
src: url(klik-light-webfont.woff);
}
#font-face {
font-family: theBoldFont;
src: url(theboldfont.ttf);
}
.main {
margin-left: 200px;
padding: 0px 10px;
font-size: 16px;
font-family: Klik;
display: flex;
}
.main p {
font-size: 14px;
font-family: Klik;
color: #000000;
}
.main h1 {
font-size: 24px;
font-family: theBoldFont;
color: #000000;
}
.main a {
font-size: 12px;
font-family: Klik;
color: #808080;
}
.sidebar {
height: 100%;
width: 200px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #000000;
overflow-x: hidden;
padding-top: 20px;
}
.sidebar a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 16px;
font-family: Klik;
color: #ffffff;
display: block;
}
.sidebar a:hover {
color: #808080;
}
.sidebar b {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 28px;
font-family: theBoldFont;
color: #ffffff;
display: block;
}
.sidebar c {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 13px;
font-family: Klik;
color: #ffffff;
display: block;
}
.return {
padding: 5px 0px 5px 5px;
right: 0;
margin-left: 200px;
top: 0;
z-index: 2;
overflow-x: hidden;
background-color: #808080;
}
.return a {
width: 100%;
height: 0px;
text-decoration: none;
font-size: 12px;
font-family: Klik;
color: #000000;
display: inline-block;
}
.row {
display: -webkit-flex;
display: flex;
}
.column1 {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 10px;
margin-left: 200px;
position:relative;
}
.column2 {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 10px;
}
.column2 h1 {
font-family: theBoldFont;
font-size: 28px;
}
.column2 h {
font-family: theBoldFont;
}
.column2 p {
font-family: Klik;
}
/* Style the footer */
.footer {
background-color: #f1f1f1;
padding: 10px;
text-align: center;
margin-left: 200px;
font-family: Klik;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
#media (max-width: 600px) {
.row {
-webkit-flex-direction: column;
flex-direction: column;
}
}
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 40%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
border-radius: 50%;
user-select: none;
-webkit-user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0%;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}

I don't clearly understand what you mean by making them round. Is this what you wanted to achieve?
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
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";
captionText.innerHTML = dots[slideIndex-1].alt;
}
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Mozart Armstrong Portfolio Homepage</title>
<style>
#font-face {
font-family: Klik;
src: url(klik-light-webfont.woff);
}
#font-face {
font-family: theBoldFont;
src: url(theboldfont.ttf);
}
.main {
margin-left: 200px;
padding: 0px 10px;
font-size: 16px;
font-family: Klik;
display: flex;
}
.main p {
font-size: 14px;
font-family: Klik;
color: #000000;
}
.main h1 {
font-size: 24px;
font-family: theBoldFont;
color: #000000;
}
.main a {
font-size: 12px;
font-family: Klik;
color: #808080;
}
.sidebar {
height: 100%;
width: 200px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #000000;
overflow-x: hidden;
padding-top: 20px;
}
.sidebar a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 16px;
font-family: Klik;
color: #ffffff;
display: block;
}
.sidebar a:hover {
color: #808080;
}
.sidebar b {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 28px;
font-family: theBoldFont;
color: #ffffff;
display: block;
}
.sidebar c {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 13px;
font-family: Klik;
color: #ffffff;
display: block;
}
.return {
padding: 5px 0px 5px 5px;
right: 0;
margin-left: 200px;
top: 0;
z-index: 2;
overflow-x: hidden;
background-color: #808080;
}
.return a {
width: 100%;
height: 0px;
text-decoration: none;
font-size: 12px;
font-family: Klik;
color: #000000;
display: inline-block;
}
.row {
display: -webkit-flex;
display: flex;
}
.column1 {
-webkit-flex: 1;
position: relative;
-ms-flex: 1;
flex: 1;
padding: 10px;
margin-left: 200px;
}
.column2 {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 10px;
}
.column2 h1 {
font-family: theBoldFont;
font-size: 28px;
}
.column2 h {
font-family: theBoldFont;
}
.column2 p {
font-family: Klik;
}
/* Style the footer */
.footer {
background-color: #f1f1f1;
padding: 10px;
text-align: center;
margin-left: 200px;
font-family: Klik;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
#media (max-width: 600px) {
.row {
-webkit-flex-direction: column;
flex-direction: column;
}
}
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 40%;
box-sizing: border-box;
border-radius: 50%;
padding: 16px 22px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
-webkit-user-select: none;
box-sizing: border-box;
}
/* Position the "next button" to the right */
.next {
right: 0;
}
.prev {
left: 0;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
</style>
</head>
<body>
<div class="return">
<< Back
</div>
<div class="sidebar">
<b>Mozart</b>
<b>Armstrong</b>
<c>design • marketing • branding</c>
<b></b>
<b></b>
<b></b>
Graphic Design
Illustration
Animations
Photography
Writing
Fashion Design
<b></b>
<b></b>
About
</div>
<div class="row">
<div class="column1" style="background-color:#aaa;">
<div class="mySlides">
<center><img src="Block.png" style="width:75%"></center>
</div>
<div class="mySlides">
<center><img src="Block2.png" style="width:75%"></center>
</div>
<div class="mySlides">
<center><img src="Block3.png" style="width:75%"></center>
</div>
<div class="mySlides">
<center><img src="Block4.png" style="width:75%"></center>
</div>
<div class="mySlides">
<center><img src="Block5.png" style="width:75%"></center>
</div>
<div class="mySlides">
<center><img src="Block3.png" style="width:75%"></center>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<div class="column2" style="background-color:#bbb;">
<h1>This is the title of the design</h1>
<h>Date of Origin: </h><p>(e.g. Summer 2020)</p>
<h>Purpose: </h><p>(e.g. Freelance Commission)</p>
<h>Medium: </h><p>(e.g. Digital PDF)</p>
<h>Program(s) Utilized: </h><p>(e.g. Adobe Photoshop, Adobe InDesign)</p>
<h>Relevant to Positions: </h><p>(e.g. Freelance Graphic Designer)</p>
<h></h>
</div>
</div>
<div class="footer">
<p>Description of process and intention behind the work. Ique nulparunt, consed et ullacep tatur? Hilluptat esti ut velest, simus, nos et dionseq uidigenducia sequis aut aut vellabor a consequat venim eum res nos vendam si sus.
Menihil estias illest ipsae de doluptis apit fugiandae. Nonsequist, simus.
Fic tem re volupid mos es et et, exeris eata doles dollati busdam quati unt.
Ugitiosapis aborpore ea nonsed que velique milicii ssitiatem. Nequia seque as sinvella qui in poresti niment plique mod maio eossecatur? Uriatus.
Endunt res velest, officideliam doluptaspel ipis in cone secto ipsum quas mos autempos</p>
</div>
<script src="move.js"></script>
</body>
</html>

Image Modal or Expand when click in html and css

So i am trying to put a code for modal or in order to expand my images. I already checked every sector or every codes and still didn't find why it's not working. I don't want nothing to change in it except the modal, it my get mess up if i change things. I got the codes from a website. In the site their result are working but when i put the codes in the notepad nothing happened. It will be really helpful if you can find what is wrong with it. Thank you in advance for those who will help me.
body {
display: grid;
grid-template-columns: 100%;
grid-template-rows: 8vw 130vw 7vw;
grid-gap: 0em;
margin: 0;
padding: 0;
background-color: #ffffff;
width: 100%;
}
header,
footer {
grid-column: 1 / span 2;
}
main {
grid-column: 1 / span 2;
}
body {
margin: 0 auto;
max-width: 89em;
margin-left: 0;
margin-right:0;
padding: 0em 0;
}
header,
main,
aside,
footer {
display: flex;
}
footer {
background: #eaeaea;
}
.main1 {
margin-top: 450px;
margin-left: 0;
}
#body_1 h2 {
margin-left: 50px;
font-size: 30px;
color: black;
margin-top: 95px;
margin-bottom:3px;
font-family: courier new;
float: left;
}
#body_1 h6 {
margin-left: 10px;
color: blue;
margin-top: 220px;
margin-bottom:3px;
font-family: courier new;
float: left;
}
#body_1 h4 {
margin-left: 230px;
font-size: 30px;
color: black;
margin-top: 260px;
margin-bottom:3px;
position: left;
float: left;
}
.text4 {
position: absolute;
float: left;
top: 870px;
}
.background_wrap {
position: absolute;
background-color: rgba(19, 13, 6,0.5);
z-index: -1000;
width: 100%;
height: 100% ;
overflow:hidden;
background: url("Pics&Video/laoang6.jpg") no-repeat center;
background-size: cover;
}
.background_wrap::before{
background-color: rgba(0, 0, 0, 0.37);
content: '';
display: block;
height: 100%;
position: absolute;
width: 100%;
}
.content {
position: absolute;
width: 100%;
min-height: 20%;
z-index: 1000;
}
.sub-content {
position: fixed;
width: 1000px;
height: 120px;
margin: 0 auto;
transition: 0.5s;
}
.sub-content.active {
background-color: rgba(0, 26, 26,0.7);
width: 100%
}
.sub-content.active ul li a {
background-color: rgba(0, 26, 26,0.7);
}
#list {
margin-right: 5px;
position:fixed;
margin-left: 780px;
margin-top: 20px;
}
ul {
margin-top:1px;
padding: 0px;
list-style: none;
color: white;
margin-right: 0px;
font-family: calibri;
font-weight: bold;
}
ul li {
float: right;
width: 130px;
font-family: courier new;
border-bottom: 1px solid #ffffff;
border-right: 1px solid #ffffff ;
border-left: 1px solid #ffffff ;
border-top: 1px solid #ffffff ;
line-height: 25px;
text-align: center;
font-size: 13px;
font-weight: bolder;
margin-top: 35px;
margin-right: 3px;
}
ul li a {
color: white;
display: block;
margin-top: 2px;
font-weight: bolder;
text-decoration: none;
}
ul li a:hover {
background-color: green;
font-weight:bolder;
cursor: pointer;
color: white
}
ul li ul li {
display: none;
font-weight: bolder;
}
ul li:hover ul li {
display:block;
cursor: pointer;
color: white;
margin-top:1px;
margin-right: 0px;
position: center;
background-size: cover;
font-weight: bolder;
}
h1 {
font-family: comic sans ms, sans-serif;
text-align: center;
font-size: 60px;
text-transform: uppercase;
font-weight: bolder;
color: white;
margin-bottom: 6px;
}
h2 {
font-family: comic sans ms, sans-serif;
text-align: center;
font-size: 30px;
text-transform: uppercase;
font-weight: 300;
color: white;
padding-top: 14%;
}
.wrapper {
position: center;
width: 750px;
height: 100px;
margin-left:auto;
margin-right:auto;
margin-top: 150px;
font-size: 17px;
}
.image_wrap {
margin-top:20px;
height: 70px;
margin-left:55px;
}
.fl_image {
float: left;
margin-right:5px;
margin-bottom: 10px;
}
.content h6 {
font-family: courier new;
font-size: 13px;
text-transform: uppercase;
font-weight: 300;
color: green;
margin-bottom: 10px;
margin-left: 25px;
margin-top: 100px;
}
.content p {
font-family: courier new;
text-align: center;
font-size: 20px;
letter-spacing: 3px;
color: #ffffff;
}
div.gallery {
margin: 10px;
border: 0px solid #ccc;
float: left;
width: 250px;
height:250px;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: 100%;
}
.gallery1 {
float: left;
position: absolute;
margin-top: 320px;
margin-left: 10px;
}
div.gallery {
margin: 10px;
border: 0px solid #ccc;
float: left;
width: 300px;
height:250px;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: 100%;
}
.gallery2 {
float: left;
position: absolute;
margin-top: 840px;
margin-left: 10px;
}
.text4 {
margin-left: 360px;
font-size: 30px;
color: black;
margin-top: 220px;
margin-bottom:3px;
position: left;
float: left;
}
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 10000 ; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (Image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 600px;
max-height: 450px;
}
/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
animation-name: zoom;
animation-duration: 0.6s;
}
#keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
#media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
.transparent_btn {
font-size: 10px;
line-height: 50px;
color: #EC7063 ;
background-color: transparent;
border: 1px solid #D98880;
padding: 1px 20px;
border-radius: 10px;
text-decoration: none;
cursor: pointer;
transition: background-color ease 300ms;
font-weight: 200;
font-size: 16px;
margin-top: 620px;
float: left;
}
.transparent_btn:hover {
color: #fff;
background-color: rgba(245, 183, 177,0.8);
}
.btn {
position: absolute;
z-index: 1;
margin-left: 640px;
}
.btn2 {
position: absolute;
margin-top: 530px;
margin-left: 640px;
}
<!Doctype html>
<html>
<head>
<title> Hotels </title>
<link style="text/css" href="Hotel.css" rel="stylesheet" > </link>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(window).on('scroll', function(){
if($(window).scrollTop()){
$(".sub-content").addClass('active');
}else{
$(".sub-content").removeClass('active');
}
})
});
</script>
<script>
$(document).ready(function(){
// Get the modal
var modal = document.getElementById('myModal');
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img04");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
});
</script>
</head>
<body>
<header>
<div class="background_wrap">
</div>
<div class="content">
<div class="sub-content">
<img class="image_wrap fl_image" src="Pics&Video\picture.png" height="100px" margin-left="5px" alt="Image One"/>
<div id="list" >
<ul>
<li><a> <i class="fas fa-file-signature"></i> Contact</a></li>
<li> <i class="fas fa-user"></i> About</li>
<li> History </i></li>
<li><a> Activities <i class="fas fa-caret-down"></i></a>
<ul>
<li> Hotels</li>
<li> Festival</li>
</ul>
</li>
</ul>
</div>
<h6>Calbayog Tourism</h6>
</div>
</div>
<div class="wrapper">
<h2>Search all travel deals, in one go</h2>
<h1> HOTEL </h1>
</div>
</header>
<main class="main1">
<div id="body_1">
<h2> Calbayog Hotel </h2> <h6> 2 Places </h6>
<h4> Baypark Hotel </h4>
<div class="gallery1">
<div class="gallery">
<img id="myImg" src="Pics&Video/Western Samar/Calbayog/Baypark/calbayog1.jpg" width="600" height="400">
</div>
<div class="gallery">
<img id="myImg" src="Pics&Video/Western Samar/Calbayog/Baypark/calbayog2.jpg" width="600" height="400">
</div>
<div class="gallery">
<img id="myImg" src="Pics&Video/Western Samar/Calbayog/Baypark/calbayog3.jpg" width="600" height="400">
</div>
<div class="gallery">
<img id="myImg" src="Pics&Video/Western Samar/Calbayog/Baypark/calbayog4.jpg" width="600" height="400">
</div>
<div id="myModal" class="modal">
<!-- The Close Button -->
<span class="close">×</span>
<!-- Modal Content (The Image) -->
<img class="modal-content" id="img04">
<!-- Modal Caption (Image Text) -->
<div id="caption"></div>
</div>
</div>
<div class="btn">
View
</div>
<div class="text4">
<h4> Ciriaco Hotel </h4>
</div>
<div class="gallery2">
<div class="gallery">
<img src="Pics&Video/Western Samar/Calbayog/Ciriaco/ciriaco1.jpg" alt="Cinque Terre" width="600" height="400">
</div>
<div class="gallery">
<img src="Pics&Video/Western Samar/Calbayog/Ciriaco/ciriaco2.jpg" alt="Forest" width="600" height="400">
</div>
<div class="gallery">
<img src="Pics&Video/Western Samar/Calbayog/Ciriaco/ciriaco3.jpg" alt="Cinque Terre" width="600" height="400">
</div>
<div class="gallery">
<img src="Pics&Video/Western Samar/Calbayog/Ciriaco/ciriaco4.jpg" alt="Forest" width="600" height="400">
</div>
</div>
<div class="btn2">
View
</div>
</div>
</main >
<footer style="background: #1a75ff;">
<div style="text-align: center; margin-left: 40%; margin-top: 30px; font-family: courier new;">
#2019 Calbayog Tourism. All rights resereved.
</div>
</footer>
</body>
</html>

First you have to move your scripts inside document.ready. They are accessing DOM elements before rendering is completed.
Then you have to move the modal up. Do something like this and you'll see the modal move up. $("#img01").css({position:"absolute", "top": "0px"})
Then you can proceed :)

Class active not shown

I'm making a slideshow as explained in the W3School example below:
https://www.w3schools.com/howto/howto_js_slideshow.asp
I have the following issue: the active class is not shown when refreshing the page.
Here is the link to the problem.
https://github.com/FrancoisXavierPelletier/Intermarium24.com/issues/1
Best regards.
I have tried to modify the first margins and width to match the needs, but the second and third images do not show this margin.
Expected change: The code should add an active class to be displayed and show it by default. This can be done in Javascript.
Result: When refreshing the page, instead of having the slideshow not visible, the first slide should be active.
Here is the code in Javascript I use:
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
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";
}
*{
margin: 0;
padding; 0;
background: darkslategrey;
}
body{
font-family: arial, sans-serif;
}
h1{
font-family: 'Crete Round', serif;
font-size: 45px;
color: whitesmoke;
}
.wrapper{
width: 940px;
margin: 0 auto;
padding: 0 0;
}
.orange{
color: orange;
}
header ul{
list-style: none;
}
header a{
text-decoration: none;
color: whitesmoke;
font-weight: bold;
margin-right: 20px;
}
header{
height:100px;
}
header h1{
float: left;
margin-top: 25px;
}
header nav{
float: right;
margin-top: 50px;
}
header nav li
{
display: inline-block;
}
header nav li a {
text-transform: uppercase;
}
.clear{
clear: both;
}
/* Slideshow */
.slideshow-container {
max-width: 940px;
position: relative;
margin: auto;
background: red;
}
.mySlides {
display: none;
height: 300px;
width: 97.5%;
border: 1px solid white;
border-radius: 10px;
}
#slide1{
background: url('images/img1.jpg') center;
}
#slide2{
background: url('images/img1.jpg') center;
}
#slide3{
background: url('images/img1.jpg') center;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 40%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.prev {
left: 150px;
border-radius: 3px 0 0 3px;
}
.next {
right: 150px;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
border-radius: 3px 0 0 3px;
}
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
margin-top: 237px;
position: relative;
width: 97.4%;
text-align: justify;
background: black;
opacity: 0.8;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: relative;
top: 0;
background: transparent;
}
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* Category */
.category{
height: 200px;
width: 172px;
background: red;
float: left;
margin: 20px 5px;
border: 1px solid white;
border-radius: 5px;
}
#military{
background: url('images/military.jpg') center;
}
#economy{
background: url('images/economy.jpg') center;
}
#society{
background: url('images/social.jpg') center;
}
#culture{
background: url('images/culture.jpg') center;
}
#tech{
background: url('images/tech.jpg') center;
}
h2{
color: white;
font-size: 20px;
text-align: center;
margin-top: 150px;
padding: 5px;
text-transform: uppercase;
font-family: 'Crete Round', serif;
background: black;
opacity: 0.8;
}
/* footer */
footer{
height: 250px;
background-color: white;
}
.footer-div{
background: white;
margin: 20px;
float: left;
width: 20%;
height: 200px;
}
h3{
background: transparent;
color: black;
text-transform: uppercase;
font-weight: bold;
padding: 10px;
margin-top: 10px;
}
footer ul{
list-style: none;
background: white;
}
footer li{
padding: 5px;
background: white;
}
footer a{
background: white;
}
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title> Intermarium24.pl </title>
<link href="http://fonts.googleapis.com/css?family=Crete+Round" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<script src="myscript.js"></script>
</head>
<header>
<div class="wrapper">
<h1>Intermarium<span class="orange">24</span>.com</h1>
<nav>
<ul>
<li>Home </li>
<li>Discover </li>
<li>Register </li>
<li>Login </li>
<li>Contact </li>
</ul>
</nav>
</div>
</header>
<section id="slideshow">
<div class="wrapper">
<div id="slideshow-container">
<div class="mySlides fade" id="slide1">
<div class="numbertext">1 / 3</div>
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade" id="slide2">
<div class="numbertext">2 / 3</div>
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade" id="slide3">
<div class="numbertext">3 / 3</div>
<div class="text">Caption Three</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
</div>
</section>
<div class="clear"></div>
<section id="Main-articles">
<div class="wrapper">
<div class="category" id="military">
<h2>Military</h2>
</div>
<div class="category" id="economy">
<h2>Economy</h2>
</div>
<div class="category" id="society">
<h2>Society</h2>
</div>
<div class="category" id="culture">
<h2>Culture</h2>
</div>
<div class="category" id="tech">
<h2>Tech</h2>
</div>
</div>
<div class="clear"></div>
</section>
<footer>
<div class="wrapper">
<div class="footer-div">
<h3> Main menu</h3>
<ul>
<li><a>Home </a></li>
<li><a>Discover </a></li>
<li><a>Register </a></li>
<li><a>Login </a></li>
<li><a>Contact</a></li>
</ul>
</div>
<div class="footer-div" id="footer-category">
<h3> Categories</h3>
<ul>
<li><a>Military </a></li>
<li><a>Economy </a></li>
<li><a>Social </a></li>
<li><a>Cultural </a></li>
<li><a>Tech</a></li>
</ul>
</div>
<div class="footer-div" id="footer-legal">
<h3> Categories</h3>
<ul>
<li><a>Terms of Sales </a></li>
<li><a>Terms of Use </a></li>
<li><a>Privacy Policy </a></li>
<li><a>Legal Contact </a></li>
</ul>
</div>
<div class="footer-div" id="footer-socmed">
<h3> Social medias</h3>
<ul>
<li><a>Facebook </a></li>
<li><a>Twitter </a></li>
<li><a>Contact </a></li>
</ul>
</div>
</div>
</footer>
</html>

automatic slider animation not working

I recently implemented an automatic slider code for my slider in my website, however, it's not working for some reason. The code for the slider animation in the CSS style sheet is near the bottom. I was wondering if anybody could help me in solving the problem with my code.
Here is a picture of my slider, just want the images of the bikes to move automatically.
HTML:
<!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">
<title>Croydon Cycles</title>
<link rel="stylesheet" href="shop-style.css">
<link rel="shortcut icon" type="image/png" href="images/favicon.png">
<link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="parallax.min.js"></script>
</head>
<!DOCTYPE html>
<html lang="en">
<body>
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
Croydon Cycles
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>Location</li>
<li>Shop</li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
<div class="slider">
<div class="slideshow-container">
<div class="myslides fade">
<div class="numbers">1 / 4</div>
<div class="slider-pic"><img class="Fit" src="images/slider-1.jpg"></div>
<div class="caption">Kona Lanai 27.5" 2018 Mountain bike</div>
</div>
<div class="myslides fade">
<div class="numbers">2 / 4</div>
<div class="slider-pic"><img class="Fit" src="images/slider-2.jpg"></div>
<div class="caption">Decathlon B'twin Rockrider 520S Full Suspension Mountain Bike</div>
</div>
<div class="myslides fade">
<div class="numbers">3 / 4</div>
<div class="slider-pic"><img class="Fit" src="images/slider-3.jpg"></div>
<div class="caption">Ribble Aero 883 Carbon Road Bike - Matte Black</div>
</div>
<div class="myslides fade">
<div class="numbers">4 / 4</div>
<div class="slider-pic"><img class="Fit" src="images/slider-4.jpg"></div>
<div class="caption">Lapierre Overvolt AM700i</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
</div>
<br>
<div style="text-align:center">
<span class="dots" onclick="currentSlide(1)"></span>
<span class="dots" onclick="currentSlide(2)"></span>
<span class="dots" onclick="currentSlide(3)"></span>
<span class="dots" onclick="currentSlide(4)"></span>
</div>
<script type="text/javascript">
var slideIndex = 1;
showSlide(slideIndex);
function plusSlides(n){
showSlide(slideIndex += n);
}
function currentSlide(n) {
showSlide(slideIndex = n);
}
function showSlide(n){
var i;
var slides = document.getElementsByClassName("myslides");
var dots = document.getElementsByClassName("dots");
if (n > slides.length) { slideIndex = 1};
if (n < 1) { slideIndex = slides.length};
for (i=0;i<slides.length;i++) {
slides[i].style.display = "none";
};
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";
}
</script>
<div class="content">
</div>
</div>
<script type="text/javascript">
// Menu-toggle button
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
});
});
// Scrolling Effect
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('black');
}
else {
$('nav').removeClass('black');
}
})
</script>
</body>
</html>
CSS:
html, body {
margin: 0;
padding: 0;
width: 100%;
font-family: verdana,sans-serif;
margin: 0;
font-family: "Helvetica Neue",sans-serif;
font-weight: lighter;
}
header {
width: 100%;
height: 60px;
background: url(hero.jpg) no-repeat 50% 50%;
background-size: cover;
}
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #fff;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
z-index:2;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
body{
font-family: verdana,sans-serif;
margin: 0;
}
.slideshow-container{
width: 100%;
position: relative;
margin: auto;
}
.numbers{
position: absolute;
top: 0;
color: #f2f2f2;
padding: 8px 12px;
font-size: 12px;
}
.myslides{
display: none;
}
.prev , .next{
position: absolute;
top: 50%;
font-size: 18px;
font-weight: bold;
padding: 16px;
margin-top: -22px;
border-radius: 0 3px 3px 0;
color: black;
cursor: pointer;
}
.next{
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover,.next:hover{
background-color: rgba(0,0,0,0.8);
}
.caption{
text-align: center;
position: absolute;
bottom: 8px;
width: 100%;
color: black;
font-size: 15px;
padding: 8px 22px;
left:-2%;
}
.dots{
width: 13px;
height: 13px;
background: gray;
display: inline-block;
border-radius: 50%;
cursor: pointer;
}
.fade{
animation-name:fade;
animation-duration:1.5s;
}
#keyframes fade{
from {opacity: 0.4;}
to {opacity: 1;}
}
.active, .dot:hover {
background-color: #333;
}
.slider-pic {
display: grid;
height: 100%;
z-index:0;
}
.Fit {
max-width: 100%;
max-height: 100vh;
margin: auto;
z-index:0;
}
#keyframes slider{
0%{
left: 0;
}
20%{
left: 0;
}
25%{
left: -100%;
}
45%{
left: -100%;
}
50%{
left: -200%;
}
70%{
left: -200%;
}
75%{
left: -300%;
}
95%{
left: -300%;
}
100%{
left: -400%;
}
}
#slider {
overflow: hidden;
}
#slider figure img {
width:20%;
float: left;
}
#slider figure {
position: relative;
width: 500%;
margin:0;
left:0;
animation: 20s slider infinite
}

Add this instruction in your JS code:
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
});
// add this instruction !
setTimeout(function() {plusSlides(1) }, 1000)
})
Herem the method slidePlus is called every 1000ms

Categories