I recently purchased the Mix Responsive App Landing Page theme from Theme Forest and have had success customizing it, except for when I started removing unnecessary sections. Ever since the removal, the header does not function as intended - it should be hidden on page load and appear upon scrolling.
To see how it used to look, you can visit: .
I suspect that the issue lies within the JavaScript code, but my expertise in that area is limited.
HTML:
<!-- Header -->
<header>
<nav class="navbar navbar-custom navbar-top navbar-fixed-top sticky-navigation" role="navigation">
<div class="container-fluid">
<a class="page-scroll btn-new btn-bold pull-right" href="#download">Download </a>
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
<i class="fa fa-bars"></i>
</button>
<!-- LOGO -->
<a class="navbar-brand nav-logo" href="#page-top">
<img src="images/headerlogo.png" height="28" width="40" alt="mix"/>
</a>
</div>
<!-- NAVIGATION LINKS -->
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
<ul class="nav navbar-nav">
<li class="active"><a class="page-scroll" href="#page-top">Home</a></li>
<li><a class="page-scroll" href="#firstFeature">Features </a></li>
<li><a class="page-scroll" href="#team">Team</a></li>
<li><a class="page-scroll" href="#contact">Contact</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
</header><!-- Header end -->
CSS:
/* Header and nav --------------------------------------------------- */
.sticky-navigation {
-webkit-transition: all .8s ease-in-out;
-moz-transition: all .8s ease-in-out;
-o-transition: all .8s ease-in-out;
transition: all .8s ease-in-out;
background: rgba(0, 0, 0, 0.8);
border: none;
border-bottom: 1px solid #222;
padding:5px 0 !important;
margin-bottom: 0 !important;
-webkit-backface-visibility: hidden;
top: -100px;
}
.nav-logo{
padding: 0px 15px;
height: 50px;
margin-top: 15px;
overflow: hidden;
}
.nav-logo:focus{
outline: none;
}
.navbar{
margin-bottom: 0px;
}
.navbar-nav {
float: left;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.navbar-nav li a {
padding: 10px;
line-height: 30px;
font-size: 14px;
color: #aaa;
position: relative;
background: transparent !important;
font-weight: 700;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
.navbar-nav li a:focus{
outline: none;
}
.navbar-nav li.active a,.navbar-nav li a:hover {
color:#Eb2629;
}
header .btn-new{
padding: 8px 18px;
font-size: 12px;
margin: 6px 0px 6px 10px;
}
.navbar-toggle{
padding: 5px 10px;
margin-right: 10px;
}