hello everyone !
I finished my formation on the CSS and HTML few weeks ago. I followed a tutorial in order to creat a burger menu but im stucked on this step.
i have 3 main problems… :
I know that’s its a lot of questions, I tried to check different tutorial and others questions/answers on the forum but I can’t find an answer…
there is my code :
HTML :
CSS :
Thank you for taking the time to reading me and for your help,
I finished my formation on the CSS and HTML few weeks ago. I followed a tutorial in order to creat a burger menu but im stucked on this step.
i have 3 main problems… :
- I need to include my burger menu in the navbar but I don’t know how to do it. I tried to put it in my ul > li in my navbar but it doesn’t work, I know that I have to move CSS parameters (as the button is done with css) but after plenty of test I can’t see how to do it
- The second one, is that I’d like that the burger menu stay when we we are on mobile as I made my navbar menu disappearing (except the logo). I can put the burger menu out of the @media only screen but as I don’t know to implement it in the navbar…
- the 3rd, is that I’d like to make all the screen blur or less bright (don’t know which effect would be the best, maybe both) when the burger menu is open.
I know that’s its a lot of questions, I tried to check different tutorial and others questions/answers on the forum but I can’t find an answer…
there is my code :
HTML :
HTML:
<!DOCTYPE html>
<html lang="fr">
<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>home page</title>
<link rel="stylesheet" href="/styleV5.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<script src="https://kit.fontawesome.com/811bffdae6.js" crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav class="navbar">
<h1 class="logo">K</h1>
<ul class="top-navbar">
<li><a href="index.html">Accueil</a></li>
<li><a href="/pages/offres.html">Nos offres</a></li>
<li><a href="/pages/contact.html">Contact</a></li>
</ul>
</nav>
<!-- Burger menu in the navabr -->
<div class="burger"></div>
<input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
<label for="openSidebarMenu" class="sidebarIconToggle">
<div class="spinner diagonal part-1"></div>
<div class="spinner horizontal"></div>
<div class="spinner diagonal part-2"></div>
</label>
<div id="sidebarMenu">
<ul class="sidebarMenuInner">
<li><a href="/index.html" target="_blank">Accueil</a></li>
<li><a href="/pages/offres.html" target="_blank">Nos offres</a></li>
<li><a href="/pages/contact.html" target="_blank">Contact</a></li>
<li><a href="/pages/A propos.html" target="_blank">A propos </a></li>
</ul>
</div>
</div>
<!-- end code Burger menu in the navabr -->
<!-- section 1 : enfin adapté -->
<section class="presentation first">
<div class="C-adapted">
<h1>Enfin
adapté à chacun</h1>
<br>
<p>blabla blablabla blablabla. "POURSUIVRe" </p>
<button>Découvrez nos offres</button>
<div class="small-images-offres">
<div class="small">
<img src="/ressources/small-image-B.jpeg">
</div>
<div class="small">
<img src="/ressources/small-image-prév.jpeg">
</div>
<div class="small">
<img src="/ressources/small-image.jpeg">
</div>
</div>
</div>
</section>
</header>```CSS :
Code:
{
margin: 0 0 0 0;
padding: 0;
box-sizing: border-box;
font-family: “poppins”, sans-serif;
}
body {
background-image: linear-gradient(to right top, #2c71f6, #0d6fe4, #006cd2, #0068bf, #0163ac);
}
a {
text-decoration: none;
font-size: 17px;
color: white;
transition: all 0.3s ease-in;
}
.navbar {
padding: 10px 20px;
display: flex;
width: 100%;
position: fixed;
top: 0;
align-items: center;
background-color: black;
}
.navbar ul {
flex: 1;
text-align: right;
}
.navbar ul li {
display: inline-block;
margin: 0 30px;
cursor: pointer;
}
.top-navbar li :hover {
color: #2c71f6;
font-size: 20px;
transition: color 0.5s;
}
.logo {
font-size: 35px;
color: #2c71f6;
}
/* Burger menu in the navabar */
.burger {
display: block;
margin: 0 auto;
width: 100%;
max-width: 100%;
box-shadow: none;
background-color: black;
position: fixed;
overflow: hidden;
z-index: 10;
}
#sidebarMenu {
height: 100%;
position: fixed;
right: 0;
width: 250px;
margin-top: -73px;
transform: translateX(250px);
transition: transform 250ms ease-in-out;
background: black;
}
.sidebarMenuInner{
margin: 0;
padding:0;
border-top: 1px solid black;
}
.sidebarMenuInner li{
list-style: none;
color: #fff;
font-weight: bold;
font-size: 17px;
padding: 20px;
cursor: pointer;
border-bottom: 1px solid black;
}
.sidebarMenuInner li a{
color: #fff;
font-weight: bold;
cursor: pointer;
text-decoration: none;
}
.sidebarMenuInner li a:hover{
color: #2c71f6;
font-size: 20px;
}
input[type=“checkbox”]:checked ~ #sidebarMenu {
transform: translateX(0);
}
input[type=checkbox] {
transition: all 0.3s;
box-sizing: border-box;
display: none;
}
.sidebarIconToggle {
transition: all 0.3s;
box-sizing: border-box;
cursor: pointer;
position: absolute;
z-index: 99;
height: 100%;
width: 100%;
top: 22px;
left: 600px;
height: 22px;
width: 22px;
}
.spinner {
transition: all 0.3s;
box-sizing: border-box;
position: absolute;
height: 3px;
width: 100%;
background-color: #fff;
}
.horizontal {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
.diagonal.part-1 {
position: relative;
transition: all 0.3s;
box-sizing: border-box;
float: left;
}
.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .horizontal {
transition: all 0.3s;
box-sizing: border-box;
opacity: 0;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-1 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(135deg);
margin-top: 8px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(-135deg);
margin-top: -9px;
}
/* end munu burger */```Thank you for taking the time to reading me and for your help,
