Nav css doesn't work after jquery.show ()
My nav has a border at the bottom on hover, after you slide to the site my first navs are hidden and my second nav is shown. The navs have the same css, but my border bottom on the second nav doesn't work. Is this a problem with my css or jquery? Can anyone help me fix this?
HTML:
<header>
<a href="#home" id="logo" class="smoothScroll">
<img src="img/logo.png">
</a>
<nav>
<a href="#home" class="smoothScroll">Home</a>
<a href="#about" class="smoothScroll">About</a>
<a href="#projects" class="smoothScroll">Projects</a>
<a href="#contact" class="smoothScroll">Contact</a>
</nav>
</header>
<div id="header" class="fade">
<a href="#home" id="logo" class="smoothScroll">
<img src="img/logo-white.png">
</a>
<nav>
<a href="#home" class="smoothScroll">Home</a>
<a href="#about" class="smoothScroll">About</a>
<a href="#projects" class="smoothScroll">Projects</a>
<a href="#contact" class="smoothScroll">Contact</a>
</nav>
</div>
Jquery:
$(window).scroll(function() {
if ($(window).scrollTop() > 100 ){
$('header').show();
$('header').removeClass('slideUp');
$('header').addClass('slideDown');
$('#header').addClass('hide');
} else {
$('header').addClass('slideUp');
$('#header').removeClass('hide');
};
});
CSS
header, #header{
height: 75px;
background: rgba(26, 28, 30, 0.75);
position: fixed;
left: 0;
top: 0;
width: 100%;
z-index: 50;
}
header{
display: none;
}
#header{
background-color: transparent;
}
nav{
position: fixed;
right: 0;
margin-top: 22.5px;
margin-right: 30px;
z-index: 55;
}
nav a:link, nav a:visited{
position: relative;
display: inline-block;
padding: 0px 10px 0px 10px;
text-decoration: none;
font-size: 1.5em;
color: #fffffa;
}
nav a:after{
content: '';
display: block;
margin: auto;
width: 0px;
background: transparent;
transition: width .5s ease,
background-color .5s ease;
}
nav a:hover:after{
width: 100%;
border-bottom: 2px solid #fffffa !important;
}
source to share
It looks like your JQuery has some syntax problems in id selectors. Be sure to include#
$(window).scroll(function() {
if ($(window).scrollTop() > 100 ){
$('#header').show();
$('#header').removeClass('slideUp');
$('#header').addClass('slideDown');
$('#header').addClass('hide');
} else {
$('#header').addClass('slideUp');
$('#header').removeClass('hide');
};
});
Edit
For the tip, I revisited this issue and developed a fiddle with my interpretation of what I believe will solve this. Continuous feedback will be great in solving this problem.
$(window).scroll(function() {
if ($(window).scrollTop() > 100 ){
$('header').addClass('hide');
$('#header').removeClass('hide');
} else {
$('#header').addClass('hide');
$('header').removeClass('hide');
};
});
Updated JSFiddle link
source to share
The first problem in your script is the HTML. You should put the second nav inside the header element like this:
<header>
<nav id="first-nav">
<a href="#home" class="smoothScroll">Home</a>
<a href="#about" class="smoothScroll">About</a>
<a href="#projects" class="smoothScroll">Projects</a>
<a href="#contact" class="smoothScroll">Contact</a>
</nav>
<nav id="second-nav">
<a href="#home" class="smoothScroll">Home</a>
<a href="#about" class="smoothScroll">About</a>
<a href="#projects" class="smoothScroll">Projects</a>
<a href="#contact" class="smoothScroll">Contact</a>
</nav>
</header>
I have given the IDs "first-nav" and "second-nav" for ease of operation. The second problem is your jQuery. In the if state, you tell jQuery to hide the header element when the browser scrolls over 100. This issue is because the nav element needs to be used inside the header element .
I have edited your jQuery.
$(document).ready(funciton() {
//hide the second nav
$('#second-nav').hide();
//when the scroll event fired
$(window).scroll(function() {
if ($(window).scrollTop() > 100) {
$('#second-nav').show();
$('#first-hav').hide();
}
else {
$('#first-nav').show();
$('#second-hav').hide();
}
});
});
If there is anything confusing, please let me know, I will be happy to help.
source to share