Trying to position the hamburger icon for a responsive menu
Question
I'm trying to create a responsive menu where the hamburger icon pops up under 640px width screen -- the menu mostly works but I cannot figure out how to get my menu items "About," "Work," and "Resume" to appear beneath the hamburger icon - it always overlaps. I currently have a background color on to at least make it appear clean but I'd appreciate any help on the positioning issue. Thank you in advance!
CSS (sorry for the inelegant code, still new to all of this):
/* ----------------- NAVIGATION ----------------- */
.header_nav {
display: inline-table;
list-style: none;
background-color: #fffef9f7;
height: 75px;
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
.header_nav ul, .header_nav a {
list-style: none;
display: inline-block;
text-decoration: none;
font-weight: 600;
font-size: 28px;
text-transform: uppercase;
}
ul {
display: block !important;
list-style-type: disc !important;
margin-block-start: 1em !important;
margin-block-end: 1em !important;
margin-inline-start: 0px !important;
margin-inline-end: 0px !important;
padding-inline-start: 40px !important;
}
.header_nav a:hover {
color: #78F51D;
}
.logo {
display: inline-block;
padding-left: 5%;
padding-top: 25px;
}
.logo img {
max-height: 45px;
}
.menu {
display: inline-block;
float: right;
padding-right: 5%;
padding-top: 2px;
}
.menu li {
padding-left: 20px;
}
.menu .icon {
display: none;
}
li .icon {
padding-right: 0px;
}
li {
padding-left: 12px;
display: inline-block;
}
/* ----------------- MEDIA QUERIES ----------------- */
@media only screen and (max-width: 640px) {
.menu ul li:not(.icon) {display: none;}
.menu ul li.icon {
float: right;
display: block;
right: 25px;
top: 25px;
}
.menu.responsive {
background-color:#FFFEF9;
position: relative;
}
.menu.responsive .icon {
position: absolute;
right: 25px;
top: 25px;
z-index: -1;
}
.menu.responsive ul li:not(.icon) {
float: none;
display: block;
top: 100px;
padding-right: 1%;
text-align: right;
}
}
HTML:
<div class="header_nav">
<div class="logo">
<a href="index.html"><img src="images/logo_v3.png"></a>
</div>
<div class="menu" id="myMenunav">
<ul>
<li><a href="about.html">ABOUT </a></li>
<li><a href="index.html#work">WORK </a></li>
<li><a href="Resume.pdf" target="_blank">RESUME </a></li>
<li class="icon"><a href="javascript:void(0);" onclick="myFunction()">
<i class="fa-solid fa-burger"></i></a></li>
</ul>
</div>
</div>
1 answers
solution1
1 ACCPTED 2022-07-15 08:30:09
For the items to appear "below" the hamburger icon, it helps to have both the icon and the menu items inside the same div.
I changed the icon to be a bit more up ↑ in your html.
I also modified the way your header Bar was working abit. Mostly by removing the header bar width of 100% (which messes things up if you give it padding, because then its 100% of screen + padding, which makes the header go outside the page.)
And added left:0; and right:0; which makes it so it always takes up the full width of the screen.
Using the css feature called " flexbox " i made it so there always is space between the logo and the menu items. And using Flexbox you can also easly make things go "beneath each other" using flex-direction:column;
(A good reference to understand what all these flexbox things do is this website https://css-tricks.com/snippets/css/a-guide-to-flexbox/ )
I also added a small javascript snippet, that makes it so you can click on your hamburger to toggle the menu. By toggleing a class called "open" that with css we check for to know if the menu should be visible.
Please check the below attached scripts, i have added / modification / to where i have modified your code.
Html Code:
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" type="text/css" href="./index.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
<!-- Added a small script to toggle a class using javascript -->
<script>
function toggleMenu(localThis){
localThis.parentNode.classList.toggle('open');
}
</script>
</head>
<body>
<div class="header_nav">
<div class="logo">
<a href="index.html">
<!-- <img src="images/logo_v3.png"/> -->
<!-- temporary logo -->
<svg width="50" height="20">
<rect width="50" height="20" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>
</a>
</div>
<div class="menu" id="myMenunav">
<!-- Moved hamburger icon to be over here -->
<div class="hamburger-toggle" style="display:none;">
<a href="javascript:void(0);" onclick="toggleMenu(this)"> <i class="fa-solid fa-burger"></i></a>
</li>
</div>
<ul>
<li><a href="about.html">ABOUT </a></li>
<li><a href="index.html#work">WORK </a></li>
<li><a href="Resume.pdf" target="_blank">RESUME </a></li>
</ul>
</div>
</div>
</body>
</html>
Css code:
/* ----------------- NAVIGATION ----------------- */
.header_nav {
display: inline-table;
list-style: none;
background-color: #FFFEF9F7;
height: 75px;
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
.header_nav ul,
.header_nav a {
list-style: none;
display: inline-block;
text-decoration: none;
font-weight: 600;
font-size: 28px;
text-transform: uppercase;
}
ul {
display: block !important;
list-style-type: disc !important;
margin-block-start: 1em !important;
margin-block-end: 1em !important;
margin-inline-start: 0px !important;
margin-inline-end: 0px !important;
padding-inline-start: 40px !important;
}
.header_nav a:hover {
color: #78F51D;
}
.logo {
display: inline-block;
padding-left: 5%;
padding-top: 25px;
}
.logo img {
max-height: 45px;
}
.menu {
display: inline-block;
float: right;
padding-right: 5%;
padding-top: 2px;
}
.menu li {
padding-left: 20px;
}
.menu .icon {
display: none;
}
li .icon {
padding-right: 0px;
}
li {
padding-left: 12px;
display: inline-block;
}
/* Modifications */
body {
margin: 0;
}
.logo {
padding: 0px;
display: flex;
}
.menu {
padding: 0px;
float: unset;
display: flex;
}
.menu ul {
margin: 0px !important;
padding: 0px !important;
list-style-type: none !important;
}
.menu ul li {
/* padding: 0px; */
}
.header_nav {
padding: 15px;
display: flex;
justify-content: space-between;
width: unset;
left: 0;
right: 0;
}
/* ----------------- MEDIA QUERIES ----------------- */
@media only screen and (max-width: 640px) {
/* .menu ul li:not(.icon) { display: none; } */
/* .menu ul li.icon {
float: right;
display: block;
right: 25px;
top: 25px;
}
.menu.responsive {
background-color: #FFFEF9;
position: relative;
}
.menu.responsive .icon {
position: absolute;
right: 25px;
top: 25px;
z-index: -1;
}
.menu.responsive ul li:not(.icon) {
float: none;
display: block;
top: 100px;
padding-right: 1%;
text-align: right;
} */
/* Modifications */
.menu {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.hamburger-toggle {
display: flex !important;
}
ul {
display: none !important;
}
ul li {
padding-top: 20px;
}
.hamburger-toggle.open + ul {
display: flex !important;
flex-direction: column;
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.