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

Design

drew s
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
drew s
Python Development Techdegree Graduate 19,491 Points
Posted by drew s
.a{fill-rule:evenodd;}techdegree seal-36
drew s
Python Development Techdegree Graduate 19,491 Points

Hamburger Navigation

Can anyone help me create a hamburger navigation using only HTML and CSS.

Pablo Zirilli
Pablo Zirilli
Courses Plus Student 3,327 Points
Pablo Zirilli
Pablo Zirilli
Courses Plus Student 3,327 Points

Hi Felix, I recommend using the Pure css lib. It simplifies the creation of this type of elements very much.

If on the contrary you want to do it on your own, you can do it like this:

HTML

<nav role="navigation">
  <div id="menuToggle">
    <input type="checkbox" />
    <span></span>
    <span></span>
    <span></span>
    <ul id="menu">
      <a href="#"><li>Home</li></a>
      <a href="#"><li>About</li></a>
      <a href="#"><li>Info</li></a>
      <a href="#"><li>Contact</li></a>
      <a href="https://treehouse.com/" target="_blank"><li>Show me more</li></a>
    </ul>
  </div>
</nav>

CSS

body {
  margin: 0;
  padding: 0;
  background: #232323;
  color: #cdcdcd;
  font-family: "Avenir Next", "Avenir", sans-serif;
}

a {
  text-decoration: none;
  color: #232323;
  transition: color 0.3s ease;
}

a:hover {
  color: tomato;
}

#menuToggle {
  display: block;
  position: relative;
  top: 50px;
  left: 50px;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle input {
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  cursor: pointer;
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  -webkit-touch-callout: none;
}

#menuToggle span {
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  background: #cdcdcd;
  border-radius: 3px;
  z-index: 1;
  transform-origin: 4px 0px;
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child {
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2) {
  transform-origin: 0% 100%;
}

#menuToggle input:checked ~ span {
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #232323;
}


#menuToggle input:checked ~ span:nth-last-child(3) {
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

#menuToggle input:checked ~ span:nth-last-child(2) {
  opacity: 1;
  transform: rotate(-45deg) translate(0, -1px);
}

#menu {
  position: absolute;
  width: 300px;
  margin: -100px 0 0 -50px;
  padding: 50px;
  padding-top: 125px;
  background: #ededed;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li {
  padding: 10px 0;
  font-size: 22px;
}

#menuToggle input:checked ~ ul { 
  transform: scale(1.0, 1.0);
  opacity: 1;
}

Hope do you help! Grettings

4 Answers

drew s
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
drew s
Python Development Techdegree Graduate 19,491 Points
drew s
.a{fill-rule:evenodd;}techdegree seal-36
drew s
Python Development Techdegree Graduate 19,491 Points

Hey Pablo Zirilli, thanks for your help man. I have seen a lot of these online. But my online problem is when I enlarge the page I can see the navigation just moving left and right.

drew s
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
drew s
Python Development Techdegree Graduate 19,491 Points
drew s
.a{fill-rule:evenodd;}techdegree seal-36
drew s
Python Development Techdegree Graduate 19,491 Points

Here is my source code:

''' HTML

<!---------------------- Cover Page ------------------------>

<!---------------------- Please note: The following sample index.html file is the default HTML file that appears in a browser. In other words when you view your website index.html file will be the first page you will see. -------------------------->

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"> <!--Here we still using the same character set for all the html page.-->

<title>Felix Andrew Sapalaran| Developer</title> <!--Title tag will be display on top of the page-->

<link rel="stylesheet" href="css/normalize.css"> 

<link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond" rel="stylesheet">




<link rel="stylesheet" href="css/main.css"> <!--We still linked our main.css for design later on-->

<link rel="stylesheet" href="css/responsive.css">

<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--Samething what goes here.What we did here is we added a meta tag and we added a attribute called name and set the value to viewport. Right after that we added another attribute called content and we set the value to width=device-width. So in this content value here the width property is what controls the size of the device viewport. And with the value device-width the device's browser will zoom in to fit the screen as much as it needs to, according to the device's width.-->

</head>

<body>

<header class="frontpage"> <!--Here we added a class inside of the header so that the background only applies in this file only.-->

<div class="containergroup">
  <h1>Designer | Developer</h1>
  <h2>Team Treehouse</h2>
  <h3>Felix Andrew Sapalaran</h3>

<!-- <img src="img/centerlogo.gif">--> </div>

<!--------------- Navigation ------------------->

<nav> <ul>

 <li> <a href="index.html" class="selected">Home</a> </li>

  <li><a href="portfolio.html"> Portfolio</a></li>

  <li><a href="about.html"> About</a></li>

   <li><a href="contact.html"> Contact</a></li>
 </ul>

</nav>

</header>

</body>

</html>

'''

drew s
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
drew s
Python Development Techdegree Graduate 19,491 Points
drew s
.a{fill-rule:evenodd;}techdegree seal-36
drew s
Python Development Techdegree Graduate 19,491 Points

'''CSS

/*************** General ***************/

body {

font-family: 'Cormorant Garamond', serif; }

wrapper { /We are targetting id wrapper for to create some design/

max-width:940px; /* We want the width to be no longer than 940 pixels across. Using max-width instead, in this situation, will improve the browser's handling of small windows. This is important when making a site usable on small devices./ margin: 0 auto; /*0 is the value from top & bottom. Auto fill in any avaible space from left to right. Margin properties are used to generate space around elements. The margin properties set the size of the white space outisde the border. You test this by changing the color later if you want./ padding: 0 5%; /0 represents the padding from top & bottom. 5% represet the padding from left to right. The padding properties are used to generate space around the content. The padding clears an area around the content (inside the the border) of an elemement./

}

}

/** My Logo Located at my Heading **/

.logo {

float: center; display:block; /Display an element as a block element (like they sit on top of each other or like a list item./ max-width: 100px; /The max-width property is used to set the maximum width of an element. This prevents the value of the width property from becoming larger than max-width. So this means that the that the maximum width is 100px that is it./ margin: 0 auto 20px; /Top margin= 0, Left & Right margin= auto means equal sides, Bottom margin= 20px./ border-radius: 100%;

}

a {

text-decoration:none; /The text-decoration CSS property is used to set the text formatting to underline, overline, line-through or blink. Underline and overline decorations are positioned under the text, line-through over it. In other words it removes underline on out link./

}

img { /This will fix the space between the images./

max-width:100%; /The maximum width of our image is 100% each./

}

h3 {

margin: 0 0 1em 0; /Top margin= 0 , Right margin= 0, Bottom margin= 1em, Left margin= 0. "em" relative to the font-size of the element. 2em means 2 times the size of the current margin./

}

/************* Heading **************/

/**************************** Please note: Margin is used to measure how far/close you want to border. Border is used to measure how far/close you want to padding. Padding is used to measure how far/close you want to the content. Pease note 47 for more info. ******************************/

header {

float: left; /By giving the value left or right, the content will move depending on their direction./ margin: 0 0 30px 0;/Top margin= 0, Right margin= 0, Bottom margin= 30px, Left margin= 0/ padding: 5px 0 0 0; width: 100%; /The width property sets the width of an element. The width property does not include padding, borders, or margins; it sets the width of the area inside the padding, border, and margin of the element. Remember min-width and max-width properties override width./

}

logo { /Here we are targetting the id named logo for design/

text-align:center;/When the screen size reduce to 660px the text above will move to the center./ margin: 0; align-content: flex-start; /Lines are packed towards of the flex container./ text-shadow: 5px 5px 5px grey;

}

h1 {

font-family: 'Cormorant Garamond', serif; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height: 0.8; /* specify the space between lines*/

}

h2 {

font-size: 1em; margin: -5px 0 0; /* Top margin= -5px, Right and Left margin= 0, Bottom margin= 0 / font-weight:400; /*The font-weight property sets how thick or thin chracters in text should be displayed./

}

h3 {

font-size: 0.75em; margin: 5px 0 0; /* Top margin= -5px, Right and Left margin= 0, Bottom margin= 0 / font-weight: 200; /*The thickness of the text here is less than normal. 400 is the same as normal, and 700 is the same as bold./

}

/************* Navigation **************/

nav {

text-align:center; /By giving the value center it will move the navigation text to the center./ padding: 10px 0; /Top and Bottom padding is 10px. Left and right padding is 0/ margin: 20px 0 0; /Top margin is 20px, Left and Right margin is 0. Bottom margin is 0/

}

nav ul { /Here we are targetting unordered list for navigation/

list-style: none; /By setting the value to none there will be no marker is shown on the side of the unordered lists. Think of it like no more bullet points on the side of each list/ margin:0 10px; /* Top and Bottom margin is 0. Left and Right margin is 50px./ padding: 0; /*O padding is applied for all sides./

}

nav li { /Here we are targetting the navigation list/

display: inline-block; /By setting the value to inline-block this will cause the navigation to position right next to each other or horizontally instead of stocking on each other./

}

nav a { /Now we are targetting the anchor element for navigation./

font-weight:800; /By setting the value to 800 this cause the font size on our navigation to be bold./

padding: 15px 10px; /By giving them a padding will seperate or give out space for each navigation. Top and Bottom margin is 15px. 10px for Left and Right padding./

}

/**************** Footer *****************/

footer { /We are now targetting the footer for design and adjust some sizes and postions./

font-size: 0.75ems; /By giving 0.75ems value, it will make the font in the footer small./ text-align: center; /The text in our footer will be in center./ clear: both; /This will bring our footer in the bottom and will remain there even if you resize the size of the browser. By giving the both value for clear declaration means no floating elements allowed on either the left or the right side./ padding-top: 50px; /This specify that padding only applies to top./ color: #737373; /This will change the color of our text on the footer./

}

.social-icon {

width: 35px; /This will adjust the width of our icon./ height:40px; /This will adjust the height of our icon./ margin: 0 5px; /This will adjust distance between the two icons.This means that 0 margin is applied for top and bottom. Then 50px for right and left./

}

/********* Front Page*********/

.frontpage {

height: 750px; width: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; overflow: hidden; position: relative;

}

.containergroup { position: absolute; height: 550px; width: 100%; bottom: 0; margin: 0 auto; text-align: center; background-color: #fff; text-shadow: 5px 5px 5px grey; }

/**************** Page: Portfolio ****************/

gallery { /Targetting id class called gallery for design./

margin:0; padding:0; list-style:none; /By giving a none value for our list style, no image will be displayed. Instead, the list-style property will define what type of list marker will be rendered. This is default. In addition this will get rid of the bullet points as well./ box-shadow: 10px 10px 5px grey; }

gallery li {

float: left; width:45%; margin: 2.5%; /* background-color: #fff;*/ background-color: #737373; box-shadow: 10px 5px 10px grey; }

gallery li a p{ /*Here we are targetting the list element, the anchor/link of the gallery and its paragraph. */

margin: 0px; /This margin the determined or give space how far away we want from the border. Remember content space then padding space then border space then margin./

padding: 5%; /this padding value will determine how far we want from the content/

font-size: 1em; /This declaration will determine the size of our text inside the gallery or the paragraph text./

color: #404040; /This will change the color of our link or the paragraph text./

box-shadow: 5px 5px 5px grey;

}

/************** Page: About ***************/

.profile-photo { /We are targetting the class called .profile-photo to adjust and make some changes in the sizes./

display: block; /Displays an element as a block element (like <p>)/

max-width: 80px; /*The max-width property is used to set the maximum width of an element. This prevents the value of the width property from becoming larger than max-width. */

margin:0 auto 30px; /Top margin is 0. Left and right margin is auto means equal length. Bottom margin is 30px/

border-radius: 100%; /By setting the border radius to 100% will make the image round./

box-shadow: 5px 5px 5px grey;

/* border-top: 5px solid #00b33c; border-left: 5px solid #737373; border-bottom: 5px solid #00b33c; border-right: 5px solid #737373; */

}

/************* Page: Contact *************/

.contact-info { /This class contact-info only applies to our unordered list in contact page./

list-style: none; /By setting the list style declaratio n value to none will remove the markers that shown/ padding:0; /This will move the direction of the contact details depending the value you assign to it./ margin: 0; /This will also move the direction of the contact details depending on the value. The bigger the value the closer it moves to the center./ font-size: 0.9em; /This will adjust the size of the text in our contact details./ color: #404040; /Still not sure where this color applies?/

}

.contact-info a { /Now we are targetting the anchor element or link for class called contact-info/

display: block; /Displays an element as a block element (like <p>)/

min-height:30px; /The min-heihgt property is used to set the minimum height of an element. This prevents the value of the height property from becoming smaller than min-height.In addition what this declaration does is seperates the height of our link so that they won't sit on top of each other really close./

background-repeat: no-repeat; /The background-repeat property sets if/how a background image will be repeated. By default, a background is repeated both vertically and horizontally. Tip: The background image is placed according to the background-position property. If no background-position is specified, the image is always placed at the element's top left corner. In this case our background image will not be repeated./

background-size: 20px 20px; /20px top and bottom and 20px left and right. The background-size property specifies the size of the background images./

padding: 0 0 0 30px; /Top padding is 0 , right is 0, bottom is 0, and left is 30px. This will shift our contact details a little bit on the right side./

margin: 0 0 10px; /* Top margin is 0 , right and left is 0, and bottom is 10px. This cause a spacing between our links. */

}

.contact-info li.phone a { /*We created this class in our contact file and we are targetting this class to input our image icon for each links. */

background-image:url('../img/phone.png'); /This is the declaration we use to input our image. If you have placed it in the folder you have to use "'../img/phone.png'" you need to add which folder you place it in./ color:#00b33c; /This will determine the color of the link. In this case is the phone number./

}

.contact-info li.mail a {

background-image: url('../img/emailicon.jpg');

}

.contact-info li.twitter a {

background-image: url('../img/twitter.png');

}

/*********** Colors ************/

/** Site Body or Whole background color**/

body {

background-color: #fff; /This declaration will change the color of our background./ color: #737373; /This will change the color of our text in the body part./

}

/** Header Color **/

header {

background-color: #fff; /This color will only applies to the header of the page./ border-color: #737373; /This will change the color of our border line. You can set the color to different types for each side. Can see it now because our header is taking all the space./

}

/*** navigation background on mobile ***/

nav {

background: #737373; /This only works for mobile size version. When you resize the website to mobile size the background of navigation will change depending on the value that is assigned./ }

/** Logo Text **/

h1, h2 {

color: #737373; /Here we are targetting both h1 and h2. We want to change the text color according to the value we want./ }

/** Links **/

a {

color: #00b33c; /This will chage all the color of anchor element or links to skyblue./ }

/** Navigation Link **/

nav a, nav a:visited {

color: #000; /This will change the color of the text of our navigation./ }

/** Selected navigation Link **/

nav a.selected, nav a:hover {

color: #000; /What this does is it change the color of the navigation when you hover into it or selected. So it tells the user which page they are currently on./

text-shadow: 5px 5px 5px grey; }

/*********** Web Design page *********/

body { background-image: url("img/backgroundimage.jpg"); }

/******************* Hamburger Navigation *********************/

'''