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
Related
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>
I have this problem where an input .remove-button is not working as intended. When I click on the div(.tag) that contains .remove-button or around it, the .remove-button code will trigger, even though it was only set to it. Also for some reason, the code seems to be running multiple times deleting everything in the array
edit:
it seems to be triggering the click when I click anywhere inside the #course-tag-container.
course_splice.
script:
//...
jQuery("input.remove-button").click((event)=>{
//find course text
course_inv.splice( course_inv.indexOf(jQuery(event.target).closest(".tag").find(".course").text()), 1
);
event.target.closest(".tag").remove();
});
//...
html for tag:
<div class="tag">
<div class="course-wrap">
<p class="course">LEED v4 Project Management</p>
<div class="input-wrapper">
<input type="image" name="removeButton"
src="http://builtenvironmentplus.org/wp-content/uploads/2021/07/course_remove.svg"
alt="remove button" class="remove-button">
</div>
</div>
</div>
screenshot of what it looks like:
full script:
<script>
let course_inv = [];
jQuery( document ).ready(function() {
//course field
let course_field = document.getElementById("course-field");
course_field.placeholder = "LEED v4 Project Management,LEED for Homes Workshop: Part2,...";
jQuery(".wpcf7").wrap('<div id="form-container"/>');
//add tag container
jQuery(".wpcf7").before('<label class="tag-label">Selected Course<span style="font-size: 18px">(s)</span><span style="color:red;">*</span><div id="course-tag-container"/></label>');
jQuery("#form-container").append('<button id="fake-submit" type="button">Send</button>');
jQuery("#fake-submit").click((event)=>{
jQuery("#course-field").val("");
jQuery("#course-field").val(course_inv.join(", "));
jQuery("#submit-button").click();
})
});
jQuery(document).on('ready ajaxComplete', function () {
//add button functionality
jQuery(".et_pb_post").wrap('<div class="course-wrapper" />');
jQuery(".et_pb_post").after('<input type="image" name="addButton" src="http://builtenvironmentplus.org/wp-content/uploads/2021/07/course_add.svg" width="100px" height="auto" alt="add button" class="add-button">');
jQuery(".add-button").wrap('<div/>');
//adding button functionality
jQuery(".add-button").click((event)=>{
let course_name = jQuery(event.target).closest(".course-wrapper").find(".entry-title").text();
if(course_inv.indexOf(course_name) === -1){
course_inv.push(course_name);
jQuery("#course-tag-container").append('<div class="tag"><div class="course-wrap"><p class="course">'+course_name+'</p><div class="input-wrapper"><input type="image" name="removeButton" src="http://builtenvironmentplus.org/wp-content/uploads/2021/07/course_remove.svg" alt="remove button" class="remove-button"> </div></div></div>');
jQuery("input.remove-button").click((event)=>{
console.log("start------------\n"+"courses:" +course_inv.join(","));
//find course text
console.log( "index: "+course_inv.indexOf(jQuery(event.target).closest(".tag").find(".course").text()) );
course_inv.splice(
course_inv.indexOf(jQuery(event.target).closest(".tag").find(".course").text()), 1
);
console.log("courses:" +course_inv.join(",")+"\n end----------------");
event.target.closest(".tag").remove();
});
}else{
jQuery(".tag:contains('"+course_name+"')").addClass('animate')
jQuery(".tag:contains('"+course_name+"')").on("animationend", ()=>{
jQuery(".tag:contains('"+course_name+"')").removeClass('animate');
});
}
})
});
</script>
CSS:
input,select{
border-radius: 20px !important;
padding-left: 20px !important;
padding-right: 20px !important;
margin-bottom: 10px !important;
font-size: 18px !important;
}
ul input:nth-of-type(2){
border:none;
}
.searchandfilter p
{
margin-top: 1em;
display: block !important;
}
.searchandfilter ul
{
display: block !important;
}
.searchandfilter h4
{
margin:20px 0;
font-size:20px !important;
}
.widget-area .searchandfilter li, .widget-area .searchandfilter p
{
display:block !important;
}
/*style the wp-pagenavi pagination links*/
.wp-pagenavi a,
.wp-pagenavi span {
color: #000000;
background: #f1f3f5;
font-size: 1em !important;
line-height: 1em;
font-weight: bold !important;
padding: 0.45em 0.8em !important;
border-radius: 100px;
transition: all .5s;
}
/*style the wp-pagenavi current page number*/
.wp-pagenavi span.current {
color: #ffffff !important;
background: #0070fc !important;
font-size: 17px !important;
border-radius: 100px;
}
/*style the wp-pagenavi pagination links on hover*/
.wp-pagenavi a:hover {
color: #ffffff!important;
background: #0070fc!important;
}
/*style the wp-pagenavi pages text*/
.wp-pagenavi .pages {
background: none;
}
/*remove border and center the wp-pagenavi links*/
.wp-pagenavi {
border-top: none;
text-align: center;
}
/*contact form css*/
.wpcf7 {
background-color: #DBDBDB;
border-radius: 5px;
}
.wpcf7-form{
margin-left: 0px;
margin-right: 0px;
margin-top: 15px;
margin-bottom: 5px;
padding: 0px;
}
#course-field{
background-color: #deddbd;
}
.wpcf7-textarea {
width: 100% !important;
}
.wpcf7 input {
margin-top: 5px;
width: 100%;
height: 43px;
font-size: 17px !important;
padding-left: 10px;
border-radius: 1px !important;
margin-bottom: 5px !important;
}
.wpcf7 label{
color: black !important;
font-size: 19px;
}
.textarea{
height: 150px !important;
margin-bottom: -10px;
font-family: verdana !important;
}
#submit-button{
background: #0078d3;
border: 0px solid !important;
border-radius: 5px !important;
font-size: 18px;
color: white;
transition: background-color 250ms;
cursor: pointer;
margin-bottom: -10px !important;
}
#submit-button:hover {
background-color: #3382BE;
}
.title{
display: inline-block;
}
.color{
background-color: #ededed !important;
}
.course-wrapper{
display: flex;
}
.add-button{
transition: transform 250ms;
margin-top: 50%;
}
.add-button:hover{
transform: rotate(-90deg);
background: url(black.png);
filter: invert(15%) sepia(100%) saturate(7499%) hue-rotate(196deg) brightness(94%) contrast(102%);
}
#blog-container{
left: 10px;
}
#fake-submit{
width: 100%;
border: none;
height: 44px;
border-radius: 5px;
background-color: #005DA4;
color: white;
font-size: 15px;
margin-top: 36px;
transition: background-color 250ms;
cursor: pointer;
margin-top: -14px;
}
#fake-submit:hover{
background-color: #3382BE;
}
/*css for the tags*/
.tag {
background-color: rgb(220 220 220);
display: inline-block;
margin-bottom: 5px;
border-radius: 25px;
}
.course{
border-radius: 15px;
margin:0px;
margin-top: 15px;
margin-bottom: 15px;
font-size:15px;
margin-left:15px !important;
}
.input-wrapper{
margin-left: -10px;
margin-right: -15px
}
.remove-button{
width:60px !important;
height:auto;
margin-top:10% !important;
margin-bottom:0px !important;
}
.course-wrap{
display:flex;
align-items: center;
margin-bottom:-10px;
margin-top:-10px;
}
#course-tag-container{
margin-top: 10px;
margin-bottom: -10px !important;
background-color: white;
padding: 10px;
padding-top: 15px;
padding-bottom: 15px;
border-radius: 1px;
border: #BBBBBB 1px solid;
min-height: 43px;
}
#form-container{
background-color: #DBDBDB;
padding: 10px;
padding-top: 12px;
border-radius: 5px;
}
#course-field, #submit-button{
display: none;
}
.tag-label {
color: black;
font-size: 19px;
}
#keyframes highlight-tag {
50%{
background-color: #75ACD8;
}
100%{
background-color: #DBDBDB;
}
}
.animate{
animation: highlight-tag 1s ease-in-out;
}
It was the label all along!
In this line I wrap the entire container that's holding my tags with a label. This for some reason expands my iput to the entire label region.
jQuery(".wpcf7").before('<label class="tag-label">Selected Course<span style="font-size: 18px">(s)</span><span style="color:red;">*</span><div id="course-tag-container"/></label>');
When changing the label to a paragraph and stopping it right before the div, it worked as intended.
jQuery(".wpcf7").before('<p class="tag-label">Selected Course<span style="font-size: 18px">(s)</span><span style="color:red;">*</span></p><div id="course-tag-container"/>');
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>
I'm trying to create on scroll function, once the user scroll to certain point the menu add CSS background color attribute that appears.
But I'm having trouble, I believe I've used the correct scroll function usage, the syntax is also correct but the CSS() jQuery function doesn't goes to action as you can see in this codepen
How can I change CSS attribute once the user scrolling to certain point on the screen?
$(document).ready(function() {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 100) {
$(".top-nav").css('background', 'blue');
} else {
$(".top-nav").css('background', 'transparent');
}
});
});
html,
body {
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: scroll;
overflow-x: hidden;
}
.main {
height: 2000px;
}
img {
width: 100%;
}
body {
background-color: #f7f7f7;
transition: margin-right 0.5s, margin-left 0.5s;
}
a {
text-decoration: none;
color: white;
}
.wrapper {
display: grid;
transition: margin-right 0.5s, margin-left 0.5s;
}
.logo-red {
color: #005aa3;
font-size: 37px;
}
/* Top Nav Bar */
.top-nav {
position: fixed;
top: 0;
z-index: 10;
width: 100%;
display: grid;
grid-template-columns: auto auto;
color: white;
}
.top-nav .nav-scroller {
background-color: blue;
}
.top-nav h1 {
padding-left: 3rem;
font-size: 1.6rem;
}
.top-nav div {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
padding-right: 4rem;
}
.top-nav ul {
list-style: none;
display: none;
}
.top-nav li {
display: inline-block;
padding: 0.7rem 1rem;
}
.top-nav div ul li a {
color: #fff;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.15em;
display: inline-block;
padding: 10px 10px;
position: relative;
}
.top-nav div ul li a:hover,
.top-nav div ul li a:focus {
outline: none;
color: #fff;
transition: 0.5s all ease;
}
.top-nav div ul li a:after {
background: none repeat scroll 0 0 transparent;
bottom: 0;
content: "";
display: block;
height: 2px;
left: 50%;
position: absolute;
background: #0068bd;
transition: width 0.3s ease 0s, left 0.3s ease 0s;
width: 0;
}
.top-nav div ul li a:hover:after {
width: 100%;
left: 0;
}
/* Burger menu */
.side-nav {
height: 100%;
width: 0;
position: fixed;
z-index: 2;
right: 0;
background-color: #36454f;
opacity: 1;
overflow-x: hidden;
padding: 60px 0;
transition: width 0.5s;
-webkit-box-shadow: inset 12px 0px 18px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: inset 12px 0px 18px 0px rgba(0, 0, 0, 0.75);
box-shadow: inset 12px 0px 18px 0px rgba(0, 0, 0, 0.75);
}
.side-nav a {
padding: 10px 10px 10px 30px;
text-decoration: none;
text-align: right;
font-size: 5vw;
margin: 0 20px;
color: white;
border-bottom: 2px #ccc solid;
display: block;
transition: 0.3s ease-in-out;
}
.side-nav a:hover {
color: #fff;
border-radius: 0.5rem;
}
.side-nav .btn-close {
position: absolute;
top: 0;
left: 0;
font-size: 50px;
font-weight: bold;
border: none;
margin-left: 0;
}
#media (max-width:1024px) {
.top-nav {
min-height: 4rem;
}
.top-nav div {
padding-right: 1rem;
}
.top-nav h1 {
padding-left: 1rem;
padding-top: 0.6rem;
}
}
#media (min-width:1024px) {
#burger-menu {
display: none;
}
.top-nav ul {
display: inline;
margin: 0;
padding: 0;
}
.contact form {
width: 50vw;
}
.top-nav h1 {
padding-top: 0.3rem;
}
}
#yd {
font-family: 'Rubik', sans-serif;
font-style: italic;
color: #bdbdbd;
}
#yd {
transition: 0.5s all ease;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght#500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght#600&display=swap" rel="stylesheet">
<script src="https://use.fontawesome.com/releases/v5.0.10/js/all.js"></script>
<div id="grid-wrapper" class="wrapper">
<nav class="top-nav">
<h1>
<a href="#" id="logo">
<span id="yd">yotam dahan</span>
<span class="logo-red">.</span>
<span id="com">COM</span>
</a>
</h1>
<div>
<ul style="direction: rtl;">
<li>שירותים</li>
<li>תיק עבודות</li>
<li>שמור על קשר</li>
</ul>
<a href="#!" id="burger-menu" onclick="toggleSideMenu()">
<i class="fas fa-bars" style="color: white; font-size: 22px;"></i>
</a>
</div>
</nav>
<div id="side-menu" class="side-nav">
×
שירותים
תיק עבודות
שמור על קשר
</div>
</div>
<div class="main"></div>
The issue is because you've set overflow: scroll on the body element so the window isn't scrolling, the body is. As such the event handler is on the wrong element.
Also note that you should avoid putting CSS styling (as well as HTML) in your JS code. A better approach is using CSS classes. Then you can use toggleClass(). Try this:
jQuery($ => {
$('body').scroll(function () {
var scroll = $(this).scrollTop();
$('.top-nav').toggleClass('blue', scroll >= 100);
});
});
html,
body {
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: scroll;
overflow-x: hidden;
}
.main {
height: 2000px;
}
img {
width: 100%;
}
body {
background-color: #f7f7f7;
transition: margin-right 0.5s, margin-left 0.5s;
}
a {
text-decoration: none;
color: white;
}
.wrapper {
display: grid;
transition: margin-right 0.5s, margin-left 0.5s;
}
.logo-red {
color: #005aa3;
font-size: 37px;
}
/* Top Nav Bar */
.top-nav {
position: fixed;
top: 0;
z-index: 10;
width: 100%;
display: grid;
grid-template-columns: auto auto;
color: white;
}
.top-nav.blue {
background-color: blue;
}
.top-nav .nav-scroller {
background-color: blue;
}
.top-nav h1 {
padding-left: 3rem;
font-size: 1.6rem;
}
.top-nav div {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
padding-right: 4rem;
}
.top-nav ul {
list-style: none;
display: none;
}
.top-nav li {
display: inline-block;
padding: 0.7rem 1rem;
}
.top-nav div ul li a {
color: #fff;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.15em;
display: inline-block;
padding: 10px 10px;
position: relative;
}
.top-nav div ul li a:hover,
.top-nav div ul li a:focus {
outline: none;
color: #fff;
transition: 0.5s all ease;
}
.top-nav div ul li a:after {
background: none repeat scroll 0 0 transparent;
bottom: 0;
content: "";
display: block;
height: 2px;
left: 50%;
position: absolute;
background: #0068bd;
transition: width 0.3s ease 0s, left 0.3s ease 0s;
width: 0;
}
.top-nav div ul li a:hover:after {
width: 100%;
left: 0;
}
/* Burger menu */
.side-nav {
height: 100%;
width: 0;
position: fixed;
z-index: 2;
right: 0;
background-color: #36454f;
opacity: 1;
overflow-x: hidden;
padding: 60px 0;
transition: width 0.5s;
-webkit-box-shadow: inset 12px 0px 18px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: inset 12px 0px 18px 0px rgba(0, 0, 0, 0.75);
box-shadow: inset 12px 0px 18px 0px rgba(0, 0, 0, 0.75);
}
.side-nav a {
padding: 10px 10px 10px 30px;
text-decoration: none;
text-align: right;
font-size: 5vw;
margin: 0 20px;
color: white;
border-bottom: 2px #ccc solid;
display: block;
transition: 0.3s ease-in-out;
}
.side-nav a:hover {
color: #fff;
border-radius: 0.5rem;
}
.side-nav .btn-close {
position: absolute;
top: 0;
left: 0;
font-size: 50px;
font-weight: bold;
border: none;
margin-left: 0;
}
#media (max-width: 1024px) {
.top-nav {
min-height: 4rem;
}
.top-nav div {
padding-right: 1rem;
}
.top-nav h1 {
padding-left: 1rem;
padding-top: 0.6rem;
}
}
#media (min-width: 1024px) {
#burger-menu {
display: none;
}
.top-nav ul {
display: inline;
margin: 0;
padding: 0;
}
.contact form {
width: 50vw;
}
.top-nav h1 {
padding-top: 0.3rem;
}
}
#yd {
font-family: "Rubik", sans-serif;
font-style: italic;
color: #bdbdbd;
}
#yd {
transition: 0.5s all ease;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght#500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght#600&display=swap" rel="stylesheet">
<script src="https://use.fontawesome.com/releases/v5.0.10/js/all.js"></script>
<div id="grid-wrapper" class="wrapper">
<nav class="top-nav">
<h1><span id="yd">yotam dahan</span><span class="logo-red">.</span><span id="com">COM</span></h1>
<div>
<ul style="direction: rtl;">
<li>שירותים</li>
<li>תיק עבודות</li>
<li>שמור על קשר</li>
</ul>
<i class="fas fa-bars" style="color: white; font-size: 22px;"></i>
</div>
</nav>
<div id="side-menu" class="side-nav">
×
שירותים
תיק עבודות
שמור על קשר
</div>
</div>
<div class="main"></div>
We have a website. It has navigation section with some menu. It is a single page application.
The requirement is if we are in the home, or in any other section, it should highlight the respective menu. It should do so on scrolling to the required section.
In this sample website i'm going highlight menu item during smooth scroll. I have tried $('body').scrollspy({ target: '#menu' }) this one but couldn't help me
*/
(function ($) {
'use strict';
jQuery(document).ready(function () {
/* Preloader */
$(window).load(function () {
$('.preloader').delay(800).fadeOut('slow');
});
/* Smooth Scroll */
$('a.smoth-scroll').on("click", function (e) {
var anchor = $(this);
$('html, body').stop().animate({
scrollTop: $(anchor.attr('href')).offset().top - 50
}, 1000);
e.preventDefault();
});
$('body').scrollspy({ target: '#menu' })
/* Scroll Naviagation Background Change with Sticky Navigation */
$(window).on('scroll', function () {
if ($(window).scrollTop() > 100) {
$('.header-top-area').addClass('navigation-background');
} else {
$('.header-top-area').removeClass('navigation-background');
}
});
/* Mobile Navigation Hide or Collapse on Click */
$(document).on('click', '.navbar-collapse.in', function (e) {
if ($(e.target).is('a') && $(e.target).attr('class') != 'dropdown-toggle') {
$(this).collapse('hide');
}
});
$('body').scrollspy({
target: '.navbar-collapse',
offset: 195
});
/* Scroll To Top */
$(window).scroll(function(){
if ($(this).scrollTop() >= 500) {
$('.scroll-to-top').fadeIn();
} else {
$('.scroll-to-top').fadeOut();
}
});
$('.scroll-to-top').click(function(){
$('html, body').animate({scrollTop : 0},800);
return false;
});
/* Tooltip */
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
/* Ajaxchimp for Subscribe Form */
$('#mc-form').ajaxChimp();
/* Global Style */
body {
font-size: 12px;
font-weight: 400;
line-height: 24px;
letter-spacing: 1px;
height: 100%;
font-family: 'Poppins', sans-serif;
}
html,
body {
height: 100%
}
::selection {
background-color: #f7639a;
color: #ffffff;
}
::-moz-selection {
background-color: #f7639a;
color: #ffffff;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Poppins', sans-serif;
}
a {
text-decoration: none;
}
img {
width: 100%;
}
a {
color: #4c9cef;
}
a:hover,
a:active{
background: pink;
}
a:focus {
/*color: #f7639a;
text-decoration: none;
outline: none;*/
}
p {
line-height: 28px;
}
b {
font-weight: 600;
}
ul,
li {
margin: 0;
padding: 0;
}
fieldset {
border: 0 none;
margin: 0 auto;
padding: 0;
}
.no-padding {
padding: 0
}
.pink-color {
color: #f7639a !important;
}
.pink-color-bg {
background-color: #f7639a !important;
}
.section-space-padding {
padding: 100px 0px;
}
.section-title {
text-align: center;
}
.section-title h2 {
margin-top: 0;
font-weight: 600;
font-size: 30px;
}
.section-title p {
font-weight: 400;
line-height: 25px;
margin-bottom: 40px;
}
.bg-cover {
background-repeat: no-repeat;
}
.pattern-bg {
background: url(../images/bg/pattern-bg.png);
background-repeat: repeat;
}
.grabbing {
cursor: url(../images/owl-carousel/grabbing.png) 8 8, move;
}
.divider > i {
color: #f7639a;
font-size: 21px;
}
.divider {
position: relative;
width: 126px;
margin: 0 auto;
overflow: hidden;
text-align: center;
}
.divider:after,
.divider:before {
content: ' ';
width: 43px;
position: absolute;
border-bottom: dotted 2px #ffffff;
top: 50%;
margin-top: -4px;
}
.divider:before {
left: 0;
}
.divider:after {
right: 0;
}
.divider.dark:after,
.divider.dark:before {
border-color: #b2b2b2;
}
.button {
border: none;
border-radius: 5px;
font-family: inherit;
font-size: 17px;
color: inherit;
background: none;
cursor: pointer;
padding: 20px 60px;
display: inline-block;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 700;
outline: none;
position: relative;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.button:after {
content: '';
position: absolute;
z-index: -1;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.button-style {
border: 3px solid #fff;
color: #fff;
}
.button-style:hover,
.button-style:active,
.button-style:focus {
color: #ffffff;
background: #4c9cef;
}
.button-style-color-2:hover,
.button-style-color-2:active,
.button-style-color-2:focus {
color: #ffffff;
background: #f7639a !important;
}
.button-style-dark {
border: 3px solid #000000;
color: #000000;
}
/* Preloader */
.preloader {
background: #F9F9F9;
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 99999;
}
.preloader p {
position: absolute;
top: 48%;
left: 50%;
text-align: center;
font-size: 20px;
color: #333333;
}
.preloader:before, .preloader:after {
content: "";
width: 20px;
height: 20px;
position: absolute;
top: 40%;
left: 40%;
background-color: #4c9cef;
animation: squaremove 1s ease-in-out infinite;
-webkit-animation: squaremove 1s ease-in-out infinite;
}
.preloader:after {
bottom: 0px;
background-color: #f7639a;
animation-delay: 0.3s;
}
#keyframes squaremove {
0%, 100%{
-webkit-transform: translate(0,0) rotate(0);
-ms-transform: translate(0,0) rotate(0);
-o-transform: translate(0,0) rotate(0);
transform: translate(0,0) rotate(0);
}
25%{
-webkit-transform: translate(40px,40px) rotate(45deg);
-ms-transform: translate(40px,40px) rotate(45deg);
-o-transform: translate(40px,40px) rotate(45deg);
transform: translate(40px,40px) rotate(45deg);
}
50%{
-webkit-transform: translate(0px,80px) rotate(0deg);
-ms-transform: translate(0px,80px) rotate(0deg);
-o-transform: translate(0px,80px) rotate(0deg);
transform: translate(0px,80px) rotate(0deg);
}
75%{
-webkit-transform: translate(-40px,40px) rotate(45deg);
-ms-transform: translate(-40px,40px) rotate(45deg);
-o-transform: translate(-40px,40px) rotate(45deg);
transform: translate(-40px,40px) rotate(45deg);
}
}
/* Home Section and Navigation Menu */
.home-section {
background: #f1f1f1;
padding-top: 60px;
}
.table {
margin-bottom: 0px;
}
.table a {
color: #ffffff;
}
.table > tbody > tr > td {
padding: 15px;
border: 3px solid #e4e4e4;
}
.table tr > td {
padding: 11px 13px;
}
tr:nth-child(1) > td {
border-top:0px;
}
tr > td:nth-child(1){
background-color: #ffffff;
font-weight: 500;
font-size: 13px;
color: #888888;
width: 140px;
}
tr > td:nth-child(2) {
font-weight: 500;
color: #ffffff;
background: #4c9cef;
}
.header-top-area {
position: fixed;
left: 0;
top: 0;
width: 100%;
z-index: 9999;
-webkit-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}
.logo {
padding-top: 28px;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.logo a {
display: block;
color: #333333;
letter-spacing: 6px;
font-weight: 600;
font-size: 14px;
border-bottom: 4px solid #f7639a;
width: 92px;
}
.navigation-menu .navbar-nav li a {
color: #333333;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 1px;
padding: 30px 15px;
-webkit-transition: .3s;
transition: .3s;
font-weight: 600;
}
.navigation-menu .navbar-nav li a:hover {
background: none;
color: #f7639a;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.nav li a:focus,
.nav li a:hover {
background: none;
color: #4c9cef;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.navbar {
margin: 0;
}
.navigation-background {
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
background: #4c9cef;
}
.navigation-background .logo {
padding-top: 18px;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.navigation-background .logo a {
color: #ffffff;
}
.navigation-background .navigation-menu .navbar-nav li a {
color: #fff;
padding: 20px 15px;
-webkit-transition: .3s;
transition: .3s;
}
.navigation-background .navigation-menu .navbar-nav li a:hover {
color: #fff;
}
/* Scroll To Top */
.scroll-to-top {
background-color: #4c9cef;
display: none;
width: 60px;
height: 60px;
font-size: 25px;
border-radius: 100%;
line-height: 67px;
text-align: center;
color: #fff;
position: fixed;
right: 20px;
bottom: 30px;
z-index: 999;
box-shadow: 0px 1px 2px 0px rgba(90, 91, 95, 0.15);
transition: all 0.3s ease-in-out;
}
.scroll-to-top:hover,
.scroll-to-top:focus {
background-color: #f7639a;
color: #ffffff;
box-shadow: 0px 16px 22px 0px rgba(90, 91, 95, 0.3);
}
/* Responsive */
#media only screen and (max-width: 1199px) {
.experience-circle i {
font-size: 30px;
}
.experience-content{
margin-left: 75px;
}
.experience-content:after,
.experience-content:before {
top: 30%;
}
}
#media only screen and (min-width: 767px) and (max-width: 991px) {
.navigation-menu .navbar-nav li a {
padding: 30px 11px;
font-size: 12px;
}
.navigation-background .navigation-menu .navbar-nav li a {
padding: 30px 11px;
font-size: 12px;
}
.navigation-background .logo {
padding-top: 28px;
}
.margin-left-setting {
margin-left: 0px !important;
}
}
#media only screen and (max-width: 991px) {
.call-to-action h2 {
font-size: 20px;
}
}
#media only screen and (max-width: 767px) {
.navbar-toggle .icon-bar {
background: #f7639a;
}
.navigation-background .navbar-toggle .icon-bar {
background: #ffffff;
}
.navbar-toggle {
margin-right: 0px;
margin-top: -30px;
}
.navbar {
min-height: 0px;
}
.navigation-menu .navbar-nav li a {
padding: 11px 15px;
color: #ffffff;
}
.navigation-menu .navbar-nav li a:hover {
color: #ffffff;
}
.navigation-background .navigation-menu .navbar-nav li a:hover {
color: #ffffff;
}
.navigation-background .navigation-menu .navbar-nav li a {
padding: 11px 15px;
}
.navbar-fixed-bottom .navbar-collapse,
.navbar-fixed-top .navbar-collapse {
max-height: 420px;
}
.navbar-toggle {
margin-top: -30px;
}
.navbar-collapse {
background: #4c9cef;
}
.navigation-background .navbar-collapse {
background: #4c9cef;
}
.section-title h2 {
font-size: 22px;
}
.testimonial-word {
padding: 0;
}
.testimonial-carousel-list {
margin-top: 0px;
}
.call-to-action h2 {
font-size: 18px;
line-height: 35px;
}
.contact-us-detail {
left: 39%;
}
.owl-prev {
left: 5px;
}
.owl-next {
right: 5px;
}
.scroll-to-top {
width: 45px !important;
height: 45px !important;
font-size: 20px !important;
line-height: 52px !important;
right: 8px !important;
bottom: 15px !important;
}
}
#media only screen and (max-width: 555px) {
.social-icon li a {
width: 40px;
height: 40px;
line-height: 44px;
font-size: 16px;
}
.section-title h2 {
font-size: 16px;
font-weight: 500;
}
.section-title p {
font-weight: 300;
font-size: 12px;
}
.statistics-content > h5 {
font-size: 20px;
}
.statistics-content > span {
font-size: 10px;
}
.statistics-icon {
font-size: 30px;
}
.services-section hr {
width: 35px;
}
.services-section h3 {
font-size: 12px;
}
.services-section .services-detail {
width: 180px;
height: 180px;
}
.services-section .services-detail i {
font-size: 30px;
margin-top: 45px;
}
.owl-theme .owl-controls .owl-buttons div {
padding: 6px 10px;
width: 40px;
height: 40px;
line-height: 36px;
font-size: 8px;
}
.contact-us-detail {
left: 30%;
}
}
#media only screen and (max-width: 500px) {
.experience {
margin-left: 0px;
border: 0px;
}
.experience-circle {
margin: 0 auto;
position: static;
margin-bottom: 20px;
}
.experience-content {
padding: 10px 15px;
margin-left: 0px;
text-align: center;
}
.experience-content:after,
.experience-content:before {
display: none;
}
}
#media only screen and (max-width: 449px) {
.button {
font-size: 13px;
padding: 14px 28px;
font-weight: 600;
}
.contact-us-detail {
left: 25%;
}
}
/* Useful Classes */
/* Spacing ( with Margin and Padding ) */
/* Margin */
.margin-0 {
margin: 0px !important;
}
/* Margin Top */
.margin-top-0 {
margin-top: 0px !important;
}
.margin-top-10 {
margin-top: 10px !important;
}
.margin-top-20 {
margin-top: 20px !important;
}
.margin-top-30 {
margin-top: 30px !important;
}
.margin-top-40 {
margin-top: 40px !important;
}
.margin-top-50 {
margin-top: 50px !important;
}
.margin-top-60 {
margin-top: 60px !important;
}
.margin-top-70 {
margin-top: 70px !important;
}
.margin-top-80 {
margin-top: 80px !important;
}
.margin-top-90 {
margin-top: 90px !important;
}
.margin-top-100 {
margin-top: 100px !important;
}
.margin-top-120 {
margin-top: 120px !important;
}
.margin-top-150 {
margin-top: 150px !important;
}
.margin-top-200 {
margin-top: 200px !important;
}
/* Margin Bottom */
.margin-bottom-0 {
margin-bottom: 0px !important;
}
.margin-bottom-10 {
margin-bottom: 10px !important;
}
.margin-bottom-20 {
margin-bottom: 20px !important;
}
.margin-bottom-30 {
margin-bottom: 30px !important;
}
.margin-bottom-40 {
margin-bottom: 40px !important;
}
.margin-bottom-50 {
margin-bottom: 50px !important;
}
.margin-bottom-60 {
margin-bottom: 60px !important;
}
.margin-bottom-70 {
margin-bottom: 70px !important;
}
.margin-bottom-80 {
margin-bottom: 80px !important;
}
.margin-bottom-90 {
margin-bottom: 90px !important;
}
.margin-bottom-100 {
margin-bottom: 100px !important;
}
.margin-bottom-120 {
margin-bottom: 120px !important;
}
.margin-bottom-150 {
margin-bottom: 150px !important;
}
.margin-bottom-200 {
margin-bottom: 200px !important;
}
/* Padding */
.padding-0 {
padding: 0px !important;
}
/* Padding Top */
.padding-top-0 {
padding-top: 0px !important;
}
.padding-top-10 {
padding-top: 10px !important;
}
.padding-top-20 {
padding-top: 20px !important;
}
.padding-top-30 {
padding-top: 30px !important;
}
.padding-top-40 {
padding-top: 40px !important;
}
.padding-top-50 {
padding-top: 50px !important;
}
.padding-top-60 {
padding-top: 60px !important;
}
.padding-top-70 {
padding-top: 70px !important;
}
.padding-top-80 {
padding-top: 80px !important;
}
.padding-top-90 {
padding-top: 90px !important;
}
.padding-top-100 {
padding-top: 100px !important;
}
.padding-top-120 {
padding-top: 120px !important;
}
.padding-top-150 {
padding-top: 150px !important;
}
.padding-top-200 {
padding-top: 200px !important;
}
/* Padding Bottom */
.padding-bottom-0 {
padding-bottom: 0px !important;
}
.padding-bottom-10 {
padding-bottom: 10px !important;
}
.padding-bottom-20 {
padding-bottom: 20px !important;
}
.padding-bottom-30 {
padding-bottom: 30px !important;
}
.padding-bottom-40 {
padding-bottom: 40px !important;
}
.padding-bottom-50 {
padding-bottom: 50px !important;
}
.padding-bottom-60 {
padding-bottom: 60px !important;
}
.padding-bottom-70 {
padding-bottom: 70px !important;
}
.padding-bottom-80 {
padding-bottom: 80px !important;
}
.padding-bottom-90 {
padding-bottom: 90px !important;
}
.padding-bottom-100 {
padding-bottom: 100px !important;
}
.padding-bottom-120 {
padding-bottom: 120px !important;
}
.padding-bottom-150 {
padding-bottom: 150px !important;
}
.padding-bottom-200 {
padding-bottom: 200px !important;
}
/* Colors */
.color-1 {
color: #f306a0;
}
.color-2 {
color: #d60bfb;
}
.color-3 {
color: #d8be10;
}
.color-4 {
color: #0fd28a;
}
.color-5 {
color: #f97400;
}
.color-6 {
color: #08a6f3;
}
/* Background Color */
.bg-color-1 {
background-color: #f306a0;
}
.bg-color-2 {
background-color: #d60bfb;
}
.bg-color-3 {
background-color: #d8be10;
}
.bg-color-4 {
background-color: #0fd28a;
}
.bg-color-5 {
background-color: #f97400;
}
.bg-color-6 {
background-color: #08a6f3;
}
/* Tooltip Styles */
.tooltip-inner {
font-style: italic;
padding: 10px 12px;
min-width: 150px;
width: 100%;
}
.tooltip.top {
margin-top:-15px;
}
.tooltip.bottom {
margin-top:15px;
bottom: auto;
left: auto;
right: auto;
}
.tooltip.left {
margin-right:15px;
}
.tooltip.right {
margin-left:15px;
}
.tooltip-color .tooltip-inner {
color: #fff;
}
/* UiPasta Credit */
.uipasta-credit {
color: #333333;
text-align: center;
}
.uipasta-credit a {
color: #4c9cef;
font-weight: 600;
}
.uipasta-credit a:hover {
color: #f7639a;
}
<div class="header-top-area">
<div class="container">
<div class="row">
<div class="col-sm-3">
<div class="logo">
WebRes
</div>
</div>
<div class="col-sm-9">
<div class="navigation-menu">
<div class="navbar">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="menu" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a class="smoth-scroll" href="#home">Home <div class="ripple-wrapper"></div></a>
</li>
<li><a class="smoth-scroll" href="#about">About</a>
</li>
<li><a class="smoth-scroll" href="#portfolio">Portfolio</a>
</li>
<li><a class="smoth-scroll" href="#testimonials">Testimonial</a>
</li>
<li><a class="smoth-scroll" href="#services">services</a>
</li>
<li><a class="smoth-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Here is the image of sample where I need to highlight menu during scroll
For every page you have, assign a variable for example in your Home.php
at the top of the page
<?php $page = "home" ?>
then in your navigation/toolbar
<li class=" <?php if($page == "home"){echo "active";}?> "> Home </li>
and in your css file you can customize whatever style you want with the active