fixed navigation get scrolled along with the horizontal content when it in device size

Question

$(function() {
    var pull        = $('#pull');
        menu        = $('nav ul');
        menuHeight  = menu.height();
 
    $(pull).on('click', function(e) {
        e.preventDefault();
        menu.slideToggle();
    });
});
$(window).resize(function(){
    var w = $(window).width();
    if(w > 320 && menu.is(':hidden')) {
        menu.removeAttr('style');
    }
}); 





/**
 * HorizonScroll
 * Version: 1.1.0
 * URL: https://github.com/trgraglia/jquery.horizonScroll.js/
 * Description: This is a jQuery plugin which allows for websites to scroll left and right.
 * Requires: jQuery 1.10.2
 * Optional: jQuery TouchSwipe (http://labs.rampinteractive.co.uk/touchSwipe/)
 * Author: Anthony Graglia
 * Copyright: Copyright 2013 Anthony Graglia
 * License: MIT License
 */

// Semicolon to prevent breakage with concatenation.
;
(function ($) {
    'use strict';

    $.fn.horizon = function (options, i) {
        if (options === 'scrollLeft') {
            scrollLeft();
        } else if (options === 'scrollRight') {
            scrollRight();
        } else if (options === 'scrollTo') {
            if (isNumeric(i)) {
                scrollTo(+i, $.fn.horizon.defaults.scrollDuration);
            } else {
                scrollToId(i, $.fn.horizon.defaults.scrollDuration);
            }
        } else {
            $.extend($.fn.horizon.defaults, options);

            $.fn.horizon.defaults.sections = this;
            $.fn.horizon.defaults.limit = this.length;
            $.fn.horizon.defaults.i = 0;

            sizeSections();

            $(document).on('mousewheel DOMMouseScroll', function (e) {
                // Equalize event object.
                var evt = window.event || e;
                // Convert to originalEvent if possible.
                evt = evt.originalEvent ? evt.originalEvent : evt;
                // Check for detail first, because it is used by Opera and FF.
                var delta = evt.detail ? evt.detail * (-40) : evt.wheelDelta;

                scrollAction(delta);
            }).on('click', '.horizon-next', function () {
                scrollRight();
            }).on('click', '.horizon-prev', function () {
                scrollLeft();
            }).on('click', 'a[href^="#"]', function () {
                var hash = $(this).attr('href');
                if (-1 < hash.indexOf('#')) {
                    scrollToId(hash.split('#')[1], $.fn.horizon.defaults.scrollDuration);
                }
            });

            if ($.fn.horizon.defaults.swipe) {
                $(document).swipe({
                    // Generic swipe handler for all directions.
                    swipe: function (event, direction, distance, duration, fingerCount) {
                        if (scrolls[direction]) {
                            scrolls[direction]();
                        }
                    },
                    /*click: function (event, target) {
                     event.preventDefault();
                     event.stopPropagation();
                     event.stopImmediatePropagation();

                     //$(target).click();
                     },
                     tap: function (event, target) {
                     event.preventDefault();
                     event.stopPropagation();
                     event.stopImmediatePropagation();

                     $(target).click();
                     },*/
                    // Default is 75px, set to 0 for demo so any distance triggers swipe
                    threshold: 75
                });
            }

            $(window).on('resize', function () {
                sizeSections();
            }).on('keydown', function (e) {
                if (scrolls[e.which]) {
                    scrolls[e.which]();
                    e.preventDefault();
                }
            });

            return this;
        }
    };

    $.fn.horizon.defaults = {
        scrollTimeout: null,
        scrollEndDelay: 250,
        scrollDuration: 400,
        i: 0,
        limit: 0,
        docWidth: 0,
        sections: null,
        swipe: true,
        fnCallback: function (i) {
        }
    };

    function isNumeric(num) {
        return !isNaN(num)
    }

    function scrollToId(id, speed) {
        var i = -1;
        $.fn.horizon.defaults.sections.each(function (index, element) {
            if (id === $(this).attr('id')) {
                i = index;
            }
        });

        if (0 <= i) {
            scrollTo(i, $.fn.horizon.defaults.scrollDuration);
        }
    }

    // HTML animate does not work in webkit. BODY does not work in opera.
    // For animate, we must do both.
    // http://stackoverflow.com/questions/8790752/callback-of-animate-gets-called-twice-jquery
    var scrollTo = function (index, speed) {
        if (index > ($.fn.horizon.defaults.limit - 1) || index < 0) {
            console.log('Scroll where? I think you want me to go out of my limits. Sorry, no can do.');
            return;
        }

        console.log('Scroll to: ' + index);
        $.fn.horizon.defaults.i = index;

        var $section = $($.fn.horizon.defaults.sections[index]);
        $('html,body').animate({scrollLeft: $section.offset().left}, speed, 'swing', $.fn.horizon.defaults.fnCallback(index));

        if (index === 0) {
            $('.horizon-prev').hide();
            $('.horizon-next').show();
        } else if (index === $.fn.horizon.defaults.limit - 1) {
            $('.horizon-prev').show();
            $('.horizon-next').hide();
        } else {
            $('.horizon-next').show();
            $('.horizon-prev').show();
        }
    };

    var scrollLeft = function () {
        console.log('Scroll left');

        var i2 = $.fn.horizon.defaults.i - 1;

        if (i2 > -1) {
            scrollTo(i2, $.fn.horizon.defaults.scrollDuration);
        }
    };

    var scrollRight = function () {
        console.log('Scroll right');

        var i2 = $.fn.horizon.defaults.i + 1;

        if (i2 < $.fn.horizon.defaults.limit) {
            scrollTo(i2, $.fn.horizon.defaults.scrollDuration);
        }
    };

    // Executes on 'scrollbegin'.
    var scrollBeginHandler = function (delta) {
        // Scroll up, Scroll down.
        if (delta > 1) {
            scrollLeft();
        } else if (delta < -1) {
            scrollRight();
        }
    };

    // Executes on 'scrollend'.
    var scrollEndHandler = function () {
        $.fn.horizon.defaults.scrollTimeout = null;
    };

    var scrollAction = function (delta) {
        if ($.fn.horizon.defaults.scrollTimeout === null) {
            scrollBeginHandler(delta);
        } else {
            clearTimeout($.fn.horizon.defaults.scrollTimeout);
        }

        $.fn.horizon.defaults.scrollTimeout = setTimeout(scrollEndHandler, $.fn.horizon.defaults.scrollEndDelay);
    };

    var sizeSections = function () {
        var iInnerWidth = $(window).innerWidth();

        // Store window width and assign it to each panel or section.
        $.fn.horizon.defaults.docWidth = iInnerWidth;
        $.fn.horizon.defaults.sections.each(function () {
            $(this).width(iInnerWidth);
        });

        // Set the page to be a width large enough to include all panels.
        $('html').width($.fn.horizon.defaults.limit * iInnerWidth);

        // Scroll to current section without animation.
        scrollTo($.fn.horizon.defaults.i, 0);
    };

    var scrolls = {
        'right': scrollLeft,
        'down': scrollLeft,
        'left': scrollRight,
        'up': scrollRight,
        37: scrollLeft,
        38: scrollLeft,
        39: scrollRight,
        40: scrollRight
    };

})
(jQuery);
$('section').horizon();

/*main*/
header {
    background: #f5b335;
    height: 80px;
    position: fixed;
    top: 0;
    transition: top 0.2s ease-in-out;
    width: 100%;
 z-index:999;
}
@media screen and (max-width: 773px) {
header{
 height:50px;
 position:fixed;
 top:0;
 left:0;
 right:0;
 box-sizing:border-box;}
}


/*nav*/
nav {
    height: 80px;
    width: 100%;
    background: #fff;
    font-size: 11pt;
    font-weight: bold;
    position: relative;
    border-bottom: 2px solid #fff;
}
nav ul {
    padding: 0;
    width: 100%;
    height: 40px;
 text-align:center;
 margin-bottom:0;
}
nav li {
    display: inline;
    float: left;
}
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}

nav a {
    color: #000;
    display: inline-block;
    width: 100%;
    text-align: center;
    text-decoration: none;
    line-height: 80px;
}
nav a:hover{
 color:#000;
 text-decoration:none;
 border-bottom:2px black solid;
}
nav a:visited, nav a:active, nav a:link{
 text-decoration:none;
 color:#000;}
nav a#pull {
    display: none;
}       

@media screen and (max-width: 773px) {
    nav {
  height:50px;
        border-bottom: 0;
    }
 nav a{
  line-height:50px;}

    nav ul {
        display: none;
        height: auto;
  background:#fff;
    }
 nav li{
   border-bottom:1px dotted black; 
}
    nav a#pull {
        display: block;
        background-color: #fff;
        width: 100%;
        position: relative;
  text-align:left;
  padding-left:10px;
    }
    nav a#pull:after {
        content:"x";
        background: url('nav-icon.png') no-repeat;
        width: 30px;
        height: 30px;
        display: inline-block;
        position: absolute;
        right: 0px;
        top: 0px;
    }
}

@media only screen and (max-width : 320px) {
    nav li {
        display: block;
        float: none;
        width: 100%;
    }
    nav li a {
        border-bottom: 1px solid #576979;
    }
}

/*horizontal*/
html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

section {
 position:relative;
    float: left;
    height: 100%;
    padding: 80px 0 0 0;
    margin: 0;
}
@media screen and (max-width: 773px) {
section{
 padding-top:45px;
 
 }
}
#section-section1{
 background:cyan}
#section-section2{
 background:magenta}
#section-section3{
 background:yellow}
#section-section4{
 background:black;}
#section-section5{
 background:red;}
.banner{
 height:30%;
 background:#ccc;
 padding:0;}
.servicesdescription{
 height:60%;
 background:#999;}
.serviceslink{
 height:10%;
 bottom:0;
 text-align:center;
 background:#fff;}
.serviceslink a{
 text-decoration:none;
}
.serviceslinks{
 background:#ccc;
 color:#000;
 padding:20px;
 margin:10px 5px;}
@media screen and (max-width: 773px) {
.servicesdescription{
 height:60%;}

.serviceslinks:visited{
 background:#ccc;
 color:#000;
 }
.serviceslinks:hover, .serviceslinks:active, .currentservices {
 background:#CC0;
 color:#fff;}

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Our Services</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" type="text/css" href="style/bootstrap/css/bootstrap.min.css">
    <!-- custom -->
    <link rel="stylesheet" type="text/css" href="style/navigation.css">

    <link rel="stylesheet" type="text/css" href="style/main.css">
    <link rel="stylesheet" type="text/css" href="style/style.css">
  </head>
<body>
            <header class="navigation nav-down">
<nav class="clearfix">
    <ul class="clearfix">
        <li class="col-md-2 col-sm-12 col-xs-6"><a href="#">Home</a></li>
        <li class="col-md-2 col-sm-12 col-xs-6"><a href="#">2</a></li>
        <li class="col-md-2 col-sm-12 col-xs-6"><a href="#">3</a></li>
        <li class="col-md-2 col-sm-12 col-xs-6"><a href="#">4</a></li>
        <li class="col-md-2 col-sm-12 col-xs-6"><a href="#">5</a></li>
        <li class="col-md-2 col-sm-12 col-xs-6"><a href="#">6</a></li>  
    </ul>
    <a href="#" id="pull">Menu</a>
</nav>
            </header>
        <section data-role="section" id="section-section1" class="ourservices">
          <div class="banner row">
                  banner 1
                </div>
                <div class="servicesdescription row">
                desc
                </div>
                <div class=" serviceslink row">
                 <div class="col-md-offset-1" style="background:#000;">
                  <a href="#section-section1"><div class="serviceslinks col-md-2 currentservices">1</div></a>
                  <a href="#section-section2"><div class="serviceslinks col-md-2">2</div></a>
                  <a href="#section-section3"><div class="serviceslinks col-md-2">3</div></a>
                  <a href="#section-section4"><div class="serviceslinks col-md-2">4</div></a>
                  <a href="#section-section5"><div class="serviceslinks col-md-2">5</div></a>                                                                                                
                     </div>
                </div>
        </section>
        <section data-role="section" id="section-section2" class="ourservices">
          <div class="banner row">
                  banner 2
                </div>
                <div class="servicesdescription row">
                desc
                </div>
                <div class=" serviceslink row">
                 <div class="col-md-offset-1" style="background:#000;">
                  <a href="#section-section1"><div class="serviceslinks col-md-2">1</div></a>
                  <a href="#section-section2"><div class="serviceslinks col-md-2 currentservices">2</div></a>
                  <a href="#section-section3"><div class="serviceslinks col-md-2">3</div></a>
                  <a href="#section-section4"><div class="serviceslinks col-md-2">4</div></a>
                  <a href="#section-section5"><div class="serviceslinks col-md-2">5</div></a>                                                                                                
                     </div>
                </div>
        </section>
        <section data-role="section" id="section-section3" class="ourservices">
          <div class="banner row">
                  banner 3
                </div>
                <div class="servicesdescription row">
                desc
                </div>
                <div class=" serviceslink row">
                 <div class="col-md-offset-1" style="background:#000;">
                  <a href="#section-section1"><div class="serviceslinks col-md-2">1</div></a>
                  <a href="#section-section2"><div class="serviceslinks col-md-2">2</div></a>
                  <a href="#section-section3"><div class="serviceslinks col-md-2 currentservices">3</div></a>
                  <a href="#section-section4"><div class="serviceslinks col-md-2">4</div></a>
                  <a href="#section-section5"><div class="serviceslinks col-md-2">5</div></a>                                                                                                
                     </div>
                </div>
        </section>
        <section data-role="section" id="section-section4" class="ourservices">
          <div class="banner row">
                  banner 4
                </div>
                <div class="servicesdescription row">
                desc
                </div>
                <div class=" serviceslink row">
                 <div class="col-md-offset-1" style="background:#000;">
                  <a href="#section-section1"><div class="serviceslinks col-md-2">1</div></a>
                  <a href="#section-section2"><div class="serviceslinks col-md-2">2</div></a>
                  <a href="#section-section3"><div class="serviceslinks col-md-2">3</div></a>
                  <a href="#section-section4"><div class="serviceslinks col-md-2 currentservices">4</div></a>
                  <a href="#section-section5"><div class="serviceslinks col-md-2">5</div></a>                                                                                                
                     </div>
                </div>
        </section>
        <section data-role="section" id="section-section5" class="ourservices">
          <div class="banner row">
                  banner 5
                </div>
                <div class="servicesdescription row">
                desc
                </div>
                <div class=" serviceslink row">
                 <div class="col-md-offset-1" style="background:#000;">
                  <a href="#section-section1"><div class="serviceslinks col-md-2">1</div></a>
                  <a href="#section-section2"><div class="serviceslinks col-md-2">2</div></a>
                  <a href="#section-section3"><div class="serviceslinks col-md-2">3</div></a>
                  <a href="#section-section4"><div class="serviceslinks col-md-2">4</div></a>
                  <a href="#section-section5"><div class="serviceslinks col-md-2 currentservices">5</div></a>                                                                                                
                     </div>
                </div>
        </section>


</body>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.4/jquery.touchSwipe.min.js"></script>    


</html>

i have fixed navigation menu with relative <nav> inside of 100% width of fixed <header> and horizontal content with 6 dives it work just fine in desktop, but when i open it in device size it went wrong.

1. the responsive navigation menu width mimicing the accumulated width of dives below. which is very wide and i can't see the navigation menu before i'm stopping to the 3rd or 4th div
2. when reach the 5th div it scrolling down until nowhere
3. it only went like this in device size like i-pad size or smaller

what did i miss? i tried to change my fixed header width in half 50% width, but have no luck, it getting worse. please help

i'm using bootstrap

navigation reference from Responsive Nav

horizontal scrolling reference from Horizontal Scrolling