Hi, I am trying to create a simple hamburger menu using CSS and HTML with GRID.
Not sure what is wrong with the code. The hamburger is only supposed to show in small screens but it appears in the middle of the big screen. LOL.
Can someone help me with this?
PS: I thought you’d be attracted by the title. 
Jonathan
.container {
display: grid;
grid-gap: 3px;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 40px 40px auto 40px;
}
.nav {
border-bottom: 1px solid black;
text-align: right;
height: 70px;
line-height: 70px;
}
.menu {
margin: 0 30px 0 0;
}
.menu a {
clear: right;
text-decoration: none;
color: gray;
margin: 0 10px;
line-height: 70px;
}
.span {
color: #54D17A;
}
.label {
margin: 0 40px 0 0;
font-size: 26px;
line-height: 70px;
display: none;
width: 26px;
float: right;
}
#toggle {
display: none;
}
.header {
grid-column: 1 / -1;
}
.nav {
grid-column: 1 / -1;
}
.content1 {
grid-column: 1 / 7;
}
.content2 {
grid-column: 7 / -1;
}
.footer {
grid-column: 1 / -1;
}
@media only screen and (max-width: 500px)
label {
display: block;
cursor: pointer;
}
.menu {
text-align: center;
width: 100%;
display: none;
}
.menu a {
display: block;
margin: 0;
}
#toggle:checked + .menu {
display: none;
}
</style>
</head>
<body>
<div class="container">
<div class="header">HEADER</div>
<div class="nav">
<label for="toggle">☰</label>
<input type="checkbox" id="toggle"/>
<div class="menu">
<a href="#">About us</a>
<a href="#">Services</a>
<a href="#">Contact Us</a>
<a href="#">FAQ</a>
<a href="#">Blog</a>
<a href="#"><span>Free Trial</span></a>
</div>
</div>
<div class="content1">CONTENT 1 lorem ipsum, more lorem ipsum, even more lorem ipsum, more and more lorem ipsum, more and more lorem ipsum, more and more lorem ipsum, more and more lorem ipsum, more and more lorem ipsum, more and more lorem ipsum, more and more lorem ipsum, more and more lorem ipsum, more and more lorem ipsum, more and more lorem ipsum, more and more lorem ipsum, more and more lorem ipsum, more and more lorem ipsum, more and more lorem ipsum, this is really too much lorem ipsum, are there only lorem ipsums in this part of the world?
<div class="content2">CONTENT 2 <br>lorem ipsum, more lorem ipsum, even more lorem ipsum, more and more lorem ipsum, more and more lorem ipsum, more and more lorem ipsum, more and more lorem ipsum, more and more lorem ipsum, more and more lorem ipsum, more and more lorem ipsum, more and more lorem ipsum, more and more lorem ipsum, more and more lorem ipsum, more and more lorem ipsum, more and more lorem ipsum, more and more lorem ipsum, more and more lorem ipsum, this is really too much lorem ipsum, are there only lorem ipsums in this part of the world?</div>
<div class="footer">FOOTER</div>
</div>
</body>
You seem to be missing a closing div at the end of your first content block, also because you haven’t posted your basic.css its hard to troubleshoot.
Hi Rob, thanks for the reply.
Well the basic.css is as follows…
.container > div {
display: flex;
justify-content: center;
align-items: center;
font-size: 2em;
color: #ffeead;
}
html,
body {
background-color: #ffeead;
margin: 10px;
}
.container > div:nth-child(1n) {
background-color: #96ceb4;
}
.container > div:nth-child(2n) {
background-color: #ff6f69;
}
.container > div:nth-child(3n) {
background-color: #88d8b0;
}
.container > div:nth-child(4n) {
background-color: #ffcc5c;
}
I decided to re-do the entire thing. Managed to get the hamburger in place but not sure why the website is squeezed to the left and only covers half the screen on PG’s large screen.
The STYLE.CSS is LIKE THIS:
body {
display: grid;
grid-template-columns: 1fr minmax(auto, 100px) minmax(auto, 300px) 1fr;
grid-template-rows: 1fr;
margin: 0;
padding: 0;
background: white;
}
.sidebar {
grid-area: sidebar;
}
.sidebar2 {
grid-area: sidebar2;
}
.content {
grid-area: content;
}
.header {
grid-area: header;
}
.footer {
grid-area: footer;
}
.wrapper {
background-color: #fff;
color: #444;
}
.wrapper {
display: grid;
grid-gap: 1em;
grid-template-areas: “header”
“sidebar”
“content”
“sidebar2”
“footer”;
}
/* -------------------- Top Navigation ----------------------------------------------------------- /
/ Background color of Top Navigation*/
.topnav {
background-color: none;
overflow: hidden;
}
/* Link styles inside navigation bar */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Active class to highlight the current page */
.active {
background-color: #4CAF50;
color: white;
}
/* Hide link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
}
/* Navbar Media Query - show only first link (“Home”) when screen is < 600 pixels wide. Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
/* Navbar Media Query - “Responsive” class added to the Topnav with JavaScript when the user clicks on icon. This class makes Topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
.topnav.responsive {
position: relative;
}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
/* --------------------Content Area--------------------------------------------------------------- */
#wrapper {
padding: 60px 0;
clear: both;
line-height: 1.6em;
}
#main-content h1,
h2,
h3,
h4,
h5,
h6: {
color: black;
font-variant: small-caps;
}
#main-content h1,
h2,
h3,
h4,
h5,
h6:first-letter,
{
font-size: 2em;
}
#wrapper section {
display: block;
width: 100%;
margin: 0 0 30px 0;
padding: 0;
}
/* Media Queries */
@media only screen and (min-width: 500px) {
.wrapper {
grid-template-columns: 20% auto;
grid-template-areas: “header header”
“sidebar content”
“sidebar2 sidebar2”
“footer footer”;
}
}
@media only screen and (min-width: 600px) {
.wrapper {
grid-gap: 20px;
grid-template-columns: 120px auto 120px;
grid-template-areas: “header header header”
“sidebar content sidebar2”
“footer footer footer”;
max-width: 600px;
}
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 10px;
font-size: 150%;
}
.nav {
background: none;
}
.header {
background: #e49b0f;
}
.footer {
background: #999;
}
.sidebar2 {
background: #ccc;
color: #444;
}
The HTML is like this:
HAMBURGER