I’ve been trying to fix this issue for days now, nothing seems to work and I’m beginning to think of scratching the whole project and start over again.
I decided to add a slide hamburger menu to my website and the options inside said menu are positioned exactly next to each other.
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href = "styles.css">
<script src="script.js"></script>
<title>Homepage</title>
</head>
<body>
<header>
<!--Navigation Bar-->
<ul>
<!--Hamburger Slide Menu-->
<label>
<input type="checkbox">
<div class="toggle">
<span class="top_line common"></span>
<span class="middle_line common"></span>
<span class="bottom_line common"></span>
</div>
<div class="slide">
<h1>Menu</h1>
<ul>
<li><a href="#">Profile</a></li>
<br>
<li><a href="#">Cart</a></li>
<br>
<li><a href="#">Wishlist</a></li>
<br>
</ul>
</div>
</label>
<li> <img src="Images/navbar-logo.png" class="logo-img"></li>
<li><a href="index.html" class="active">Home</a></li>
<li><a href="store.html">Store</a></li>
<li><a href="community.html">Community</a></li>
<li class="spacer"></li>
<li style="float:right;"><a href="login.html" >Login</a></li>
<li ><a href="signup.html">Sign Up</a></li>
</ul>
</header>
<footer><label>SSSS</label></footer>
</body>
</html>
css:
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #212121;
height: 70px;
display: flex;
justify-content: center;
align-items: center;
}
li {
display: flex;
align-items: center;
margin: 0 15px;
}
.spacer {
flex-grow: 1;
}
a {
display: block;
padding: 11px;
color: #fff;
text-align: center;
font-size: 1.2em;
text-decoration: none;
}
li a:hover {
background-color: #353535;
max-width: 200px;
}
.active {
background-color: #389261;
}
.icon {
font-size: 1.5em;
color: #fff;
}
body {
background-color: #1c2841;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 100vh;
margin: 0;
padding: 0;
backdrop-filter: blur(4px);
overflow-x: hidden;
}
.modal {
border-radius: 5px;
font-family: sans-serif;
line-height: 1.5;
max-width: 100%;
padding: 1rem 2rem;
max-height: 100%;
height: 1000px;
}
.logo-img{
margin-top:0.3px;
margin-bottom:-5px;
margin-left: 70px;
width: 70px;
height: 50px;
}
.login-form-container{
background-color: black;
background: transparent;
width: 680px;
height: 75%;
margin-left: 375px;
justify-content: center ;
margin-top: 150px;
margin-left: 500px;
}
.entryarea{
position: relative;
height:80px;
line-height: 80px;
}
input[type=text]{
position:absolute;
width:70%;
outline:none;
font-size: 1.5em;
padding: 0 30px;
line-height: 80px;
border-radius: 10px;
border: 2px solid #ffffff ;
background: transparent;
transition: 0.1s ease;
z-index: 1111;
}
input[type=password]{
position:absolute;
width:70%;
outline:none;
font-size: 1.5em;
padding: 0 30px;
line-height: 80px;
border-radius: 10px;
border: 2px solid #ffffff ;
background: transparent;
transition: 0.1s ease;
z-index: 1111;
margin-top: 90px;
}
.username-labelline{
position: absolute;
font-size: 1.5em;
color:rgb(255, 255, 255);
padding: 0 25px;
margin: 0 20px;
background-color: #1c2841;
transition: 0.2s ease;
}
.password-labelline{
position: absolute;
font-size: 1.5em;
color:rgb(255, 255, 255);
padding: 0 25px;
margin: 0 20px;
background-color: #1c2841;
transition: 0.2s ease;
margin-top: 90px;
}
input:focus,
input:valid{
color:#389261;
border: 4px solid #389261;
}
input:focus + .username-labelline ,
input:valid+.username-labelline{
color:#389261;
height: 30px;
line-height:30px;
padding: 0 12px;
transform: translate(-15px, -16px) scale(0.9);
z-index: 1111;
}
input:focus + .password-labelline ,
input:valid+ .password-labelline{
color:#389261;
height: 30px;
line-height:30px;
padding: 0 12px;
transform: translate(-15px, -16px) scale(0.9);
z-index: 1111;
}
.submit-btn {
border-radius: 10px;
text-align: center;
width: 200px;
height: 70px;
margin-top: 130px;
margin-left: 340px;
background: transparent;
border: 2px solid #ffffff;
display: inline-block;
color: #ffffff;
font-size: 1.2em;
}
.submit-btn:hover {
cursor: pointer;
border-color: #389261;
color: #389261;
}
.register-label {
color: white;
font-size: 1.2em;
position: relative;
top: -45px;
right:-20px;
}
.register-label::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -2px;
left: 0;
background-color: #389261;
transition: width 0.3s ease-out;
}
.register-label:hover::after {
width: 100%;
}
.register-label:hover {
cursor: pointer;
}
.terms-of-use{
color: white;
font-size: 1.2em;
position: relative;
top: -45px;
right:-110px;
left:110px;
}
.terms-of-use::after{
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -2px;
left: 0;
background-color: #389261;
transition: width 0.3s ease-out;
}
.terms-of-use:hover{
cursor: pointer;
}
.loginform-label{
color:#ffffff;
}
.slide{
top:-10px;
height:100%;
width:200px;
position:absolute;
background-color: #212121;
filter: alpha(opacity=50);
transition: 0.5s ease;
transform: translateX(-180px);
}
.slide ul {
list-style-type: none;
padding: 0;
margin: 0;
width: 100%;
}
.slide ul li {
width: 100%;
display: block;
margin: 10px 0;
}
.slide ul li a {
display: block;
padding: 10px;
color: #fff;
text-align: left;
text-decoration: none;
background-color: #212121;
width: 100%;
}
.slide ul li a:hover {
background-color: #353535;
}
h1 {
color: #389261;
font-weight: 800;
text-align: center;
margin-left: 30px;
position: relative;
bottom: 100px;
top: 10px;
pointer-events: none;
}
.toggle{
position:absolute;
height: 30px;
width:30px;
background-color: transparent;
z-index:1;
cursor:pointer;
border-radius: 2;
top:24px;
left:15px;
}
.toggle .common{
position:absolute;
height: 3px;
width:20px;
background-color: #389261;
border-radius: 50px;
transition: 0.3s ease;
}
.toggle .top_line{
top:30%;
left: 50%;
transform: translate(-50%,-50%);
}
.toggle .middle_line{
top:50%;
left: 50%;
transform: translate(-50%,-50%);
}
.toggle .bottom_line{
top:70%;
left: 50%;
transform: translate(-50%,-50%);
}
input:checked ~ .toggle .top_line{
left: 2px;
top:14px;
width: 25px;
transform: rotate(45deg);
}
input:checked ~ .toggle .bottom_line{
left: 2px;
top:14px;
width: 25px;
transform: rotate(-45deg);
}
input:checked ~ .toggle .middle_line{
opacity: 0;
transform:translateX(20px);
}
input:checked ~ .slide{
transform: translateX(0);
}
input[type="checkbox"]{
visibility: hidden;
}
any help would be appreciated.
I tried setting all li width to 100%, adding break lines under each li, editing the padding and marging etc.
I’m expecting to make each and every option in the slide menu be on top of one another, vertically.
If I interpret your question correctly, you want the elements in the hamburger menu to be in a vertical list instead of horizontal. The problem seems to be that you set display: flex in the top ul section to get the top menu bar horizontal but never set the display parameter to block in the .slide ul section.
I hope this helps!
Cheers
1