We Keep Coding

How can i close this navbar when user clicks a link on mobile view?

The navbar is not closing when a user clicks on links to navigate through website?
I had tried to add a click event listener to every link to close navbar but it didn't work!
Also the hamberberger menu icon in active position i.e. X is not aligned well. But the major preblem is to collapse the navbar when clicked.
$(document).ready(function() {
$('.container').click(function() {
$('.navbar .menu').toggleClass("active");
});
});
function myFunction(x) {
x.classList.toggle("change");
}
#media (max-width: 1104px) {
.about .about-content .left img {
height: 350px;
width: 350px;
}
}
#media (max-width: 991px) {
.max-width {
padding: 0 50px;
}
}
#media (max-width: 947px) {
.menu-btn {
display: block;
z-index: 999;
}
/* .menu-btn i.active:before {
content: "\f00d";
} */
.navbar .menu {
position: fixed;
height: 100vh;
width: 100%;
left: -100%;
top: 0;
background: #111;
text-align: center;
padding-top: 80px;
transition: all 0.3s ease;
}
.navbar .menu.active {
left: 0;
}
.navbar .menu li {
display: block;
}
.navbar .menu li a {
font-family: 'Josefin Sans', sans-serif;
display: inline-block;
margin: 20px 0;
font-size: 25px;
}
}
.navbar {
position: fixed;
width: 100%;
z-index: 999;
padding: 30px 0;
font-family: 'Ubuntu', sans-serif;
transition: all 0.3s ease;
}
.navbar.sticky {
padding: 15px 0;
background: crimson;
}
.navbar .max-width {
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar .logo a {
position: relative;
color: #fff;
font-size: 35px;
font-weight: bold;
text-transform: uppercase;
font-family: 'Orbitron', sans-serif;
border: 3px solid #fff;
padding: 0px 10px;
text-shadow: 0px 4px 5px rgba(0, 0, 0, 0.5);
box-shadow: inset 3px 1px 8px 2px rgb(0 0 0 / 50%);
letter-spacing: 2px;
}
.navbar .logo a::after {
content: 'PANDEY';
position: absolute;
font-size: 15px;
font-weight: bold;
bottom: -12px;
/* color: crimson; */
right: 15px;
background: crimson;
border-radius: 5px;
/* box-shadow: inset 3px 1px 8px 2px rgb(0 0 0 / 50%); */
padding: 0px 4px;
letter-spacing: 2px;
}
.navbar .logo a span {
color: crimson;
transition: all 0.3s ease;
}
.navbar.sticky .logo a::after {
border-radius: 4px;
background: #fff;
color: crimson;
text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.9);
}
.container {
display: inline-block;
cursor: pointer;
box-sizing: border-box;
}
.bar1 {
width: 35px;
height: 3px;
background-color: #fff;
margin: 6px 0;
transition: 0.4s;
}
.bar2 {
width: 25px;
height: 3px;
background-color: #fff;
margin: 6px 0;
transition: 0.4s;
}
.bar3 {
width: 15px;
height: 3px;
background-color: #fff;
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
transform: translate(0, 11px) rotate(-45deg);
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
transform: translate(0, -6px) rotate(40deg);
width: 35px;
}
.navbar.sticky .logo a span {
color: #fff;
}
.navbar .menu li {
list-style: none;
display: inline-block;
}
.navbar .menu li a {
font-family: 'Josefin Sans', sans-serif;
display: block;
color: #fff;
font-size: 18px;
font-weight: 500;
margin-left: 25px;
transition: color 0.3s ease;
}
.navbar .menu li a:hover {
position: relative;
color: #fff;
}
.navbar.sticky .menu li a:hover {
color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1 /jquery.min.js"></script>
<nav class="navbar">
<div class="max-width">
<div class="logo">Chhailbihari</div>
<ul class="menu">
<li class="menu-btn">Home</li>
<li class="menu-btn">About</li>
<li class="menu-btn">Services</li>
<li class="menu-btn">Skills</li>
<li class="menu-btn">Contact</li>
</ul>
<div class="menu-btn">
<div class="container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</div>
</div>
</nav>

i think you have make menu which is responsive - i.e. works on mobile also.
for this use #media screen css
show hamburger icon when width of window is like tab or mobile else hide this icon.
in menu div (mobile or tab) add close icon to close menu.
hope this solution helps
you may refer below code for navbar for mobile view with hamburger icon.
body
{
margin: 0;
padding: 0;
background: blue;
color: #cdcdcd;
}
#togglmenu
{
display: block;
position: relative;
top: 50px;
left: 50px;
z-index: 1;
-webkit-user-select: none;
user-select: none;
}
#togglmenu a
{
text-decoration: none;
color: #232323;
transition: color 0.3s ease;
}
#togglmenu a:hover
{
color: tomato;
}
#togglmenu input
{
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0; /* hide this */
z-index: 2; /* and place it over the hamburger */
-webkit-touch-callout: none;
}
#togglmenu span
{
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: #cdcdcd;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
opacity 0.55s ease;
}
#togglmenu span:first-child
{
transform-origin: 0% 0%;
}
#togglmenu span:nth-last-child(2)
{
transform-origin: 0% 100%;
}
#togglmenu input:checked ~ span
{
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #232323;
}
#togglmenu input:checked ~ span:nth-last-child(3)
{
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
#togglmenu input:checked ~ span:nth-last-child(2)
{
transform: rotate(-45deg) translate(0, -1px);
}
#menu
{
position: absolute;
width: 300px;
margin: -100px 0 0 -50px;
padding: 50px;
padding-top: 125px;
background: #ededed;
list-style-type: none;
-webkit-font-smoothing: antialiased;
transform-origin: 0% 0%;
transform: translate(-100%, 0);
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}
#menu li
{
padding: 10px 0;
font-size: 22px;
}
#togglmenu input:checked ~ ul
{
transform: none;
}
<nav role="navigation">
<div id="togglmenu">
<input type="checkbox" />
<span></span>
<span></span>
<span></span>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Info</li>
<li>Contact</li>
</ul>
</div>
</nav>

Why is my modal opening on the bottom of page?

I have built a modal and inserted it into my code, however whenever I press the button that is supposed to open it up it goes to the bottom of the page. It is supposed to be on top of the rest of the page with a blurry bg, per say, but it just goes to the bottom of the page and it isn't even properly formatted. Here is an image.
Here is the code for that, the navbar and their css, and the modal js file.
https://repl.it/repls/GrubbyInsubstantialAutosketch
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<nav>
<div class="menu-center">
<input type="checkbox"id="check">
<label for="check">
<i class="fas fa-bars" id="btn"></i>
<i class="fas fa-times" id="cancel"></i>
</label>
<img src="logo-solo.png" >
<ul>
<li><a href="#home" class="active" > Home</a></li>
<li><a href="#quem-somos" >Quem somos</a></li>
<li>Onde Atuamos</li>
<li>Servicos</li>
<li>Depoimentos</li>
<li>comecando</li>
<li>Contacte-nos</li>
<a class="cta" rel="modal:open" href="#ex1" key="login" id="myBtn">Acessar</a>
</ul>
</div>
</nav>
<script src="scroll.js"></script>
<script type="text/javascript">
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
</script>
<div class="modal" id="modalContainer">
<div class="container" id="myModal">
<div class="form-container sign-up-container">
<form action="#">
<h1>MMT University</h1>
<span>Se registre para começar</span>
<input type="text" placeholder="Usuário" />
<input type="email" placeholder="Email" />
<input type="password" placeholder="Senha" />
<input type="password" placeholder="Repita a sua senha" />
<button>Registrar</button>
</form>
</div>
<div class="form-container sign-in-container">
<form action="#">
<h1>Acessar</h1>
<span>Acesse a MMT University</span>
<input type="email" placeholder="Email" />
<input type="password" placeholder="Senha" />
Esqueceu a senha?
<button>Acessar</button>
</form>
</div>
<div class="overlay-container">
<div class="overlay">
<div class="overlay-panel overlay-left">
<h1>Bem vindo!</h1>
<p>Para continuar aprendendo, acesse a sua conta!</p>
<button class="ghost" id="signIn">Sign In</button>
</div>
<div class="overlay-panel overlay-right">
<h1>MMT University!</h1>
<p>Se registre para entrar na melhor universidade trading do mundo.</p>
<button class="ghost" id="signUp">Registre-se</button>
</div>
</div>
</div>
</div>
</div>
<script src="main.js"></script>
<script src="modal.js"></script>
</body>
Here is my css file, that has both the navbar and the modal code.
/*I could not add the justify content tag, it made my navbar disappear, this is my navbars css*/
body {
overflow-x: hidden;
display: flex;
align-items: center;
flex-direction: column;
font-family: 'Montserrat', sans-serif;
height: 100%;
}
a {
text-decoration: none;
}
nav {
height: 10vh;
background: #05031b;
opacity: 0.85;
transition: all 0.5s ease;
font-family: "Montserrat", sans-serif;
z-index: 1;
position: fixed;
width: 100%;
}
nav img {
height: 80px;
width: 80px;
margin-left: 5vh;
margin-top: 11px;
}
.social-media-icons {
position: absolute;
top: 10vh;
left: 0;
font-size: 8vh;
margin-right: 5vh;
}
.fa:hover {
opacity: 0.7;
}
.fa-youtube {
background: #05031b;
color: white;
margin-top: 0px;
font-size: 40px;
}
.fa-instagram {
background: #05031b;
color: white;
top: 0;
font-size: 50px;
margin-right: 5vh;
}
nav ul{
float: right;
margin-right: 10px;
margin-top: 20px;
}
nav ul li{
display: inline-block;
line-height: 50px;
margin: 5px 50px;
font-family: "Montserrat", sans-serif;
}
nav ul li a{
position: relative;
color: white;
font-size: 14px;
padding: 5px 6px;
font-family: "Montserrat", sans-serif;
text-transform: uppercase;
}
nav ul li a:before{
position: absolute;
content: '';
left: 0;
bottom: 0;
height: 3px;
width: 100%;
background: rgb(220,52,52);
transform: scaleX(0);
transform-origin: right;
transition: transform .4s linear;
font-family: "Montserrat", sans-serif;
}
nav ul li a:hover:before{
transform: scaleX(1);
transform-origin: left;
font-family: "Montserrat", sans-serif;
}
nav ul li a:hover{
border-radius: 4px;
transition: all 0.2s ease0;
color: rgb(220,52,52);
font-family: "Montserrat", sans-serif;
}
nav .active a:hover {
color: rgb(220,52,52);
}
nav .active a {
color: rgb(220,52,52);
}
#menu-center {
width: 980px;
height: 75px;
margin: 0 auto;
color: rgb(220,52,52);
font-family: "Montserrat", sans-serif;
}
#menu-center ul {
margin: 0 0 0 0;
color: rgb(220,52,52);
font-family: "Montserrat", sans-serif;
}
#menu-center ul li a{
padding: 32px 40px;
color: rgb(220,52,52);
font-family: "Montserrat", sans-serif;
}
#menu-center ul li {
list-style: none;
margin: 0 0 0 -4px;
display: inline;
color: rgb(220,52,52);
font-family: "Montserrat", sans-serif;
}
.active, #menu-center ul li a:hover {
font-size: 14px;
color: rgb(220,52,52);
text-decoration: none;
background-color: rgba(0, 0, 0, 0.12);
}
a {
color: rgb(220,52,52);
}
#quem-somos {
color: rgb(220,52,52);
}
.cta {
padding: 9px 18px;
background-color: rgb(220,52,52);
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
font-family: "Montserrat", sans-serif;
font-weight: 500;
color: #edf0f1;
right: 0;
margin-left: 20px;
text-decoration: none;
}
.cta:hover {
background-color: rgba(0, 136, 169, 0.8);
}
label #btn,
label #cancel{
color: red;
font-size: 30px;
float: right;
line-height: 80px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check{
display: none;
}
/*This is the modals css*/
h1 {
font-weight: bold;
margin: 0;
margin-bottom: 5vh;
}
h2 {
text-align: center;
}
p {
font-size: 14px;
font-weight: 100;
line-height: 20px;
letter-spacing: 0.5px;
margin: 20px 0 30px;
}
span {
font-size: 12px;
}
a {
color: #333;
font-size: 14px;
text-decoration: none;
margin: 15px 0;
}
button {
border-radius: 20px;
border: 1px solid rgb(220,52,52);
background-color: rgb(220,52,52);
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
padding: 12px 45px;
letter-spacing: 1px;
text-transform: uppercase;
transition: transform 80ms ease-in;
}
button:active {
transform: scale(0.95);
}
button:focus {
outline: none;
}
button.ghost {
background-color: transparent;
border-color: #FFFFFF;
color: #fff;
background-color: rgb(220,52,52);
}
form {
background-color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 50px;
height: 100%;
text-align: center;
overflow: auto;
}
input {
background-color: #eee;
border: none;
padding: 12px 15px;
margin: 8px 0;
width: 100%;
}
.container-form {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 14px 28px rgba(0,0,0,0.25),
0 10px 10px rgba(0,0,0,0.22);
position: relative;
overflow: hidden;
width: 768px;
max-width: 100%;
min-height: 480px;
}
.form-container {
position: absolute;
top: 0;
height: 100%;
transition: all 0.6s ease-in-out;
}
.sign-in-container {
left: 0;
width: 50%;
z-index: 2;
}
.container.right-panel-active .sign-in-container {
transform: translateX(100%);
}
.sign-up-container {
left: 0;
width: 50%;
opacity: 0;
z-index: 1;
}
.container.right-panel-active .sign-up-container {
transform: translateX(100%);
opacity: 1;
z-index: 5;
animation: show 0.6s;
}
#keyframes show {
0%, 49.99% {
opacity: 0;
z-index: 1;
}
50%, 100% {
opacity: 1;
z-index: 5;
}
}
.close {
/* Position it in the top right corner outside of the modal */
position: absolute;
right: 25px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
}
/* Close button on hover */
.close:hover,
.close:focus {
color: red;
cursor: pointer;
}
/* Add Zoom Animation */
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}
#-webkit-keyframes animatezoom {
from {-webkit-transform: scale(0)}
to {-webkit-transform: scale(1)}
}
#keyframes animatezoom {
from {transform: scale(0)}
to {transform: scale(1)}
}
.overlay-container {
position: absolute;
top: 0;
left: 50%;
width: 50%;
height: 100%;
overflow: hidden;
transition: transform 0.6s ease-in-out;
z-index: 100;
}
.container.right-panel-active .overlay-container{
transform: translateX(-100%);
}
.overlay {
background: #05031b;
background: -webkit-linear-gradient(to right, #05031b, #05031b);
background: linear-gradient(to right, #05031b, #05031b);
background-repeat: no-repeat;
background-size: cover;
background-position: 0 0;
color: #FFFFFF;
position: relative;
left: -100%;
height: 100%;
width: 200%;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}
.container.right-panel-active .overlay {
transform: translateX(50%);
}
.overlay-panel {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 40px;
text-align: center;
top: 0;
height: 100%;
width: 50%;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}
.overlay-left {
transform: translateX(-20%);
}
.container.right-panel-active .overlay-left {
transform: translateX(0);
}
.overlay-right {
right: 0;
transform: translateX(0);
}
.container.right-panel-active .overlay-right {
transform: translateX(20%);
}
.social-container {
margin: 20px 0;
}
.social-container a {
border: 1px solid #DDDDDD;
border-radius: 50%;
display: inline-flex;
justify-content: center;
align-items: center;
margin: 0 5px;
height: 40px;
width: 40px;
}
.modal {
position: fixed; /* position it so that fills the screen, but doesn't move with it */
top: 0; /* position this element at the top... */
left: 0; /* ...left corner of the page... */
width: 100%; /* ...and set both the width */
height: 100%; /* ...and height to 100%, so that the element fills the entire page */
z-index: 99999; /* set the z-index to a high enough number so that this element is positioned on top of all other elements */
background: rgb(0, 0, 0, 0.7); /* set the background to black with some transparency, so you can see through it */
/* The following simply centers the modal within this container */
display: flex;
justify-content: center;
align-items: center;
}
Now this is the modal.js, what controls the modals functions.
//Get the modal
var modal = document.getElementById("myModal");
var modal_container = document.getElementById("modalContainer")
modal_container.style.display = "none";
window.onclick = function (event) {
console.log(event.target)
if(event.target.id == "myBtn") {
modal_container.style.display = "flex"
}
else if (modal !== event.target && !modal.contains(event.target)) {
modal_container.style.display = "none";
}
}

You set an event handler for all links with href starting with '#' to scroll smoothly into view, but the href of the button that activates your modal windows is "#ex1". There is no "ex1" section in the document, which causes the script error.
A quick solution is to remove "#ex1" from the href attribute.
<a class="cta" rel="modal:open" href="" key="login" id="myBtn">Acessar</a>

Change text and image/video on click and scroll

I'm just a novice. I know some html, but I have no idea how to do the following:
there is an html page, it has a section or div with 3 columns (1st column - text, 2nd - video, in the 3rd column there are 4 links).
When the user scrolls to this section, I need the page to stop (I would like to but not necessarily), and while the person scrolls, it should change the text in the 1st column and the video in the 2nd(both same time) . And also the user should be able to scroll through these videos&text by clicking on the links in the 3rd column. How it is done here: fleet-app
It's written in React, so I can't to spy the solution.
I found this solution Javascript - change image and text on select, but I can't figure out how to apply it in my situation.
Is it possible to do this with Javascript or CSS or something else?
Please don't scold me too much - I'm just learning:)
The solution I got now is very ugly - example codepen.io/Avelaskes/pen/rNOKVbQ
(function($){
$(document).ready(function() {
// Scroll to Top
jQuery('.scrolltotop').click(function(){
jQuery('html').animate({'scrollTop' : '0px'}, 400);
return false;
});
jQuery(window).scroll(function(){
var upto = jQuery(window).scrollTop();
if(upto > 500) {
jQuery('.scrolltotop').fadeIn();
} else {
jQuery('.scrolltotop').fadeOut();
}
});
var forEach=function(t,o,r){if("[object Object]"===Object.prototype.toString.call(t))for(var c in t)Object.prototype.hasOwnProperty.call(t,c)&&o.call(r,t[c],c,t);else for(var e=0,l=t.length;l>e;e++)o.call(r,t[e],e,t)};
var hamburgers = document.querySelectorAll(".hamburger");
if (hamburgers.length > 0) {
forEach(hamburgers, function(hamburger) {
hamburger.addEventListener("click", function() {
this.classList.toggle("is-active");
}, false);
});
}
jQuery(document).ready(function() {
jQuery('.tabs .tab-links a').on('click', function(e) {
var currentAttrValue = jQuery(this).attr('href');
// Show/Hide Tabs
// Show/Hide Tabs
jQuery('.tabs ' + currentAttrValue).siblings().slideUp(400);
jQuery('.tabs ' + currentAttrValue).delay(400).slideDown(400);
// Change/remove current tab to active
jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
});
});
})(jQuery);(function($){
$(document).ready(function() {
// Scroll to Top
jQuery('.scrolltotop').click(function(){
jQuery('html').animate({'scrollTop' : '0px'}, 400);
return false;
});
jQuery(window).scroll(function(){
var upto = jQuery(window).scrollTop();
if(upto > 500) {
jQuery('.scrolltotop').fadeIn();
} else {
jQuery('.scrolltotop').fadeOut();
}
});
var forEach=function(t,o,r){if("[object Object]"===Object.prototype.toString.call(t))for(var c in t)Object.prototype.hasOwnProperty.call(t,c)&&o.call(r,t[c],c,t);else for(var e=0,l=t.length;l>e;e++)o.call(r,t[e],e,t)};
var hamburgers = document.querySelectorAll(".hamburger");
if (hamburgers.length > 0) {
forEach(hamburgers, function(hamburger) {
hamburger.addEventListener("click", function() {
this.classList.toggle("is-active");
}, false);
});
}
jQuery(document).ready(function() {
jQuery('.tabs .tab-links a').on('click', function(e) {
var currentAttrValue = jQuery(this).attr('href');
// Show/Hide Tabs
// Show/Hide Tabs
jQuery('.tabs ' + currentAttrValue).siblings().slideUp(400);
jQuery('.tabs ' + currentAttrValue).delay(400).slideDown(400);
// Change/remove current tab to active
jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
});
});
})(jQuery);
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght#0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&family=Oswald:wght#200;300;400;500;600;700&family=Raleway:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght#0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
body {
font-family: 'Raleway', sans-serif;
font-size: 16px;
font-weight: 400;
background: #fff;
color: #333333;
}
a:hover {
text-decoration: none;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
::selection {
color: white;
background: #C840E9;
}
::-webkit-selection {
color: white;
background: #C840E9;
}
::-moz-selection {
color: white;
background: #C840E9;
}
.scrolltotop {
width: 40px;
height: 40px;
border-radius: 20px 20px 0 0;
background: #5773FF;
text-align: center;
padding-top: 8px;
font-size: 22px;
color: #ffffff;
position: fixed;
right: 5px;
bottom: 5px;
display: none;
transition: 0.2s all ease;
-webkit-transition: 0.2s all ease;
-moz-transition: 0.2s all ease;
}
.scrolltotop:hover {
background: #C840E9;
color: #fff;
box-shadow: 0px 0px 5px rgba(0,0,0,.5);
-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,.5);
-moz-box-shadow: 0px 0px 5px rgba(0,0,0,.5);
}
/*---- header-area start ----*/
.header-area {
background-color: #15161C;
padding: 25px 0;
}
.navbar {
padding: 0px;
}
.navbar-brand img {
max-width: 100%;
display: block;
transition: 0.2s all ease;
-moz-transition: 0.2s all ease;
-webkit-transition: 0.2s all ease;
}
.navbar-brand img:hover {
opacity: 0.8;
}
.main-menu-part ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.main-menu-part ul li {
float: left;
}
.main-menu-part ul li a {
font-family: 'Cabin', sans-serif;
display: block;
padding: 0px 5px 0px 52px;
text-transform: capitalize;
font-weight: normal;
font-size: 18px;
color: #fff;
transition: 0.3s all ease;
-webkit-transition: 0.3s all ease;
-moz-transition: 0.3s all ease;
}
.main-menu-part ul li a:hover {
opacity: 0.8;
}
.hamburger {
padding: 10px 0px 0px;
display: inline-block;
cursor: pointer;
transition-property: opacity, filter;
transition-duration: 0.15s;
transition-timing-function: linear;
font: inherit;
color: inherit;
text-transform: none;
background-color: transparent;
border: 0;
margin: 0;
overflow: visible;
outline: 0px!important;
}
.hamburger:hover {
opacity: 0.7;
}
.hamburger-box {
width: 40px;
height: 24px;
display: inline-block;
position: relative;
}
.hamburger-inner {
display: block;
top: 50%;
margin-top: -2px;
}
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
width: 40px;
height: 4px;
background-color: #13F1FC;
border-radius: 2px;
position: absolute;
transition-property: transform;
transition-duration: 0.15s;
transition-timing-function: ease;
}
.hamburger-inner::before, .hamburger-inner::after {
content: "";
display: block;
}
.hamburger-inner::before {
top: -10px;
}
.hamburger-inner::after {
bottom: -10px;
}
.hamburger--squeeze .hamburger-inner {
transition-duration: 0.075s;
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--squeeze .hamburger-inner::before {
transition: top 0.075s 0.12s ease, opacity 0.075s ease;
}
.hamburger--squeeze .hamburger-inner::after {
transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--squeeze.is-active .hamburger-inner {
transform: rotate(45deg);
transition-delay: 0.12s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.hamburger--squeeze.is-active .hamburger-inner::before {
top: 0;
opacity: 0;
transition: top 0.075s ease, opacity 0.075s 0.12s ease;
}
.hamburger--squeeze.is-active .hamburger-inner::after {
bottom: 0;
transform: rotate(-90deg);
transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}
/*---- rkma-area start ----*/
.rkma-area {
background-color: #15161c;
}
.mnrkma_top {
background: url(img/bg.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
padding: 60px 0;
padding-bottom: 545px;
}
.rkma_top h2 {
color: #fff;
font-size: 50px;
text-align: center;
font-weight: 600;
padding-top: 50px;
}
.rkma_top p {
font-family: 'Cabin', sans-serif;
color: #B7E6FF;
font-size: 16px;
text-align: center;
line-height: 25px;
padding-top: 5px;
}
.rkma_part {
position: relative;
-webkit-animation:animation-hci0jy 5s 2s infinite alternate;
animation:animation-hci0jy 5s 2s infinite alternate;
-webkit-animation-timing-function:cubic-bezier(0.43,0.05,0.6,0.99);
animation-timing-function:cubic-bezier(0.43,0.05,0.6,0.99);
}
.rkma_part img {
width: 334px;
display: block;
margin: auto;
padding-top: 50px;
}
.rkma_part_1 {
position: absolute;
top: 0;
left: 24%;
-webkit-animation: animation-hci0jy 5s 2s infinite alternate;
animation: animation-hci0jy 5s 2s infinite alternate;
animation-timing-function: ease;
-webkit-animation-timing-function: cubic-bezier(0.43,0.05,0.6,0.99);
animation-timing-function: cubic-bezier(0.43,0.05,0.6,0.99);
}
.rkma_part_2 {
position: absolute;
top: 0;
right: 24%;
-webkit-animation: animation-hci0jy 5s 2s infinite alternate;
animation: animation-hci0jy 5s 2s infinite alternate;
animation-timing-function: ease;
-webkit-animation-timing-function: cubic-bezier(0.43,0.05,0.6,0.99);
animation-timing-function: cubic-bezier(0.43,0.05,0.6,0.99);
}
#-webkit-keyframes animation-hci0jy{
0% {
-webkit-transform:translateY(0px);
-ms-transform:translateY(0px);
transform:translateY(0px);
}
50% {
-webkit-transform:translateY(15px);
-ms-transform:translateY(15px);
transform:translateY(15px);
}
100% {
-webkit-transform:translateY(0px);
-ms-transform:translateY(0px);
transform:translateY(0px);
}
}
#keyframes animation-hci0jy{
0% {
-webkit-transform:translateY(0px);
-ms-transform:translateY(0px);
transform:translateY(0px);
}
50% {
-webkit-transform:translateY(15px);
-ms-transform:translateY(15px);
transform:translateY(15px);
}
100% {
-webkit-transform:translateY(0px);
-ms-transform:translateY(0px);
transform:translateY(0px);
}
}
/*---- smy-area start ----*/
.smy-area {
background-color: #15161C;
padding: 60px 0;
padding-top: 0;
}
.smy_top h2 {
color: #9F9F9F;
font-size: 52px;
font-weight: 700;
text-align: center;
}
.smy_top p {
color: #9F9F9F;
font-size: 27px;
font-weight: 700;
text-align: center;
padding-top: 5px;
padding-bottom: 30px;
}
.smy_left img {
max-width: 100%;
display: block;
}
.smy_left p {
font-family: 'Source Sans Pro', sans-serif;
color: #fff;
font-size: 25px;
font-weight: 600;
padding-left: 103px;
line-height: 35px;
margin-top: -68px;
}
.smy_right img {
width: 180px;
height: 120px;
border-radius: 100%;
display: block;
margin: auto;
border: 4px solid #B9B8B8;
}
.smy_right p {
color: #F2F2F2;
font-size: 18px;
text-align: center;
line-height: 25px;
padding-top: 16px;
}
/*---- tabbingsec-area start---*/
.tabbingsec-area2 {
display: none;
}
.tabs {
width: 100%;
display: inline-block;
}
.tab-links:after {
display: block;
clear: both;
content: '';
}
.tab-links {
padding-top: 110px
}
.tab-links li {
list-style: none;
padding-bottom: 19px;
}
.tab-links li i {
color: #C4C4C4;
font-size: 10px;
padding-right: 6px;
}
.tab-links a {
color: #E4E4E4;
font-size: 16px;
}
.tab-links a:hover {
text-decoration: none;
}
.tab-links li.active a {
color: #13F1FC;
}
/*----- Content of Tabs -----*/
.tab {
display: none;
}
.tab.active {
display: block;
}
#tabbingsec {
background: #15161C;
padding: 60px 0px;
}
.width60 {
width: 50%;
float: left;
}
.width60 h3 {
color: #9F9F9F;
font-size: 40px;
font-weight: 800;
padding-top: 60px;
padding-bottom: 6px;
}
.width60 p {
color: #AAABAB;
font-size: 28px;
line-height: 37px;
}
.width40 {
width: 50%;
float: left;
}
.width40 img {
max-width: 10%;
display: block;
margin: auto;
}
.width60 a {
width: 121px;
height: 46px;
line-height: 46px;
text-align: center;
color: #fff;
background:#ff8b38;
border-radius:3px;
font-size: 15px;
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="tabbingsec">
<div class="container">
<div class="tabs">
<div class="row">
<div class="col-lg-8 col-md-9 col-sm-6">
<div class="tab-content">
<div id="tab1" class="tab active">
<div class="width60">
<h3>First of all</h3>
<p>Decide where you will <br>enter into a position <br>and where you want<br> to put a stop order</p>
</div>
<div class="width40">
<img src="img/ph4.png" alt=""/>
</div>
</div>
<div id="tab2" class="tab">
<div class="width60">
<h3>In App</h3>
<p>Choose the calculator<br> depending on what<br> market you are working<br> or choose Universal</p>
</div>
<div class="width40">
<img src="img/ph5.png" alt=""/>
</div>
</div>
<div id="tab3" class="tab">
<div class="width60">
<h3>Balance</h3>
<p>Enter the amount of<br> balance or the amount<br> of money from which <br>you will count risk</p>
</div>
<div class="width40">
<img src="img/ph6.png" alt=""/>
</div>
</div>
<div id="tab4" class="tab">
<div class="width60">
<h3>Required</h3>
<p>Enter the price at wich<br> you plan to enter into <br>position and the price <br>of the planed stop order</p>
</div>
<div class="width40">
<img src="img/ph7.png" alt=""/>
</div>
</div>
<div id="tab5" class="tab">
<div class="width60">
<h3>Be WISE</h3>
<p>Chose the aceptable<br> risk amount in %.<br> The amount that you<br> are ready to loose in<br> case you wrong in your<br> predicrion</p>
</div>
<div class="width40">
<img src="img/ph8.png" alt=""/>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-3 col-sm-6">
<ul class="tab-links">
<li class="active"><i class="fas fa-circle" aria-hidden="true"></i>First step</li>
<li><i class="fas fa-circle" aria-hidden="true"></i> Second step</li>
<li><i class="fas fa-circle" aria-hidden="true"></i> Third step</li>
<li><i class="fas fa-circle" aria-hidden="true"></i> Fourth step</li>
<li><i class="fas fa-circle" aria-hidden="true"></i> Fivth step</li>
</ul>
</div>
</div>
</div>
</div>
</section>

How to filter DIVs in a masonry gallery in an effective way?How do i do the filtering using plain jquery?

I'm trying to build a gallery where i want to place of all photos, CSS3, HTML5, jquery code snippets etc. Wanted to know to do the filtering part using plain jquery? here's my code:
<!-- Filter Starts -->
<div class="container">
<div class="row safezone">
<ul class="filters">
<li>All</li>
<li>CSS3</li>
<li>jQuery</li>
<li>Mobile</li>
<li>Photos</li>
<li>User Interfaces</li>
<li>Wireframes</li>
<li>Others</li>
</ul>
</div>
</div>
<!-- Filter Ends -->
<div class="container">
<div class="row">
<!-- gal cont-->
<div id="masonry">
<div class="mitem">
<h3>CSS3 Animation</h3>
<p>Text underline animation on mouse hover.</p>
<p class="textanim">“<strong>True love is born</strong> from understanding.”</p>
</div>
<div class="mitem box">
<h3>CSS3 Circles</h3>
<div class="circle-text"><p>Circles with pure CSS3</p></div>
</div>
<div class="mitem box">jQuery</div>
<div class="mitem box">Mobile</div>
<div class="mitem box">jQuery</div>
<div class="mitem box">Wireframes</div>
<div class="mitem box">Other</div>
<div class="mitem box">UI</div>
<div class="mitem box">UI</div>
<div class="mitem box"><img class="img-responsive img-thumbnail" src="http://lorempixel.com/400/200/sports" /></div>
<div class="mitem box"><img class="img-responsive img-thumbnail" src="http://lorempixel.com/400/200/sports/Dummy-Text" /></div>
<div class="mitem box"><img class="img-responsive img-thumbnail" src="http://lorempixel.com/400/200" /></div>
</div>
<!-- /gal cont -->
</div>
</div>
var container = document.querySelector('#masonry');
var msnry = new Masonry( container, {
columnWidth: 220,
itemSelector: '.mitem'
});
#import url('https://fonts.googleapis.com/css?family=Cinzel:400,700,900|Satisfy');
#import url('http://fonts.googleapis.com/css?family=Roboto+Slab:400,700,100%7CRoboto:400,700,300,100');
/* Syntaxes for quick reference
transition: <property> <duration> <timing-function> <delay>;
=============================== */
/** Basic Page CSS **/
body {
font-family: 'Roboto Slab', serif;
font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300;
font-size: 2em;
}
body.playground { background-color: #EAEDF1; }
h1, h2, h3, h4, h5, h6 {
font-family: 'Cinzel', serif, sans-serif;
font-weight: 400;
margin: 0;
}
.safezone { padding-top: 80px; }
.borders { border:1px solid red; }
/* Masonry */
.mitem {
width: 200px;
float: left;
font-size: .85em;
background: #fff;
padding: 1em;
/*box-shadow: 1px 1px 2px 1px #e3e3e3;*/
margin-bottom: 2em;
border-radius: 2px;
}
.mitem img { border:none; padding: 0; margin: 0; border-radius: 2px; }
#masonry h3 { font-size: 0.9em; font-weight: 600; color: #2C77F8; text-align: center; border-bottom: 0px dotted #78A8FF; margin: 0 0 10px 0; }
/* /Masonry */
/* CSS3 Circles */
.circle-text {
width:150px;
}
.circle-text:after {
content: "";
display: block;
width: 100%;
height:0;
padding-bottom: 100%;
background: #4679BD;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
/*background-image: linear-gradient(to right bottom, #22B009 0%, #4679BD 100%);*/
box-shadow: 3px 4px 3px #ccc;
background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
}
.circle-text p {
float:left;
width:100%;
padding-top:50%;
line-height:1em;
margin-top:-0.5em;
text-align:center;
color:white;
}
/* ===================== */
/* text underline animation on hover
======================================*/
p.textanim > a {
position: relative;
color: #f00;
text-decoration: none;
}
p.textanim > a:hover {
color: #f00;
text-decoration: none;
}
p.textanim > a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #f00;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
p.textanim > a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
/* ========================================== */
/* CSS3 Box enlarge on hover
==============================*/
.box:hover {
box-shadow: 0 5px 10px rgba(0,0,0,0.2);
transform: scale(1);
border-radius: 4px;
color: #111;
transition: all 0.2s ease-in-out 0s;
}
/* =================================== */
/* Filters
==============================*/
ul.filters { list-style: none; margin: 0 auto 2em auto; }
ul.filters li { display: inline-block; border-right: 1px dotted #aaa; padding-right: 1em; margin-right: 1em; }
ul.filters li:last-child { border-right: none; }
ul.filters li a { text-decoration: none; font-size: 0.8em; padding: 5px 10px; border-radius: 20px; }
ul.filters li a:hover { text-decoration: none; background-color: #0095DD; color: #fff; transition: all 0.2s ease-in-out 0s; }
/* =================================== */ }
}
}
}
here's the link for jsfiddle: https://jsfiddle.net/tosrisri/thqL2Lf1/2/

Since you are you are fine with using a plugin, you could just use the Isotope masonry plugin. It will handle the arranging and filtering for you. it's free and has some pretty powerful filtering methods.
https://isotope.metafizzy.co/

Codepen JQuery Code Doesn't Work In My Browser

I've searched online for a solution to this problem for a while now. Unfortunately, no luck. Here is the website I'm using the code from http://codepen.io/anon/pen/wagbYZ
Here is my code:
HTML -
<!DOCTYPE html>
<html lang="en">
<head>
<script src="jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<link href="main.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Montserrat|Cardo' rel='stylesheet' type='text/css'>
</head>
<body>
<header class="main_h">
<div class="row">
<a class="logo" href="#">L/F</a>
<div class="mobile-toggle">
<span></span>
<span></span>
<span></span>
</div>
<nav>
<ul>
<li>Section 01</li>
<li>Section 02</li>
<li>Section 03</li>
<li>Section 04</li>
</ul>
</nav>
</div> <!-- / row -->
</header>
<div class="hero">
<h1><span>loser friendly</span><br>Batman nav.</h1>
<div class="mouse">
<span></span>
</div>
</div>
<div class="row content">
<h1 class="sec01">Section 01</h1>
<p>Hello World!</p>
<h1 class="sec02">Section 02</h1>
<p>Hello World!</p>
<h1 class="sec03">Section 03</h1>
<p>Hello World!</p>
<h1 class="sec04">Section 04</h1>
<p>Hello World!</p>
</div>
</body>
</html>
CSS:
#mixin small {
#media only screen and (max-width: 766px) {
#content;
}
}
$color: #8f8f8f;
$color2: #e8f380;
.main_h {
position: fixed;
top: 0px;
max-height: 70px;
z-index: 999;
width: 100%;
padding-top: 17px;
background: none;
overflow: hidden;
-webkit-transition: all 0.3s;
transition: all 0.3s;
opacity: 0;
top: -100px;
padding-bottom: 6px;
font-family: "Montserrat", sans-serif;
#include small {
padding-top: 25px;
}
}
.open-nav {
max-height: 400px !important;
.mobile-toggle {
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
}
}
.sticky {
background-color: rgba(255, 255, 255, 0.93);
opacity: 1;
top: 0px;
border-bottom: 1px solid lighten($color, 30%);
}
.logo {
width: 50px;
font-size: 25px;
color: $color;
text-transform: uppercase;
float: left;
display: block;
margin-top: 0;
line-height: 1;
margin-bottom: 10px;
#include small {
float: none;
}
}
nav {
float: right;
width: 60%;
#include small {
width: 100%;
}
ul {
list-style: none;
overflow: hidden;
text-align: right;
float: right;
#include small {
padding-top: 10px;
margin-bottom: 22px;
float: left;
text-align: center;
width: 100%;
}
li {
display: inline-block;
margin-left: 35px;
line-height: 1.5;
#include small {
width: 100%;
padding: 7px 0;
margin: 0;
}
}
a {
color: #888888;
text-transform: uppercase;
font-size: 12px;
}
}
}
.mobile-toggle {
display: none;
cursor: pointer;
font-size: 20px;
position: absolute;
right: 22px;
top: 0;
width: 30px;
-webkit-transition: all 200ms ease-in;
-moz-transition: all 200ms ease-in;
transition: all 200ms ease-in;
#include small {
display: block;
}
span {
width: 30px;
height: 4px;
margin-bottom: 6px;
border-radius: 1000px;
background: $color;
display: block;
}
}
.row {
width: 100%;
max-width: 940px;
margin: 0 auto;
position: relative;
padding: 0 2%;
}
* {
box-sizing: border-box;
}
body {
color: $color;
background: white;
font-family: "Cardo", serif;
font-weight: 300;
-webkit-font-smoothing: antialiased;
}
a {
text-decoration: none;
}
h1 {
font-size: 30px;
line-height: 1.8;
text-transform: uppercase;
font-family: "Montserrat", sans-serif;
}
p {
margin-bottom: 20px;
font-size: 17px;
line-height: 2;
}
.content {
padding: 50px 2% 250px;
}
.hero {
position: relative;
background: url(http://srdjanpajdic.com/slike/2.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
text-align: center;
color: #fff;
padding-top: 110px;
min-height: 500px;
letter-spacing: 2px;
font-family: "Montserrat", sans-serif;
h1 {
font-size: 50px;
line-height: 1.3;
span {
font-size: 25px;
color: $color2;
border-bottom: 2px solid $color2;
padding-bottom: 12px;
line-height: 3;
}
}
}
.mouse {
display: block;
margin: 0 auto;
width: 26px;
height: 46px;
border-radius: 13px;
border: 2px solid $color2;
bottom: 40px;
position: absolute;
left: 50%;
margin-left: -14px;
span {
display: block;
margin: 6px auto;
width: 2px;
height: 2px;
border-radius: 4px;
background: $color2;
border: 1px solid transparent;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-name: scroll;
animation-name: scroll;
}
}
#-webkit-keyframes scroll {
0% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
}
#keyframes scroll {
0% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(20px);
-ms-transform: translateY(20px);
transform: translateY(20px);
}
}
JS:
$(window).scroll(function() {
if ($(window).scrollTop() > 100) {
$('.main_h').addClass('sticky');
} else {
$('.main_h').removeClass('sticky');
}
});
$('.mobile-toggle').click(function() {
if ($('.main_h').hasClass('open-nav')) {
$('.main_h').removeClass('open-nav');
} else {
$('.main_h').addClass('open-nav');
}
});
$('.main_h li a').click(function() {
if ($('.main_h').hasClass('open-nav')) {
$('.navigation').removeClass('open-nav');
$('.main_h').removeClass('open-nav');
}
});
$('nav a').click(function(event) {
var id = $(this).attr("href");
var offset = 70;
var target = $(id).offset().top - offset;
$('html, body').animate({
scrollTop: target
}, 500);
event.preventDefault();
});
The HTML and CSS work fine, but the JQuery is giving me problems.

try wrapping the code in jquery document ready event
$(document).ready(function(){
//event listeners
});