I am trying to make a simple static website with just html and css, but i also want to make it responsive hence when the website is opened on a mobile device, the section at the bottom of the page containing links should get hidden and a hamburger menu icon should appear at the top and when clicked should display the menu (with the similar links) spaning the entire screen. i dont have an experience in web dev. please help. i am pasting the code till now.
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
* {
box-sizing: border-box;
}
body {
border: 0;
padding: 0;
margin: 0;
font-family: Inter, sans-serif;
overflow: hidden;
background-color: rgba(27, 47, 57);
color: rgba(182, 57, 127);
}
div {
display: block;
}
.container {
/* padding-bottom: 50px;*/
}
.sub-container {
padding: 0 4rem;
}
.hero {
min-height: 90vh;
padding: 4rem 0;
flex: 1 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.villan {
flex: 1 1;
padding: 2rem 0;
border-top: 1px solid #eaeaea82;
display: flex;
max-height: 10vh;
justify-content: center;
align-items: center;
flex-grow: 1;
}
.villan div {
margin: 0 1rem;
text-align: center;
}
div.box {
text-align: left;
}
a {
color: #0070f3;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
h1 {
color: rgba(148, 199, 47);
text-decoration: underline;
}
.mono {
font-family: 'Roboto Mono', monospace;
}
.role {
font-weight: bold;
}
.material-symbols-rounded {
font-variation-settings:
'FILL' 0,
'wght' 400,
'GRAD' 0,
'opsz' 48
}
.material-symbols-rounded {
color: aliceblue;
position: absolute;
z-index: 10;
font-size: 100px;
}
div.hamburger-menu { display: none; }
@media screen and (min-width:0px) and (max-width: 600px){
section.villan { display: none; }
div.hamburger-menu { display: block; }
main {display: block;}
}
.ham-menu-bg {
background-color: #0070f3;
height: 100vh;
width: 80vw;
z-index: 8;
display: none;
}
.expand-btn:target ~ .ham-menu-bg {
display: block;
}<body>
<div class="container">
<div class="hamburger-menu">
<a href="#"><span class="material-symbols-rounded expand-btn" style="font-size: 50px;">
expand_more
</span></a>
<div class="ham-menu-bg content">
<a href="mailto:example@mail.com">Mail</a>
<a href="./main.html">More to read here.</a>
<a href="contact.html">contact</a></div>
</div>
</div>
<div class="sub-container">
<main class="hero">
<div class="box">
<h1 class="mono">Hello, World!~</h1>
<p class="mono">I am <span class="name"><b>Om</b> (<i>aka</i> <b>potatochips</b>).</span><br><br> I
am a
<span class="role">Developer.</span>
<span class="role">Designer.</span>
<span class="role">Student.</span><br>
<span class="role">Hacker.</span>
<span class="role">Gamer.</span>
<span class="role">Weeb.</span>
<span class="role">Human.</span>
<span class="role">Potato.</span>
</p>
lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod <br>tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim <br>veniam, quis nostrud exercitation ullamco
laboris<br> nisi ut aliquip ex ea commodo consequat.</p>
</div>
</main>
<section class="villan">
<div class="mail"><a href="mailto:example@mail.com">Mail</a></div>
<div class="more"><a href="./main.html">More to read here.</a></div>
<div class="contact"><a href="contact.html">contact</a></div>
</section>
</div>
</div>
</body>Please tell me what am doing wrong and how to do it right.
The challenge with a CSS-only hamburger menu is that CSS can't listen for button clicks. This is why the usual solution would be to use jQuery or javascript which might toggle the class of the mobile menu from inactive to active when the hamburger icon is clicked.
However, CSS-only solutions do exist. They sometimes work by 'listening' for when a check box is checked. If you Google "css only hamburger menu" you'll find links to get you started.
Here's an example of what's possible: https://codepen.io/panchroma/pen/yLQKaQJ
This has an off-canvas menu, which is a bit different to what you described. You could change this if you wanted to, although you might find this approach useful because it gives you more screen space to work with for your menu links on mobile.
I made minor changes to your HTML between lines 4 and 24, and the new CSS starts at line 120
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap");
* {
box-sizing: border-box;
}
body {
border: 0;
padding: 0;
margin: 0;
font-family: Inter, sans-serif;
overflow: hidden;
background-color: rgba(27, 47, 57);
color: rgba(182, 57, 127);
}
div {
display: block;
}
.container {
/* padding-bottom: 50px;*/
}
.sub-container {
padding: 0 4rem;
}
.hero {
min-height: 90vh;
padding: 4rem 0;
flex: 1 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.villan {
flex: 1 1;
padding: 2rem 0;
border-top: 1px solid #eaeaea82;
display: flex;
max-height: 10vh;
justify-content: center;
align-items: center;
flex-grow: 1;
}
.villan div {
margin: 0 1rem;
text-align: center;
}
div.box {
text-align: left;
}
a {
color: #0070f3;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
h1 {
color: rgba(148, 199, 47);
text-decoration: underline;
}
.mono {
font-family: "Roboto Mono", monospace;
}
.role {
font-weight: bold;
}
.material-symbols-rounded {
font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
}
.material-symbols-rounded {
color: aliceblue;
position: absolute;
z-index: 10;
font-size: 100px;
}
div.hamburger-menu {
display: none;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
section.villan {
display: none;
}
div.hamburger-menu {
display: block;
}
main {
display: block;
}
}
.ham-menu-bg {
background-color: #0070f3;
height: 100vh;
width: 80vw;
z-index: 8;
display: none;
}
.expand-btn:target ~ .ham-menu-bg {
display: block;
}
/* new */
#menu__toggle {
opacity: 0;
}
#menu__toggle:checked + .menu__btn > span {
transform: rotate(45deg);
}
#menu__toggle:checked + .menu__btn > span::before {
top: 0;
transform: rotate(0deg);
}
#menu__toggle:checked + .menu__btn > span::after {
top: 0;
transform: rotate(90deg);
}
#menu__toggle:checked ~ .menu__box {
left: 0 !important;
}
.menu__btn {
position: fixed;
top: 20px;
left: 20px;
width: 26px;
height: 26px;
cursor: pointer;
z-index: 1;
}
.menu__btn > span,
.menu__btn > span::before,
.menu__btn > span::after {
display: block;
position: absolute;
width: 100%;
height: 2px;
background-color: #616161;
transition-duration: 0.25s;
}
.menu__btn > span::before {
content: "";
top: -8px;
}
.menu__btn > span::after {
content: "";
top: 8px;
}
.menu__box {
display: block;
position: fixed;
top: 0;
left: -100%;
width: 300px;
height: 100%;
margin: 0;
padding: 80px 0;
list-style: none;
background-color: #eceff1;
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
transition-duration: 0.25s;
}
.menu__item {
display: block;
padding: 12px 24px;
color: #333;
font-family: "Roboto", sans-serif;
font-size: 20px;
font-weight: 600;
text-decoration: none;
transition-duration: 0.25s;
}
.menu__item:hover {
background-color: #cfd8dc;
}
@media screen and (min-width: 601px) {
label.menu__btn {
display: none;
}
}<body>
<div class="container">
<input id="menu__toggle" type="checkbox" />
<label class="menu__btn" for="menu__toggle">
<span></span>
</label>
<!-- <div class="hamburger-menu">
<a href="#"><span class="material-symbols-rounded expand-btn" style="font-size: 50px;">
expand_more
</span></a>
-->
<!-- <div class="ham-menu-bg content"> -->
<div class="menu__box">
<a class="menu__item" href="mailto:example@mail.com">Mail</a><br>
<a class="menu__item" href="./main.html">More to read here.</a><br>
<a class="menu__item" href="contact.html">contact</a>
</div>
</div>
<div class="sub-container">
<main class="hero">
<div class="box">
<h1 class="mono">Hello, World!~</h1>
<p class="mono">I am <span class="name"><b>Om</b> (<i>aka</i> <b>potatochips</b>).</span><br><br> I
am a
<span class="role">Developer.</span>
<span class="role">Designer.</span>
<span class="role">Student.</span><br>
<span class="role">Hacker.</span>
<span class="role">Gamer.</span>
<span class="role">Weeb.</span>
<span class="role">Human.</span>
<span class="role">Potato.</span>
</p>
lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod <br>tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim <br>veniam, quis nostrud exercitation ullamco
laboris<br> nisi ut aliquip ex ea commodo consequat.</p>
</div>
</main>
<section class="villan">
<div class="mail"><a href="mailto:example@mail.com">Mail</a></div>
<div class="more"><a href="./main.html">More to read here.</a></div>
<div class="contact"><a href="contact.html">contact</a></div>
</section>
</div>
</div>
</body>