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>

On mobile I want my navbar to close when I click an ID

I have a problem with my navbar. I want to select an #id (page) on my mobile device, reach that side of the page and then close the .nav-wrapper which holds all the ul li's, the one that was opened to view all the pages (id's).
I've tried something but it didn't work. Hope you understood my question and also I hope that you can help me.
$(document).ready(function(){
$(window).scroll(function(){
if($(document).scrollTop()>130){
$(".nav-btn").addClass("fundal")
}
else{
$(".nav-btn").removeClass("fundal")
}
});
});
window.addEventListener('load', ()=> {
const preload = document.querySelector('.preload');
preload.classList.add('preload-finish');
});
$("ul").click(function () {
$(".nav-wrapper").toggleClass(".nav-btn");
})
/* NAVBAR */
.navigatie{
background-color:transparent;
width:100%;
position: absolute;;
z-index: 99;
margin:0px;
padding:0px;
}
.logo {
float: left;
padding: 8px;
margin-left: 40px;
margin-top: 8px;
}
.navbar-brand{
color:white !important;
}
.navbar-brand img{
width: auto;
height: 100px;
margin:-32px 0px -25px 0px;
}
nav ul {
float: right;
list-style-type: none;
padding-top:5px;
margin-right:20px;
}
nav ul li {
float: left;
}
nav ul li:not(:first-child) {
margin-left: 48px;
}
nav ul li:last-child {
margin-right: 24px;
}
nav ul li a {
display: inline-block;
outline: none;
color: #fff;
text-transform: uppercase;
text-decoration: none;
font-size: 16px;
letter-spacing: 1.1px;
font-weight: 700;
}
nav ul li a:hover{
color:#fff;
text-decoration: underline;
}
/* FUNDAL JS */
.fundal{
background:#e04f45 !important;
box-shadow:1px 2px 4px 0px #00000075 !important;
}
.fundal .nav-btn {
background-color:#e04f45;
border-radius: 50%;
box-shadow:1px 2px 4px 0px #00000075;
}
.fundal .nav-btn i{
background: #fff;
border-radius: 2px;
}
#nav:checked + .nav-btn {
transform: rotate(45deg);
background-color: #e04f45;
}
#nav:checked + .nav-btn i {
background: #fff;
transition: transform 0.2s ease;
}
#nav:checked + .nav-btn i:nth-child(1) {
transform: translateY(6px) rotate(180deg);
}
#nav:checked + .nav-btn i:nth-child(2) {
opacity: 0;
}
#nav:checked + .nav-btn i:nth-child(3) {
transform: translateY(-6px) rotate(90deg);
}
#nav:checked ~ .nav-wrapper {
z-index: 9990;
display:block
}
#nav:checked ~ .nav-wrapper ul li a {
opacity: 1;
transform: translateX(0);
}
.hidden {
display: none;
}
/* MEDIA SCREEN NAVBAR PTR TLF */
#media only screen and (max-width: 991px){
.navigatie{
background-color:transparent;
width:100%;
position: absolute;
z-index: 99;
margin:0px;
padding:0px;
}
.navbar-brand img{
height:100px;
margin:-20px 0px 0px 0px;
}
.nav-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background: #fff;
display:none;
transition: all 0.2s ease;
}
.nav-wrapper ul {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
.nav-wrapper ul li {
display: block;
float: none;
width: 100%;
text-align: center;
padding-top:10px;
margin-bottom: 10px;
}
.nav-wrapper ul li:not(:first-child) {
margin-left: 0;
}
.nav-wrapper ul li a {
padding: 10px 24px;
opacity: 0;
color: #000;
font-size: 14px;
font-weight: 600;
letter-spacing: 1.2px;
transform: translateX(-20px);
transition: all 0.2s ease;
}
.nav-btn {
position: fixed;
right: 30px;
top: 28px;
display: block;
width: 47px;
height: 46px;
cursor: pointer;
z-index: 9999;
border-radius: 50%;
}
.nav-btn i {
display: block;
width: 20px;
height: 2px;
background: #fff;
border-radius: 2px;
margin-left: 14px;
}
.nav-btn i:nth-child(1) {
margin-top: 16px;
}
.nav-btn i:nth-child(2) {
margin-top: 4px;
opacity: 1;
}
.nav-btn i:nth-child(3) {
margin-top: 4px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navigatie">
<nav>
<input type="checkbox" id="nav" class="hidden">
<label for="nav" class="nav-btn">
<i></i>
<i></i>
<i></i>
</label>
<div class="nav-wrapper">
<ul>
<li>Acasă</li>
<li>Despre</li>
<li>Studii</li>
<li>Skills</li>
<li>Contact</li>
</ul>
</div>
</nav>
</div>

You could do that by changing a small thing in your JavaScript.
Now the menu is showing when the checkbox is checked, you need to make sure that the checkbox gets unchecked when clicking a link. I've updated the JS in your 'click' function
Tip: try to avoid doing one thing with Vannila JS and the other thing with jQuery
$(document).ready(function () {
$(window).scroll(function () {
console.log($(document).scrollTop());
if ($(document).scrollTop() > 130) {
$(".nav-btn").addClass("fundal");
console.log("add class", $(".nav-btn").hasClass("fundal"));
} else {
$(".nav-btn").removeClass("fundal");
console.log("remove class");
}
});
});
window.addEventListener("load", () => {
const preload = document.querySelector(".preload");
preload.classList.add("preload-finish");
});
// Updated the selector
$(".nav-wrapper li a").click(function () {
$(".nav-wrapper").toggleClass(".nav-btn");
// Uncheck your checkbox
$("#nav").prop("checked", false)
});
.page {
background: #f00;
height: 500px;
margin-bottom: 10px;
}
/* NAVBAR */
.navigatie {
background-color: transparent;
width: 100%;
position: absolute;
z-index: 99;
margin: 0px;
padding: 0px;
}
.logo {
float: left;
padding: 8px;
margin-left: 40px;
margin-top: 8px;
}
.navbar-brand {
color: white !important;
}
.navbar-brand img {
width: auto;
height: 100px;
margin: -32px 0px -25px 0px;
}
nav ul {
float: right;
list-style-type: none;
padding-top: 5px;
margin-right: 20px;
}
nav ul li {
float: left;
}
nav ul li:not(:first-child) {
margin-left: 48px;
}
nav ul li:last-child {
margin-right: 24px;
}
nav ul li a {
display: inline-block;
outline: none;
color: #fff;
text-transform: uppercase;
text-decoration: none;
font-size: 16px;
letter-spacing: 1.1px;
font-weight: 700;
}
nav ul li a:hover {
color: #fff;
text-decoration: underline;
}
/* FUNDAL JS */
.fundal {
background: #e04f45 !important;
box-shadow: 1px 2px 4px 0px #00000075 !important;
}
.fundal.nav-btn {
background-color: #e04f45;
border-radius: 50%;
box-shadow: 1px 2px 4px 0px #00000075;
}
.fundal.nav-btn i {
background: #fff;
border-radius: 2px;
}
#nav:checked + .nav-btn {
transform: rotate(45deg);
background-color: #e04f45;
}
#nav:checked + .nav-btn i {
background: #fff;
transition: transform 0.2s ease;
}
#nav:checked + .nav-btn i:nth-child(1) {
transform: translateY(6px) rotate(180deg);
}
#nav:checked + .nav-btn i:nth-child(2) {
opacity: 0;
}
#nav:checked + .nav-btn i:nth-child(3) {
transform: translateY(-6px) rotate(90deg);
}
#nav:checked ~ .nav-wrapper {
z-index: 9990;
display: block;
}
#nav:checked ~ .nav-wrapper ul li a {
opacity: 1;
transform: translateX(0);
}
.hidden {
display: none;
}
/* MEDIA SCREEN NAVBAR PTR TLF */
#media only screen and (max-width: 991px) {
.navigatie {
background-color: transparent;
width: 100%;
position: absolute;
z-index: 99;
margin: 0px;
padding: 0px;
}
.navbar-brand img {
height: 100px;
margin: -20px 0px 0px 0px;
}
.nav-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background: #fff;
display: none;
transition: all 0.2s ease;
}
.nav-wrapper ul {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
.nav-wrapper ul li {
display: block;
float: none;
width: 100%;
text-align: center;
padding-top: 10px;
margin-bottom: 10px;
}
.nav-wrapper ul li:not(:first-child) {
margin-left: 0;
}
.nav-wrapper ul li a {
padding: 10px 24px;
opacity: 0;
color: #000;
font-size: 14px;
font-weight: 600;
letter-spacing: 1.2px;
transform: translateX(-20px);
transition: all 0.2s ease;
}
.nav-btn {
position: fixed;
right: 30px;
top: 28px;
display: block;
width: 47px;
height: 46px;
cursor: pointer;
z-index: 9999;
border-radius: 50%;
}
.nav-btn i {
display: block;
width: 20px;
height: 2px;
background: #fff;
border-radius: 2px;
margin-left: 14px;
}
.nav-btn i:nth-child(1) {
margin-top: 16px;
}
.nav-btn i:nth-child(2) {
margin-top: 4px;
opacity: 1;
}
.nav-btn i:nth-child(3) {
margin-top: 4px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="preload"></div>
<div class="navigatie">
<nav>
<input type="checkbox" id="nav" class="hidden">
<label for="nav" class="nav-btn">
<i></i>
<i></i>
<i></i>
</label>
<div class="nav-wrapper">
<ul>
<li>Acasă</li>
<li>Despre</li>
<li>Studii</li>
<li>Skills</li>
<li>Contact</li>
</ul>
</div>
</nav>
</div>
<div class="page" id="home"></div>
<div class="page" id="despre"></div>
<div class="page" id="studii"></div>
<div class="page" id="abilitati"></div>
<div class="page" id="contact"></div>

Dropdown is coming behind carousel

I have set z index in every place, but it did nothing.
I want the dropdown to appear outside the carousel, as shown here:
I have set z index in every place, but it did nothing.
I want the dropdown to appear outside the carousel, as shown here
<script>
$( ".choose_nav_landing" ).click(function() {
$('.choose-list').slideToggle(300);
});
$( ".choose_nav_landing" ).click(function(event) {
$("#accordation").toggleClass('accordation-open');
$("#accordation").toggleClass('accordation-close');
});
</script>
<style>
.choose-site-landing{
float: left;
margin-bottom: 60px;
margin-top: 25px;
}
#media screen and (max-width: 550px) {
.choose-site-landing{
float: left;
margin-bottom: 0px;
margin-top: 25px;
width: 100%;
}
}
.choose_nav_landing {
margin-right: auto;
margin-left: auto;
width: 100%;
padding-left: 0;
text-align: center;
}
.nav_choose_lp{
width: inherit !important;
}
.nav_choose_lp>.menu_choose_landing {
width: 367px !important;
}
#media screen and (max-width: 550px){
.nav_choose_lp>.menu_choose_landing {
width: 100% !important;
}
}
.choose_nav_landing > li {
display: inline-block;
padding: 0px;
background-color: #086EA1;
}
.choose_nav_landing > li:hover {
background-color: #054c70;
}
.choose_nav_landing li.menu_choose_landing a {
color: #ffffff;
min-height: 58px;
}
.choose_nav_landing li a {
border: 0;
display: block;
font-family: "Nimbus Sans Reg";
font-size: 18px;
padding: 17px 20px 17px 20px;
line-height: 19px;
position: relative;
text-decoration: none;
width: auto !important;
}
.choose-list {
margin-left: 0;
padding-left: 0;
width: 100%;
}
.choose-list li {
font-family: "Nimbus Sans Reg";
font-size: 16px;
line-height: 16px;
background-color: rgb(232,232,232,1.0) !important;
background: #e8e8e8 !important;
filter: alpha(opacity=100);
opacity: 1;
}
.choose-list li a {
display: block;
line-height: 18px;
font-size: 16px;
color: #086EA1 !important;
text-align: left;
padding: 21px 20px 21px 23px !important;
}
.choose-list li a:hover,.choose-list li a:focus {
text-decoration: none;
opacity: 1;
background-color: rgb(216,216,216,1.0) !important;
background: #d8d8d8 !important;
filter: alpha(opacity=100);
color: #054C70 !important;
}
.choose-list li a:active{
text-decoration: none;
background-color: rgb(216,216,216,1.0) !important;
color: #043954 !important;
background: #d8d8d8 !important;
filter: alpha(opacity=100);
opacity: 1;
}
.choose-list li a:nth-child(even) {
background-color: rgb(241,241,241,1.0) !important;
background: #f1f1f1 !important;
filter: alpha(opacity=100);
opacity: 1;
}
.choose-list li:nth-child(even) {
background-color: rgb(241,241,241,1.0) !important;
background: #f1f1f1 !important;
filter: alpha(opacity=100);
opacity: 1;
}
/* .choose-list li:hover:nth-child(even) {
background-color: #d8d8d8 !important;
} */
.choose-site-mar {
display: block;
position: absolute;
width: inherit;
z-index: 1010;
}
#media screen and (max-width: 550px){
.choose_nav_landing li a {
padding: 17px 18px 17px 18px;
}
.choose-list li {
background-color: #033b57 !important;
}
.choose-list li a {
color: #FFFFFF !important;
padding: 21px 18px 21px 18px !important;
}
.choose-list li a:hover,.choose-list li a:focus {
background-color: #033b57 !important;
color: #FFFFFF !important;
}
.choose-list li a:active{
text-decoration: none;
background-color: #033b57 !important;
color: #FFFFFF !important;
}
.choose-list li a:nth-child(even) {
background-color: #054c70 !important;
}
.choose-list li:nth-child(even) {
background-color: #054c70 !important;
}
.choose-site-mar {
position: unset;
}
}
.icon-accordation{
padding-right: 15px;
}
.accordation-open {
transform: rotate(180deg);
transition: 0.30s;
opacity: 1.0;
transition: opacity .30s ease-in-out;
-moz-transition: opacity .30s ease-in-out;
-webkit-transition: opacity .30s ease-in-out;
}
.accordation-close {
transform: rotate(0deg);
transition: 0.30s;
transition: .30s ease-in-out;
-moz-transition: .305s ease-in-out;
-webkit-transition: .30s ease-in-out;
}
.site-icon-link{
background-image: url(/content/dam/sunita/arrowRightInteractiveBlue.png);
background-repeat: no-repeat;
background-position: right center;
background-size: cover;
width: 23px;
height: 23px;
right: 20px;
position: absolute;
top: 35%;
}
.site-text{
word-break: break-word;
margin-right: 30px;
}
.choose-list li a:hover .site-icon-link,.choose-list li a:focus .site-icon-link{
background-image: url(/content/dam/sunita/arrowRightDarkBlue.png);
}
#media screen and (max-width: 550px){
.site-icon-link{
background-image: url(/content/dam/sunita/arrowRightWhite.png);
right: 15px;
}
.site-text{
margin-right: 20px;
}
.choose-list li a:hover .site-icon-link,.choose-list li a:focus .site-icon-link{
background-image: url(/content/dam/sunita/arrowRightWhite.png);
}
}
</style>
<sly data-sly-test="${wcmmode.edit}"><h1>Edit Choose Site</h1></sly>
<sly data-sly-use.siteList="com.trp.wtc.sunita.pojo.ChooseSite"/>
<div class="choose-site-landing js-rem-ous">
<ul class="choose_nav_landing nav_choose_lp">
<li id="chooseSiteHolder" class="menu_choose_landing menu-login-branded " >
<a class="nav_login_lp_top js-nix-click landing-state" href="#"><span class="icon-accordation"><img class="accordation-close" id="accordation" alt="accordation" src="/content/dam/sunita/twirlArrowWhite.png" style="width: 24px; height: 24px;"></span>${properties.title #context='html'}</a>
<div class="choose-site-mar">
<ul class="unbulleted choose-list js-remember" style="display: none;">
<sly data-sly-list.listItem="${siteList.siteInfoList}">
<li data-attr="${listItem.siteattr}"><a class="" href="${listItem.link # extension='html'}" target="${listItem.newWindow == 'true'?'_blank':''}"><span class="site-text">${listItem.urltxt #context='html'}</span><span class="site-icon-link"></span></a></li>
</sly>
</ul>
</div>
</li>
</ul>
</div>
I have a dropdown menu in my carousel, but it's appearing behind the carousel as shown here:
[enter image description here][1]
I have set z index in every place, but it did nothing.
I want the dropdown to appear outside the carousel, as shown here:
I have set z index in every place, but it did nothing.
I want the dropdown to appear outside the carousel, as shown here

Search box looks different on mobile, cannot get it to be in the center of the page nor reduce the size of the search box

My site looks different on mobile, the hotel search box does not show up in it's entirety, so the labels at the bottom get cut off. Also I tried to add the following CSS code, it helped to center the hotel search box but I cannot get it to move the box closer to the header and make it smaller so that when I click on options they are not cut off:
#media only screen and (max-width:767px){
.containerBox {
width: 100%!important;
}
}
Here is the link and screenshot of what I am talking about.
Hotel Search box on the home page.
I will include the full code below.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
#selectCountry:ACTIVE, #destino:ACTIVE, #selectCountry:FOCUS, #destino:FOCUS {
color: #FFFFFF;
background-color: #ed8323; }
.select-complementarias {
border: 0px solid #dadada !important;
border-radius: 3px !important;
padding: 5px !important;
font-weight: bold !important;
color: #424547 !important;
width: 100%; }
.select-complementarias:ACTIVE, .select-complementarias:FOCUS {
color: #FFFFFF;
background-color: #ed8323; }
.searchCity {
min-width: 200px;
width: 100%;
color: #424547; }
.warning {
color: #FF0000 !important;
font-size: 14px; }
.numInputHidden, .elementHidden {
display: none; }
.divNewLine {
clear: left;
padding: 3px; }
.divCell {
float: left;
margin-right: 2px;
max-width: 236px;
width: 100%;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 3px; }
.cell-complementarias {
float: left;
margin-right: 2px;
width: 250px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 10px; }
.divCell-auto {
float: left;
margin-right: 2px;
width: 100%;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 3px; }
.divCellSmall {
float: left;
margin-right: 2px;
width: 110px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 3px; }
.divCell-20px {
float: left;
margin-right: 2px;
width: 20px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 3px; }
.divCell-50px {
float: left;
margin-right: 2px;
width: 50px;
padding-right: 5px;
padding-left: 5px;
padding-bottom: 3px; }
.divCell-130px {
float: left;
margin-right: 2px;
width: 130px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 3px; }
.divCell-100px {
float: left;
margin-right: 2px;
width: 100px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 3px; }
.time-hours {
width: 100px !important; }
.time-minutes {
width: 100px !important; }
.hoursFligths {
display: inline;
margin-left: 11px;
width: 130px !important; }
#selectsMenores select {
width: 50px; }
.textHidden {
display: none; }
.ui-datepicker {
font-size: 11px; }
.ui-widget {
font-size: 12px; }
.containerBox input {
border: 0px solid #dadada;
border-radius: 3px;
padding: 5px;
/*font-weight: bold;*/
line-height:21px!important;
width: 95%!important;
}
.containerBox select {
border: 0px solid #dadada !important;
border-radius: 3px !important;
padding: 5px !important;
/*font-weight: bold !important;*/
color: #424547 !important;
width: 100%;
-moz-appearance: none;
cursor: pointer;
height:auto;
}
#selectCountry {
width: 95% !important; }
.input-date {
width: 100%;
color: #424547; }
.input-date-home {
width: 357px !important;
color: #424547; }
.input-date:ACTIVE, .input-date-home:FOCUS, .input-date-home:ACTIVE, .input-date-home:FOCUS {
color: #FFFFFF;
background-color: #ed8323; }
.ui-widget {
font-weight: bold !important; }
.ui-widget-content {
font-weight: bold !important;
border: 0px solid #eee; }
.container-box-ticket, .container-box-hotel {
width: 375px !important; }
.container-box-ticket {
width: 375px !important; }
.containerBox {
font-family: arial;
border: 0px solid #dadada;
width: 512px!important;
background-color: #262626e8;
color: #FFFFFF;
font-size: 17px;
/*font-weight: bold;*/
padding: 10px;
position: relative; }
.containerBox label {
font-size: 12px;
font-weight: bold;
color: #fff;
display: inline-block;
}
.containerBox input:FOCUS {
border: 0px solid #dadada;
border-color: #53a69d;
box-shadow: 0 0 3px #000000;
background-color: #ed8323;
color: #FFFFFF; }
select:FOCUS, .containerBox input:ACTIVE, select:ACTIVE {
border: 0px solid #dadada !important;
border-color: #ed8323 !important;
box-shadow: 0 0 3px #000000 !important;
background-color: #ed8323 !important;
color: #FFFFFF !important; }
.containerBox button {
border: 0px solid #D8D8D8;
border-radius: 3px;
background-color: #F2F2F2;
font: arial;
font-size: 12px;
cursor: pointer;
width: 100px;
height: 35px!important; }
.containerBox button:HOVER {
border-radius: 3px;
border-color: #CED8F6;
background-color: #D8D8D8; }
#divbuttonverpreciosbuscando {
display: none; }
.spinner {
margin: 10px auto;
width: 50px;
height: 40px!important;
text-align: center;
font-size: 10px; }
.spinner > div {
background-color: #333;
height: 100%!important;
width: 6px;
display: inline-block;
-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
animation: sk-stretchdelay 1.2s infinite ease-in-out; }
.spinner .rect2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s; }
.spinner .rect3 {
-webkit-animation-delay: -1s;
animation-delay: -1s; }
.spinner .rect4 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s; }
.spinner .rect5 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s; }
#-webkit-keyframes sk-stretchdelay {
0%, 40%, 100% {
-webkit-transform: scaleY(0.4); }
20% {
-webkit-transform: scaleY(1); } }
#keyframes sk-stretchdelay {
0%, 40%, 100% {
transform: scaleY(0.4);
-webkit-transform: scaleY(0.4); }
20% {
transform: scaleY(1);
-webkit-transform: scaleY(1); } }
hr {
color: #ed8323;
border-color: #ed8323; }
.titulo {
font-size: 20px;
text-align: left;
margin-left: -15px;
margin-right: -15px; }
.titulo-segundo {
font-size: 12px;
margin-left: -8px;
margin-right: 38px;
margin-top: -28px;
position: fixed;
text-align: left;
width: 225px;
z-index: 110; }
#ver_precios, .buttonForm {
background-color: #ed8323 !important;
color: #FFFFFF !important;
font-weight: bold !important;
opacity: 1 !important;
border: 0 solid #d8d8d8;
border-radius: 3px;
cursor: pointer;
font-size: 12px;
width: 100px;
height: 35px;!important; }
.ui-datepicker {
background: #ffffff;
border: 1px solid #555;
color: #EEE;
border: 0px;
box-shadow: 0 0 3px #000000; }
.ui-datepicker-header {
position: relative;
padding-bottom: 10px;
background: #ffffff !important;
border: 0px !important; }
.ui-widget-header {
background: #ffffff !important; }
.ui-dialog .ui-dialog-titlebar {
color: #FFFFFF;
font-size: 16px;
font-weight: bold !important;
background: #262626; }
.ui-dialog .ui-dialog-titlebar .ui-button {
color: #FFFFFF !important;
font-size: 16px !important;
font-weight: bold !important;
background: #262626 !important; }
.ui-dialog .ui-dialog-titlebar .ui-state-focus {
background: red; }
.ui-dialog {
background: #262626;
position: fixed; }
.ui-datepicker-title {
background-color: #ffffff;
line-height: 1em !important; }
.ui-datepicker-month {
color: #ed8323;
padding: 0px !important;
margin: 0px !important;
background-color: #ffffff; }
.ui-datepicker-year {
color: #ed8323;
background-color: #ffffff; }
.ui-datepicker .ui-state-default {
background: #ffffff !important;
border: 0px solid #d3d3d3 !important; }
.ui-datepicker, .ui-datepicker .ui-datepicker-calendar .ui-state-default {
color: #000000 !important;
text-align: center; }
.ui-state-active {
border-radius: 0 !important;
background: #ed8323 !important;
cursor: pointer !important;
text-decoration: none !important; }
.ui-state-focus {
border-radius: 0 !important;
cursor: pointer !important;
text-decoration: none !important;
border: 0px; }
.ui-state-focus:HOVER {
border-color: transparent;
color: #FFFFFF !important;
background: #1ec7e6 !important; }
.ui-menu, .ui-menu-item {
background: #ed8323 none repeat scroll 0 0 !important; }
.ui-datepicker-calendar td a.ui-state-hover {
background: #ed8323 none repeat scroll 0 0 !important; }
.ui-datepicker-calendar td a.ui-state-active {
background: #ed8323 none repeat scroll 0 0 !important; }
.ui-datepicker-calendar td a.ui-state-focus {
background: #ed8323 none repeat scroll 0 0 !important; }
.ui-datepicker-title {
margin: 0 2.3em;
text-align: center; }
.ui-datepicker-year {
display: block;
font-size: 9px;
margin-left: -5px; }
.ui-datepicker table {
border-collapse: separate;
font-size: 0.9em; }
.calendarioIcon {
height: 19px!important;
margin: 6px 149px;
position: absolute; }
.close-dialog-icon {
cursor: pointer;
height: 51px;
margin: -22px 525px 0;
position: absolute; }
.calendarioIcon-hotel {
height: 19px!important;
margin: 3px 20px;
position: absolute;
right: 5%; }
.calendarioIcon-tickets {
height: 19px!important;
margin: 6px 438px;
position: absolute; }
.calendario-icon-homes {
height: 19px!important;
margin: 3px 440px;
position: absolute; }
.calendario-icon-arrow {
height: 25px!important;
margin: 3px 175px;
position: absolute; }
.ui-autocomplete-loading {
background: white url("material/ring-alt.svg") right center no-repeat;
background-size: 20px 20px; }
.spinner {
margin: 10px auto;
width: 50px;
height: 40px;
text-align: center;
font-size: 10px; }
.spinner > div {
background-color: #333;
height: 100%;
width: 6px;
display: inline-block;
-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
animation: sk-stretchdelay 1.2s infinite ease-in-out; }
.spinner .rect2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s; }
.spinner .rect3 {
-webkit-animation-delay: -1s;
animation-delay: -1s; }
.spinner .rect4 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s; }
.spinner .rect5 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s; }
#-webkit-keyframes sk-stretchdelay {
0%, 40%, 100% {
-webkit-transform: scaleY(0.4); }
20% {
-webkit-transform: scaleY(1); } }
#keyframes sk-stretchdelay {
0%, 40%, 100% {
transform: scaleY(0.4);
-webkit-transform: scaleY(0.4); }
20% {
transform: scaleY(1);
-webkit-transform: scaleY(1); } }
#divbuttonverpreciosbuscando {
display: none; }
.ui-corner-all {
border: 0px; }
#airline {
width: 100%!important; }
.label-hiden {
display: none !important; }
.containerBox-header {
opacity: 0.9 !important;
/* border-top-left-radius: 10px;
border-top-right-radius: 10px;*/ }
.containerBox-footer {
opacity: 1 !important;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
border-top-left-radius: 0px !important;
border-top-right-radius: 0px !important;
/* padding-top: 9px !important;
padding-bottom: 20px !important;*/
transition-duration: 0.4s;
transition-property: background;
/* height: 5px !important;*/
background-color: #ed8323 !important;
font-size: 14px;
font-weight: 500 !important; }
.containerBox-footer:HOVER {
background-color: #ed8323 !important;
cursor: pointer; }
.buscar-label {
margin-top: 5px !important; }
.ui-dialog .ui-dialog-titlebar, .ui-dialog label {
background: #262626 none repeat scroll 0 0 !important;
color: #FFFFFF; }
.error-input {
border-color: #FF0000;
box-shadow: 0 0 1em red;
background-color: #FBEFF2; }
.error-input:-ms-input-placeholder {
color: red !important; }
.error-input::-moz-placeholder {
color: red !important; }
.error-input:-moz-placeholder {
color: red !important; }
.error-input::-webkit-input-placeholder {
color: red !important; }
.containerBox input::-webkit-input-placeholder {
color: #000000; }
.containerBox input:-ms-input-placeholder {
color: #000000; }
.containerBox input::-moz-placeholder {
color: #000000; }
.containerBox input:focus::-webkit-input-placeholder {
color: #000000 !important; }
.containerBox input:focus:-ms-input-placeholder {
color: #000000 !important; }
.containerBox input:focus::-moz-placeholder {
color: #000000 !important; }
#not-found-sources {
color: #FFFFFF; }
.ui-autocomplete-input .ui-corner-all {
color: #000000 !important; }
.ui-autocomplete a {
color: #000000 !important; }
.box_float{
display: block;
position: absolute;
top: 90px;
z-index: 2;
}
li{
list-style-type: none!important;
margin: 0;
padding: 0;
}
.caja_fondo{
height:auto;
font-family: arial;
border: 0px solid #dadada;
opacity: 0.8;
color: #FFFFFF;
font-size: 17px;
/*font-weight: bold;*/
padding: 15px;
position: relative;
}
.catalog-area {
display: inline-block;
background-color: rgba(39,46,59,.8);
height: auto;
padding: 1px 1px 1px 1px;
width: 100%;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
/*.imagenes_circuitos {
height: 456px;
width: 370px;
padding: 1px 1px 1px 1px;
overflow-y: scroll;
}
.imagenes_circuitos_min{
padding-top: 20px;*/
}
.circuit_catalog {
display: table-cell;
z-index: 9;
padding: 1px 1px 1px 1px;
font-family: Arial, Helvetica, sans-serif;
/*font-weight: bold;*/
display: inline-block;
text-align: center;
color: gray;
display: inline-block;
border-radius: 25px;
vertical-align: middle;
border-radius: 25px;
}
.circuit_catalog a {
color: #3c5c8b;
font-weight: 700;
text-decoration: none;
outline: none;
font-family: Arial, Helvetica, sans-serif;
line-height: 12px;
/*font-weight: bold;*/
display: inline-block;
text-align: center;
color: gray;
display: inline-block;
}
/*.img_circuits {
opacity: .8;
width: 160px;
height: 200px;
border-radius: 15px;
box-shadow: 2px 2px 2px #3C5C8B;*/
}
.containerBoxCircuits {
font-family: arial;
border: 0px solid #dadada;
background-color: #262626;
color: #ffffff;
font-size: 17px;
/*font-weight: bold;*/
padding-left: 15px;
padding-right: 15px;
display: inline-block;
float: left;
opacity: .8;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.container-box-circuit{
margin-left:20px;
display:none;
}
/*.img_circuits_min {
width: 80px;
height: 100px;
border-radius: 15px;
box-shadow: 2px 2px 2px #3C5C8B;*/
}
.circuit_catalog_min {
font-family: Arial, Helvetica, sans-serif;
line-height: 12px;
/*font-weight: bold;*/
width: 88px;
height: 110px;
display: inline-block;
text-align: center;
color: gray;
display: inline-block;
border-radius: 25px;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: box-shadow;
transition-property: box-shadow;
}
.celdas {
float: left;
padding: 5px;
}
.containerBox-circuits {
padding-bottom: 20px;
}
/*.img_circuits_botmin {
background-color: #d42729;
position: absolute;
float: left;
left: 4px;
bottom: 10px;
width: 80px;
height: 23px;
line-height: 10px;
font-size: 7px;
color: white;
font-weight: inherit;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;*/
}
.textcatmin {
position: absolute;
float: left;
padding-top: 0px;
left: 0px;
width: 80px;
height: 22px;
line-height: 7px;
font-size: 7px;
color: white;
font-weight: inherit;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
overflow: hidden;
}
.containerBoxAll {
width: 512px!important;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
.tab-content .tab-menu button {
color: #fff;
cursor: pointer;
opacity: 1 !important;
padding-top: 15px !important;
padding-bottom: 15px !important;
transition-duration: 0.4s;
transition-property: background;
height: 5px !important;
background-color: #ed8323 !important;
width: 81px;
padding: 10px;
}
.tab-content .tab-menu button:HOVER {
background-color: #ed8323 !important;
cursor: pointer;
color:#000;
}
.tab-content .tab-menu button.active {
background-color: #262626!important;
color: #ed8323 ;
}
span.titulo-tabs {
word-wrap:normal;
float:left;
line-height: 0px;
}
.footerAll {
width: 512px!important;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
.form-service{
margin-left: 13px;
margin-right: -13px;
}
.CircuitsAll {
width: 511px!important;
opacity: 1!important;
}
.CircuitsAll:HOVER {
opacity: 1!important;
}
.containerBoxCircuitsAll:HOVER {
opacity: 1!important;
}
.containerBoxCircuitsAll{
width: 541px;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
.tab-content{
width:100%;
float:left;
}
input[type="radio"], input[type="checkbox"] {
margin-right: 0.5em;
width: 15px!important;
}
/*# sourceMappingURL=comun.css.map */

Use these css
#media(max-width:767px){
.html_header_transparency #top .avia-builder-el-0 .container, .html_header_transparency #top .avia-builder-el-0 .slideshow_caption {
padding-top: 0px;
}
#top .input-text, #top input[type="text"], #top input[type="input"], #top input[type="password"], #top input[type="email"], #top input[type="number"], #top input[type="url"], #top input[type="tel"], #top input[type="search"], #top textarea, #top select {
margin-bottom: 10px;
height: 39px;
}
.avia-slideshow li img {
display: none;
}
}
for center the box use it.
.containerBox {
margin: auto;
}
.containerBox-header {
opacity: 0.9 !important;
margin-top: 70px;
}
.avia_codeblock_section .avia_codeblock .widget {
top: 0;
left: 0;
}
for mobile view
#media (max-width: 767px)
#wrap_all #main #after_full_slider_1 .container .av-content-full .post-entry .entry-content-wrapper .avia_codeblock_section .avia_codeblock .widget {
width: 100% !important;
}
.avia_codeblock_section .avia_codeblock .widget {
left: 0;
top: 0;
}
}
if it's not work use !important after css like this - display: none !important;

onscroll add active class is not working

hi on scroll active class is not add to the li on click on a that works fine please look at it once.
<script>
$('nav a').on('click', function() {
var scrollAnchor = $(this).attr('data-scroll'),
scrollPoint = $('section[data-anchor="' + scrollAnchor + '"]').offset().top - 150;
$('body,html').animate({
scrollTop: scrollPoint
}, 500);
return false;
})
$(window).scroll(function() {
var windscroll = $(window).scrollTop();
if (windscroll >= 100) {
$('.wpb_wrapper section').each(function(i) {
if ($(this).position().top <= windscroll - 20) {
$('nav a.active').removeClass('active');
$('nav a').eq(i).addClass('active');
}
});
} else {
$('nav').removeClass('fixed');
$('nav a.active').removeClass('active');
$('nav a:first').addClass('active');
}
}).scroll();
</script>
.cs-hd {
font-weight: bold;
font-size: 24px;
}
.cs-para {
font-size: 19px;
}
/*first section */
.cs-secondpara {
padding-top: 15px;
}
.cs-lf {
background: #eaeaea;
padding: 30px;
border-radius: 15px;
}
.cs-lf p {
font-size: 15px;
font-weight: bold;
line-height: 30px;
}
.cs-pa {
border-bottom: 1px solid #a2a2a2;
padding-bottom: 30px;
}
.cs-ul {
line-height: 30px;
font-size: 15px;
padding-top: 30px;
}
.cs-bhd {
color: #29aae2;
font-weight: bold;
font-size: 21px;
}
/*second-section*/
.cs-im-bl {
display: inline-block;
border-right: 1px solid #9c9191;
padding-right: 20px;
width: 20%;
vertical-align: top;
}
.cs-bul {
display: inline-block;
font-size: 17px;
line-height: 27px;
width: 78%;
}
.cs-main {
background: white;
padding: 30px;
border-radius: 15px;
}
.cs-main p {
line-height:27px;
}
.p-four {
padding-top: 10px;
}
.cs-blu-hd {
color: #29aae2;
font-size: 22px;
}
/*third section*/
.cs-im {
display: inline-block;
vertical-align: top;
padding-right: 15px;
padding-top: 55px;
}
.cs-bul-third ul {
border-left: 1px solid #9c9191;
}
.cs-bul-third {
display: inline-block;
font-size: 17px;
line-height: 27px;
width: 67%;
}
/*tab section fourth */
.vc_tta-title-text {
font-size: 17px;
color: #231f20;
font-weight: bold;
}
.vc_tta-tab {
margin: 1px 0 0 0px !Important;
border: 1px solid #908789;
}
.vc_tta-color-grey.vc_tta-style-flat .vc_tta-tab.vc_active>a .vc_tta-title-text {
color: white;
}
.vc_tta-color-grey.vc_tta-style-flat .vc_tta-tab.vc_active>a {
background-color: #29aae2 !Important;
}
.vc_tta.vc_general .vc_tta-tab>a
{
padding: 14px 44px !important;
}
.vc_tta-color-grey.vc_tta-style-flat .vc_tta-tab>a:focus, .vc_tta-color-grey.vc_tta-style-flat .vc_tta-tab>a:hover {
background-color: transparent;
}
.vc_tta-color-grey.vc_tta-style-flat .vc_tta-tab>a {
background: transparent !Important;
}
.cs-list
{
font-size:17px;
line-height:30px;
}
.cs-border
{ border: 1px solid #c7c7c7;
border-radius: 15px;
}
.cs-border p
{
line-height: 27px;
}
.line-banner-section p a {
padding: 5px 5px 5px 5px !important;
width: 200px !important;
text-align: center;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-o-border-radius: 20px;
border-radius: 20px;
color: #41ABE1 !important;
background: #ffffff;
}
.line-banner-section p a:hover {
width: 200px !important;
background: rgba(255, 255, 255, 0);
color: #ffffff !important;
}
.cs-txt-blk {
margin-bottom: 0px;
}
/*nav bar*/
.menu {
width: 160px;
height: auto;
background-color: #eaeaea;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.light-menu {
width: 100%;
height: 75px;
background-color: rgba(255, 255, 255, 1);
position: fixed;
background-color:rgba(4, 180, 49, 0.6);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#menu-center {
width: auto;
height: auto;
margin: 0 auto;
padding: 0;
}
#menu-center ul {
margin: 0 !IMPORTANT;
padding: 10px 10px 10px 24px;
}
#menu-center ul li {
list-style: none;
margin: 0px 0px 20px 0;
width: 98px;
}
#menu-center .active {
font-size: 14px;
color: #fff;
text-decoration: none;
line-height: 16px;
font-weight: bold;
}
#menu-center a {
color: black;
text-decoration: none;
line-height: 16px;
font-size: 14px;
font-weight: bold;
}
#cs-index {
z-index: 1;
position: fixed;
left: -14px;
top: 130px;
width: 180px;
}
/*navigation bar links*/<body>
<div class="m1 menu">
<div id="menu-center">
<nav>
<ul>
<li>Innovating in<br>Entrepreneurship<br>services
</li>
<li>Training Future<br>and Present<br>Entrepreneurs
</li>
<li>Mentoring<br>and<br>Accelerating
</li>
<li> Working<br>Internationally
</li>
<li>Innovation and<br>Intrapreneurship<br>in Corporates
</li>
<li>Impact Real<br>Scale-ups
</li>
</ul>
</nav>
</div>
</div>
/*one section where scrolling comes its a wordpress site*/
<div class="wpb_wrapper"><div class="vc_empty_space" style="height: 70px"><span class="vc_empty_space_inner"></span></div>
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<section id="bottom" data-anchor="bottom">
<h4 class="cs-hd" style="text-align: center;">Innovation and Intrapreneurship in Corporates</h4>
</section></div>
</div>
<div class="wpb_single_image wpb_content_element vc_align_center">
<figure class="wpb_wrapper vc_figure">
<div class="vc_single_image-wrapper vc_box_border_grey"><img width="1035" height="490" src="http://changeschool.org/wp-content/uploads/2016/08/corporate-infographic.png" class="vc_single_image-img attachment-full" alt="corporate-infographic" srcset="http://changeschool.org/wp-content/uploads/2016/08/corporate-infographic.png 1035w, http://changeschool.org/wp-content/uploads/2016/08/corporate-infographic-768x363.png 768w" sizes="(max-width: 1035px) 100vw, 1035px"></div>
</figure>
</div>
<div class="vc_empty_space" style="height: 70px"><span class="vc_empty_space_inner"></span></div>
</div>
</body>
hi on scroll active class is not add to the li on click on a that works fine please look at it once.

$(window).scroll(function() {
var windscroll = $(window).scrollTop();
$('nav a').removeClass('active');
if (windscroll >= 100) {
$('.wpb_wrapper section').each(function(i) {
if ($(this).position().top <= windscroll - 20) {
var sectionName = $(this).data('anchor');
$('nav a[data-scroll=' + sectionName + ']').addClass('active');
}
});
} else {
$('nav').removeClass('fixed');
$('nav a:first').addClass('active');
}
});
Action to remove class active firing allays so I moved it to top.
To select link use his data attribute.