// nav sizeing
        $(window).on("scroll resize load", function () {

          if($(window).width() > 863) {

                wide();

                if ($(window).scrollTop() > 75) {
                     headerLow();
                 } else {
                        headerHigh();
                 }
          }
          else {
            headerLow();
            thin();
          }
        });

        var headerHigh = function () {
         $('#head').removeClass('mini');
         $('#head').css('height', '75' );
        };

        var headerLow = function () {
            $('#head').addClass('mini');
            $('#head').css('height', '60' );
        };

        var thin = function() {
            $('#slider').css({ 'padding-top' : '60px'});

        };

        var wide = function() {
            $('#slider').css( 'padding-top' , '78px');
        };
// end nav sizeing

<div id="head">
    <div class="container">
        <a href="#"><strong class="logo pull-left"><h1>CAVO</h1>
        </strong></a> <!-- end logo !-->
        <ul class="nav pull-right">
            <li><a href="#">Menu</a>
                <ul>
                    <li><a href="#">Starters</a></li>
                    <li><a href="#">Breakfast and Brunch</a></li>
                    <li><a href="#">Salads</a></li>
                    <li><a href="#">Sandwiches and Wraps</a></li>
                    <li><a href="#">Pasta</a></li>
                    <li><a href="#">Mains</a></li>
                    <li><a href="#">Pizza</a></li>
                </ul>
            </li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div><!-- end container !-->
</div> <!-- end header !-->

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* End Reset / Start Head
-------------------------------
*/

body, html {
    height: 100%;
    font-size: 18px;
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
    color: #fff;
    background-color: #472626;
}

a {
    text-decoration: none;
    color: inherit;
}

#head {
    height: 76px;
    width: 100%;
    background-color: #472626;
    position: fixed;
    z-index: 10000;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
}

.container {
    max-width: 1400px;
    padding-left: 20px;
    padding-right: 20px;
    margin-left: auto;
    margin-right: auto;
}

.logo {
    line-height: 75px;
    text-align:left;
    -webkit-transition: font-size 2s ease , line-height 0.5s ease;
    -moz-transition: font 0.3s ease , line-height 0.5s ease;
    -o-transition: font 0.3s ease , line-height 0.5s ease;
    -ms-transition: font 0.3s ease , line-height 0.5s ease;


}

.logo h1 {
    font-size: 2.8em;
    font: "Segoe UI Semibold";
    display:block;
}

.pull-left {
    float: left;
}

.pull-right {
    float:right;
}

.nav {
    font-size: 1.3em;
    font-family: "wf_SegoeUILight","wf_SegoeUI","Segoe UI Light","Segoe WP Light","Segoe UI","Segoe","Segoe WP","Tahoma","Verdana","Arial","sans-serif";
    font-weight: 100;
    position: relative;
}

.nav li {
    float:left;
    padding-left: 15px;
    line-height: 80px;
    -webkit-transition: line-height 0.5s ease;
    -moz-transition: line-height 0.3s ease;
    -o-transition: line-height 0.3s ease;
    -ms-transition: line-height 0.3s ease;
    position: relative;
}

.nav li a {
    opacity: 1;
    -webkit-transition: opacity .2s ease-in-out;
    -moz-transition: opacity .2s ease-in-out;
    -ms-transition: opacity .2s ease-in-out;
    -o-transition: opacity .2s ease-in-out;
    transition: opacity .2s ease-in-out;
}

.nav li a:hover {
    opacity: .6;
}

.nav li ul {
    background-color: #2B0909;
    position: fixed;
    top: 80px;
    width: 100%;
    left: 0px;
    text-align: center;
    height: 40px;
    z-index: -1000;
}


.nav li > ul li{
    display: inline-block;
    font-size: 0.9em;
    line-height: 10px;
    float: none;
}

/* Mini Head
*******************/


.mini ul.nav > li, .mini .logo {
    line-height: 60px;
}

.mini h1 {
    font-size: 2em;

}



/* End Header / Start Slider
-----------------------------*/