Close

Genesis Code Snippets

Responsive Web Design: Building a Responsive Menu

In this responsive web design tutorial, you’ll learn how to build a responsive menu. You’ll learn:

  • how to target different breakpoints with media queries
  • how to write the CSS to “flip” the menu from vertical to horizontal view at those breakpoints
  • how to use jQuery to create a responsive navigation icon that toggles the mobile menu

Watch the tutorial below:

Links mentioned in the video:

Here’s the code I used in the video:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Responsive Navigation</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
nav {
background: #000;
overflow: hidden;
}
.header {
float: left;
color: #fff;
padding: 15px;
overflow: hidden;
}
.logo {
font-size: 24px;
}
.handle {
float: right;
background: #222;
color: #fff;
border: none;
font-size: 18px;
padding: 5px 10px;
border-radius: 3px;
cursor: pointer;
display: none;
}
nav a {
text-decoration: none;
color: inherit;
}
nav ul {
overflow: hidden;
color: #fff;
margin: 0;
padding: 0;
text-align: center;
transition: max-height 0.5s;
-webkit-transition: max-height 0.5s;
-ms-transition: max-height 0.5s;
-moz-transition: max-height 0.5s;
-o-transition: max-height 0.5s;
}
nav ul li {
float: right;
display: inline-block;
padding: 20px;
}
nav ul li:hover {
background-color: #222;
}
section {
box-sizing: border-box;
line-height: 1.5em;
width: 70%;
margin: 0 auto;
padding: 20px;
}
@media screen and (max-width: 767px) {
.header {
float: none;
}
nav ul {
background: #222;
max-height: 0;
width: 100%;
}
nav ul.show {
max-height: 20em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 15px;
}
.handle {
display: inline;
}
section {
width: 100%;
}
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('.handle').on('click', function(){
$('nav ul').toggleClass('show');
});
});
</script>
</head>
<body>
<nav>
<div class="header">
<a class="logo">Demo</a>
<button class="handle">
<i class="fa fa-bars"></i>
</button>
</div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<section id="content">
<h1>Responsive navigation is da bomb!</h1>
<p>Mobile users around the world thank you!</p>
</section>
</body>
</html>

If you get value from this code snippet, please consider sharing it with another developer or group who could benefit from it.

August 8, 2015

Genesis: Move Navigation to Top

Here’s a little code snippet to move the primary navigation in the Geneses theme to the top of your pages:

// Child theme setup function
function child_theme_setup() {
// Remove the primary navigation from its current location
remove_action( 'genesis_after_header', 'genesis_do_nav' );

// Add the primary navigation to the top of the page
add_action( 'genesis_before_header', 'genesis_do_nav' );
}

// Hook into genesis_setup
add_action( 'genesis_setup', 'child_theme_setup' );

Of course, you could use this to hook the primary navigation in anywhere on the page. You’d just use a different hook with your add_action() statement.

August 22, 2013