0

working on my Site's navigation, I am trying to make the header look like this, the following works in a manner that when you scroll up, it shows the menu and when you scroll down, it hides and when you are at top the page, it keeps showing

https://wake.com/

but as of now, my navigation is sticky, like it shows when you scroll down and scroll up, it keeps there

my piece of code is this for the navigation

HTML Code

<header id="header"> 
    <!-- start Navbar (Header) -->
    <nav class="navbar navbar-primary navbar-fixed-top navbar-sticky-function">
      <div id="top-header">
        <div class="container">
          <div class="row">
            <div class="col-xs-12 col-sm-6 clearfix">
              <div class="top-header-widget welcome">
                <p>Welcome Guest | <a href="javascript:void(0);" class="linkApply">Apply</a></p>
              </div>
            </div>
            <div class="col-sm-6 clearfix hidden-xs">
              <div class="top-header-widget pull-right"> <i class="fa fa-phone"></i> call (111) 255-4433 </div>
            </div>
          </div>
        </div>
      </div>
      <div class="container">
        <div class="navbar-header"> <a class="navbar-brand" href="index.html"><img class="imgcontrol" src="images/o.png" alt="Maike your Car Guy" border="0" /></a></div>
        <div id="navbar" class="collapse navbar-collapse navbar-arrow pull-left">
          <ul class="nav navbar-nav" id="responsive-menu">
            <li> <a href="#">About</a>
              <ul>
                <li><a href="index.html#aboutme">Why?</a></li>
              </ul>
            </li>
            <li> <a href="#">Resources</a>
              <ul>
                <li><a href="howitworks.html">How it works</a></li>
                <li><a href="videos.html"> Videos</a></li>
              </ul>
            </li>
            <li><a href="contact.html">Contact</a></li>
            <li><a href="apply.html" class="onred">Apply</a></li>
          </ul>
        </div>
        <!--/.nav-collapse --> 

      </div>
      <div id="slicknav-mobile"></div>
    </nav>
    <!-- end Navbar (Header) --> 

  </header>

CSS Code

.navbar {
    border-bottom: 0;
    -webkit-transition: all 0.1s ease-in-out 0s;
    -moz-transition: all 0.1s ease-in-out 0s;
    -ms-transition: all 0.1s ease-in-out 0s;
    -o-transition: all 0.1s ease-in-out 0s;
    transition: all 0.1s ease-in-out 0s;
}

.navbar-brand {
    float: left;
    font-size: 24px;
    line-height: 32px;
    font-weight: 500;
    position: relative;
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -ms-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
    padding-top: 20px;
    padding-bottom: 50px;
    color: #555;
    margin-right: 25px;
}

.navbar-brand i {
    color: #0D7CC9;
    font-size: 32px;
    display: block;
    margin-top: 0;
    float: left;
    margin-right: 7px;
}

.navbar-toggle .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 0
}

.navbar-toggle .icon-bar + .icon-bar {
    margin-top: 4px
}

.navbar-nav {
    border-left: 1px solid #EEEEEE;
    padding-left: 25px;
}

.navbar-nav > li:not(:last-child) {
    margin-right: 10px;
}

.navbar-nav > li > a {
    line-height: 72px;
    font-weight: 500;
    font-size: 14px;
    padding-top: 0;
    padding-bottom: 0;
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -ms-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
    letter-spacing: 1.5px;
    color: #fff;
        font-family: 'Frank Ruhl Libre', Old Standard TT;
}

.navbar-nav > li > a .border {
    padding: 3px 10px;
    border-color: rgba(255, 255, 255, 0.7);
}

.navbar-nav > li.navbar-separator span {
    position: relative;
    padding: 0 20px;
}

.navbar-nav > li.navbar-separator span:after {
    content: "";
    height: 50px;
    width: 1px;
    background: rgba(255, 255, 255, 0.9);
    position: absolute;
    top: 10px;
    left: 50%;
    -ms-transform: rotate(40deg);
    -webkit-transform: rotate(40deg);
    transform: rotate(40deg);
}


/* Main Menu Dropdown */

.navbar-nav li {
    position: relative;
}

.navbar-nav li ul {
    z-index: 9999;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 70px;
    left: 0;
    width: 190px;
    display: none;
    background-color: #FFF;
    border: 1px solid #EEEEEE;
    border-top: 2px solid #0095cd;
}

.navbar-nav li ul li a {
    border-bottom: 1px solid #EEEEEE;
    display: block;
    padding: 8px 15px;
    font-size: 13px;
    -webkit-transition: all 0.2s ease-in-out 0s;
    -moz-transition: all 0.2s ease-in-out 0s;
    -ms-transition: all 0.2s ease-in-out 0s;
    -o-transition: all 0.2s ease-in-out 0s;
    transition: all 0.2s ease-in-out 0s;
    font-weight: 400;
    color: #636363;
}

.navbar-nav li > ul > li:last-child > a,
.navbar-nav li > ul > li > ul > li:last-child > a {
    border-bottom: 0;
}

.navbar-nav li ul li:hover a {
    padding-left: 20px;
    padding-right: 10px;
        color: #0095cd;
}

.navbar-nav li ul li ul {
    position: absolute;
    left: 188px;
    top: -2px;
    box-shadow: -10px 1px 20px rgba(0, 0, 0, 0.1);
}

.navbar-nav li ul li:hover ul li a {
    padding-left: 15px;
    padding-right: 15px;
}

.navbar-nav li ul li ul li:hover a {
    padding-left: 20px;
    padding-right: 10px;
}


/* Mega Menu */

.navbar-nav > li.mega-menu {
    position: inherit!important;
    left: 0;
}

.navbar-nav > li.mega-menu ul {
    left: 0%;
    width: 100%;
    top: 70px;
    padding-top: 30px;
    padding-bottom: 30px;
}

.navbar-nav > li.mega-menu:hover > a,
.navbar-nav > li.mega-menu > a:hover,
.navbar-nav > li.dropdown:hover > a,
.navbar-nav > li.dropdown > a:hover,
.navbar-nav > li.dropdown.active > a,
.navbar-nav > li.dropdown.active > a:hover,
.navbar-nav > li:hover > a,
.navbar-nav > li.active > a {
    color: #0095cd !important;
    background: none !important;
}

.navbar-arrow > ul > li .arrow-indicator {
    margin-left: 7px;
    color: #CCC;
}

.navbar-arrow ul ul > li .arrow-indicator {
    position: absolute;
    top: 50%;
    right: 15px;
    margin-top: -8px;
    font-size: 16px;
    color: #CCC;
}

.megamenu-container .arrow-indicator {
    display: none !important;
}

@media only screen and (max-width: 991px) {
    .navbar {
        margin: 0;
    }
    .navbar-brand {
        padding-top: 9px;
        padding-bottom: 0;
        line-height: 30px;
    }
    .navbar-arrow > ul > li .arrow-indicator,
    .navbar-arrow ul ul > li .arrow-indicator {
        display: none !important;
    }
    .navbar-fixed-top {
        position: relative !important;
        clear: both;
    }
}

@media (max-width: 767px) {
    .navbar-nav .open .dropdown-menu > li > a {
        line-height: 23px;
    }
}

@media (min-width: 768px) {
    .navbar-nav {
        margin: 0;
    }
}
/**
 * Header Top
 */

#top-header {
    -webkit-transition: all 0.15s ease-in-out 0s;
    -moz-transition: all 0.15s ease-in-out 0s;
    -ms-transition: all 0.15s ease-in-out 0s;
    -o-transition: all 0.15s ease-in-out 0s;
    transition: all 0.15s ease-in-out 0s;
    opacity: 1;
    background: #0095cd;
    color: rgba(255, 255, 255, 0.9);
    font-size: 11px;
    letter-spacing: 0.5px;
    overflow: hidden;
    /*border-bottom: 1px solid #662935;*/
}

#top-header a {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 700;
}

#top-header a:hover {
    color: rgba(255, 255, 255, 1);
}

#top-header ul {
    margin: 0;
}

.top-header-widget {
    float: left;
    border-right: 1px solid rgba(255,255,255,0.45);
    padding: 5px;
    padding-top: 7px;
    padding-right: 10px;
    padding-left: 10px;
}

.top-header-widget:first-child {
    padding-left: 0;
}

.top-header-widget:last-child {
    padding-right: 0;
    border-right: none;
}

.top-header-widget.welcome {
    background: #0078a6;
    position: relative;
    padding-right: 15px;
}

.top-header-widget.welcome:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -500px;
    width: 500px;
    background: #0078a6;
}

.top-header-widget.welcome:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: -70px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 50px 0 0 70px;
    border-color: transparent transparent transparent #0078a6;
}

.top-header-widget.pull-right:first-child {
    padding-left: 10px;
}

.top-header-widget.pull-right:last-child {
    padding-right: 10px;
    border-right: 1px solid rgba(255,255,255,0.45);
}

@media only screen and (max-width: 1199px) {}

@media only screen and (max-width: 991px) {}

@media (max-width: 767px) {
    .top-header-widget {
        margin: 0;
    }
    #top-header,
    .top-header-widget,
    .top-header-widget p,
    .top-header-widget a {
        font-size: 11px !important;
        line-height: 12px;
    }
}


/**
 * Sticky Header
 */

.navbar-sticky {
    background-color: transparent;
    border-color: #e6e6e6;
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.12);
}

.navbar-sticky.navbar-default {
    padding-top: 0;
    padding-bottom: 0;
}

.navbar-sticky .navbar-brand {
    padding-top: 20px;
    padding-bottom: 40px;
}

.navbar-sticky .navbar-brand:hover,
.navbar-sticky .navbar-brand:focus {
    color: #4D82B8;
    background-color: transparent
}

.navbar-sticky .navbar-text {
    color: #565656
}

.navbar-sticky .navbar-nav > li > a {
    line-height: 55px;
    color: #fff;
        padding-top: 5px;
}

.navbar-sticky .navbar-nav > li > a:hover,
.navbar-sticky .navbar-nav > li > a:focus {
    color: #4D82B8;
    background-color: transparent
}

.navbar-sticky .navbar-nav > .active > a,
.navbar-sticky .navbar-nav > .active > a:hover,
.navbar-sticky .navbar-nav > .active > a:focus {
    color: #4D82B8;
    background-color: transparent
}

.navbar-sticky .navbar-nav > .disabled > a,
.navbar-sticky .navbar-nav > .disabled > a:hover,
.navbar-sticky .navbar-nav > .disabled > a:focus {
    color: #444444;
    background-color: transparent
}

.navbar-sticky .navbar-nav > li.navbar-separator span:after {
    background: #4D82B9;
}

.navbar-sticky .navbar-nav > li > ul {
    top: 60px;
}

.navbar-sticky .navbar-nav > li.mega-menu ul {
    top: 60px;
}

.navbar-sticky #top-header {
    opacity: 0;
}

.with-top-header .slicknav_btn {
    top: 49px;
}

.with-top-header .navbar-sticky {
    margin-top: -40px;
}

@media only screen and (max-width: 1199px) {}

@media only screen and (max-width: 991px) {
    .with-top-header .navbar-sticky {
        margin-top: -40px;
    }
    .navbar-sticky .navbar-brand {
        padding-top: 9px;
    }
}

@media (max-width: 767px) {
    .with-top-header .slicknav_btn {
        top: 42px;
    }
}

@media (max-width: 479px) {}

this is the JS i have 

/**
     * Main Menu Slide Down Effect
     */

    // Mouse-enter dropdown
    $('#navbar li').on("mouseenter", function() {
            $(this).find('ul').first().stop(true, true).delay(350).slideDown(500, 'easeInOutQuad');
    });

    // Mouse-leave dropdown
    $('#navbar li').on("mouseleave", function() {
            $(this).find('ul').first().stop(true, true).delay(100).slideUp(150, 'easeInOutQuad');
    });



    /**
     * Effect to Bootstrap Dropdown
     */
    $('.bt-dropdown-click').on('show.bs.dropdown', function(e) {   
        $(this).find('.dropdown-menu').first().stop(true, true).slideDown(500, 'easeInOutQuad'); 
    }); 
    $('.bt-dropdown-click').on('hide.bs.dropdown', function(e) { 
        $(this).find('.dropdown-menu').first().stop(true, true).slideUp(250, 'easeInOutQuad'); 
    });

2 Answers2

0

You won't be able to reach this effect without Javascript. I suggest that you use this widget which works great: http://wicky.nillia.ms/headroom.js/

Niss
  • 116
  • 6
  • That's Kind of what i am looking but how i can integrate it in my script –  Jun 13 '17 at 19:24
  • The documentation is pretty good on the website. The mandatory steps are: Add the class .headroom to your header: `
    ...
    ` Include the headroom script in your HTML. Load the script by adding: ``     – Niss Jun 14 '17 at 11:46
0

Since you didn't include your javascript, can't see what you're doing.

The premise of the interaction you want to listen for the scroll event on the window (using javascript), and add or remove the appropriate CSS class depending on the direction of the scroll (which would animate it up out of view, or down into the view)

To determine the direction of the scroll, check this out: Javascript - Detecting scroll direction

Edit: The event you want to listen to is scroll, and you want to listen to it on the window.

$(window).on('scroll',function(e){
    //if scroll direction = up, add class to show nav bar (including animations)
    //else remove class if nav hasClass
});

You should probably have a class that makes it visible by changing the top position. It should be negative by default so it is hidden by default, and add your css transition to the default style of the nav. The "show" class will only have the new top position. It should be zero. This would be the only property that transitions when the nav bar hides or shows.

When the class is added to show the nav bar, it would transition the top property to slide down to 0, and when the class is removed to hide it, the top property slides up to the negative number. This negative number should be at least the height of the nav bar, or more, to properly hide it off-screen.

Meggg
  • 192
  • 1
  • 8