Use Foundation 5 to create a simple Top Bar Navigation that adjusts to mobile devices. For mobile you will see three lines giving access to the menu items.
*This requires the Foundation 5 complete files to be downloaded.
<!doctype html>
<html>
<head>
<title></title>
<meta name="Title" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="foundation/foundation-5.4.0/css/foundation.css" rel="stylesheet" />
<link href="foundation/foundation-5.4.0/css/normalize.css" rel="stylesheet" />
<!-- your css -->
<script src="foundation/foundation-5.4.0/js/vendor/modernizr.js"></script>
</head>
<body id="body">
<nav class="top-bar" data-topbar="" role="navigation">
<ul class="title-area">
<li class="name">
<h1><a href="/" title="home">example.com</a></h1>
</li>
<li class="toggle-topbar menu-icon"><a><span></span></a></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right show-for-large-up">
<li><a href="/login/">Login / Register</a></li>
</ul>
<ul class="right hide-for-large-up">
<li><a href="/forums/">Forums</a></li>
<li><a href="/blogs/">Blogs</a></li>
<li><a href="/login/">Login / Register</a></li>
</ul>
<!-- Left Nav Section -->
<ul class="left show-for-large-up">
<li><a href="/forums/">Forums</a></li>
<li><a href="/blogs/">Blogs</a></li>
</ul>
</section>
</nav>
<!-- js jQuery mist be before foundation-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- js Foundation must be at the bottom of the body tag-->
<script src="foundation/foundation-5.4.0/js/vendor/fastclick.js"></script>
<script src="foundation/foundation-5.4.0/js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>