Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Alexandra Cianciara
2,465 PointsHamburger and in-line menu
Hello, question re menu nav menu. I’d like to have the hamburger menu on mobile version. Am I right thinking that I should first do hamburger menu in HTML, css and JS and then in media query add codes for desktop screens? If so shall I just do in-line display for the menu list? Thank you
4 Answers
Max Weir
14,963 PointsGenerally, I would approach this as a mobile-first solution as your working with limited space and need to think about how users interact with the navigation and how usable it is. On desktop you have the luxury of space and have more options on how things are laid out for example.
Alexandra Cianciara
2,465 PointsThanks, I'm doing this. I'm really struggling to find the right tutorial how to do it. Every time I do it it's not working. Any idea how can I do or whats the best source to help me create the hamburger menu. Thank you
Alexandra Cianciara
2,465 PointsWhat I did so far is this:
HTML
<header class="main-header">
<div class="wrapper">
<h1><a class="nav-logo" href="index.html" class="home-selected"><img src="img/robreedbootcamp_logo.jpg" width="80" height="58" alt="Rob Reed Boot Camo logo"></a></h1>
<nav>
<a class="burger-nav"></a>
<ul>
<li><a href="/about.html">About</a></li>
<li><a href="/motivation.html">Motivation</a></li>
<li ><a href="/location.html">Location</a></li>
<li ><a href="/contact.html">Contact</a></li>
</ul>
</nav>
</div>
</header>
CSS
.burger-nav {
display: block;
height: 150px;
width: 100%;
background: url(img/hamburger-menu.png) no-repeat 98% center;
background-color: #404040;
cursor: pointer;
}
header .wrapper {
width: 100%;
padding: 0;
}
header nav ul {
overflow: hidden;
background: #505050;
height: 0;
}
header nav ul.open { height: open; }
header nav ul li {
float: none;
text-align: left;
width: 50%;
margin: 0;
}
header nav ul li a {
color: #fff;
padding: 10px;
border-bottom: 1px solid #404040;
display: block;
margin: 0;
}
For the Java Script I added it to HTML
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rob Reed Boot Camp</title>
<link rel="stylesheet" href="normalize.css">
<link href="https://fonts.googleapis.com/css?family=Lato|Raleway" rel="stylesheet">
<link rel="stylesheet" href="main.css">
<script src="javascript.js"></script>
</head>
In this doc <script src="javascript.js"></script>
I added this:
$(document).ready(function() { $("body").on('click', '.top', function() { $("nav.menu").toggleClass("menu_show"); }); });
What am I doing wrong? The drop down menu is not working at all.
Thanks
Max Weir
14,963 PointsMight be worth checking the js logic, and ensure the classes mentioned there are in the markup.