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.

CSS

Alexandra Cianciara
Alexandra Cianciara
2,465 Points

Hamburger 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
Max Weir
14,963 Points

Generally, 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
Alexandra Cianciara
2,465 Points

Thanks, 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
Alexandra Cianciara
2,465 Points

What 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
Max Weir
14,963 Points

Might be worth checking the js logic, and ensure the classes mentioned there are in the markup.