• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS Integrated the burger menu in the navbar (but not only...)

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 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,
 
Top Bottom