Common pattern: responsive nav. This version is sticky, top-aligned, and single-level. Defaults to a hidden dropdown nav menu with a show/hide trigger button, morphs into a typical horizontal bar at larger views. (Working on a personal code library, demo coming soon.)

_basic-navbar.scss

// Modify line-heights, font-sizes, etc to suit the design - anything with a // after it is optional or can change per-design
// Note: this is super barebones. Making it pretty/fit your design is on you, gentle coder.

.masthead {
  position: fixed;
  top: 0;
  width: 100%;
  height: 3em; //
  background: white; //
  h1 {
    padding: 0;
    margin: 0;
    line-height: 4.5em; //
    text-align: center; //
  }
}

.nav-menu {
  display: none;
  position: absolute;
  list-style: none;
  margin: auto;
  left: 0;
  right: 0;
  overflow: visible;
  li {
    display: block;
    position: relative; 
    margin-left: 0;
  }
  a {
    display: block;
    text-align: center;
  }
  .toggled & {
    display: block;
    top: 3em; //
    
    a { width:100%; }
  }
}

.menu-toggle {
  z-index: 999; //
  position: absolute;
  right:1em; //
  top:1em; //
}


@media only screen and (min-width: 43em) { // breakpoint goes here. ems, px, it's all good.
  .main-nav {
    float: none;
    margin: 0 auto;
  }

  .menu-toggle {
    display: none;
  }

  .nav-menu, .toggled .nav-menu {
    position: relative;
    display: table;
    margin: auto;
    text-align: center;
  }

  .nav-menu li {
    display: table-cell;
    > a {
      padding: 0 2em; //
    }
  }

}

basic-navbar.css

/* Compiled version of the aforementioned scss*/

.masthead { position: fixed; top: 0; width: 100%; height: 3em; background: white; }
.masthead h1 { padding: 0; margin: 0; line-height: 4.5em; text-align: center; }

.nav-menu { display: none; position: absolute; list-style: none; margin: auto; left: 0; right: 0; overflow: visible; }
.nav-menu li { display: block; position: relative; margin-left: 0; }
.nav-menu a { display: block; text-align: center; }
.toggled .nav-menu { display: block; top: 3em; }
.toggled .nav-menu a { width: 100%; }

.menu-toggle { z-index: 999; position: absolute; right: 1em; top: 1em; }

@media only screen and (min-width: 43em) { 
  .main-nav { float: none; margin: 0 auto; }
  .menu-toggle { display: none; }
  .nav-menu, .toggled .nav-menu { position: relative; display: table; margin: auto; text-align: center; }
  .nav-menu li { display: table-cell; }
  .nav-menu li > a { padding: 0 2em; } 
}

basic-navbar.html

<!-- Basic markup for the pattern -->

<header class="masthead" role="banner">
<h1>Logotype</h1>
	<nav class="main-nav" id="site-nav" role="navigation">
		<button class="menu-toggle icon-menu" title="Menu"><span>+</span></button>
		<ul class="nav-menu">
			<li class="nav-item"><a href="">Link #1</a></li>
			<li class="nav-item"><a href="">Link #2</a></li>
			<li class="nav-item"><a href="">Link #3</a></li>
			<li class="nav-item"><a href="">Link #4</a></li>
		</ul>
	</nav>
</header>

basic-navbar.js

// Where we're going we don't need jQuery...

(function() {
    var container, button, menu, page;

    // variable roll call!
    container = document.getElementById( 'site-nav' );
    page = document.getElementById('page');
    if (!container)
        return;
        
    button = container.getElementsByTagName( 'button' )[0];
    if ('undefined' === typeof button)
        return;
        
    menu = container.getElementsByTagName( 'ul' )[0];
    if ('undefined' === typeof menu) {
        button.style.display = 'none';
        return;
    }

    // just in case we forgot to use the nav-menu class
    if (-1 === menu.className.indexOf('nav-menu'))
        menu.className += ' nav-menu';

    // css handles all the visual changes based on class names.
    button.onclick = function() {
        if (-1 !== container.className.indexOf('toggled'))
            container.className = container.className.replace('toggled', '');
        else
            container.className += ' toggled';

    // optional but nice: also/alternatively set classes on a higher-up element for scoping
        if (-1 !== page.className.indexOf('mobile-nav-open'))
            page.className = page.className.replace('mobile-nav-open', '');
        else
            page.className += ' mobile-nav-open';

    };
})();