Welcome to the Treehouse Community
The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.
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.