Html - Css navigation bar, Where am I getting it wrong?

AbdulmatiinIsmail
February 2, 2024
223 views
2 votes
3 Answers

I am working on a navigation bar using HTML, CSS, and JavaScript.

I already codes it and I set the display of the bar to fixed then I noticed that the content of the page is now overlaying the nav bar. Attached is the screenshots of the code as well as the code

<!DOCTYPE html>
<html>

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">



  <title>AlmaTech</title>



  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />

  <link rel="stylesheet" href="all.min.css">

  <style>
    @import url('https://fonts.googleapis.com/css2?family=Cute+Font&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Signika+Negative&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Satisfy&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Caveat:wght@700&family=Cute+Font&display=swap');
    * {
      font-family: 'Signika Negative', sans-serif;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      border-radius: 5px;
    }
    
    .brand {
      font-family: 'Caveat', cursive;
      font-family: 'Cute Font', sans-serif;
    }
    
    .nav-bar-container {
      display: flex;
      justify-content: space-between;
      width: 100%;
      align-items: center;
      padding: 10px 40px;
      box-shadow: 5px 3px 10px rgb(0 0 0 / 0.2);
      background: #e7e7e7aa;
      position: fixed;
    }
    
    .nav-bar-middle {
      display: flex;
      gap: 30px;
    }
    
    .nav-bar-middle li {
      list-style: none;
      font-size: 20px;
    }
    
    .nav-bar-middle-items {
      display: flex;
      gap: 30px;
    }
    
    .content {
      position: absolute;
    }
    
    .nav-bar-side {
      position: sticky;
      transition: all 0.5s ease-in-out;
      background: #e7e7e7ad;
      display: flex;
      align-items: space-between;
      justify-content: flex-start;
      width: 150px;
      display: none;
      /* border-top-radius:0;

       border-right-radius:0;

       border-left-radius:0;

       border-bottom-radius:0; */
      /* border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;*/
      border-radius: 0 0 10px 0;
      box-shadow: 5px 3px 10px rgb(0 0 0 / 0.2);
      padding-right: 20px;
      padding-bottom: 20px;
      padding-left: 20px;
      flex-direction: column;
      margin-top: 0;
    }
    
    .nav-bar-side ul li {
      padding-top: 20px;
    }
    
    .nav-bar-side ul li {
      list-style: none;
    }
    
    #menuIcon {
      display: none;
    }
    
    .show {
      display: block;
      position: sticky;
      background: #e7e7e7ad;
      display: flex;
      align-items: space-between;
      justify-content: flex-start;
      width: 150px;
    }
    
    .rotate {
      transform: rotate(-90deg)
    }
    
    @media(max-width:900px) {
      #menuIcon {
        display: none;
      }
      #accountIcon {
        display: none;
      }
    }
    
    @media(max-width:800px) {
      #menuIcon {
        display: block;
      }
      .nav-bar-middle {
        display: none;
      }
    }
  </style>

</head>

<body>



  <div class="body">

    <div class="nav-bar-container">

      <div class="nav-bar-logo">

        <h1 class="brand">AlmaTech</h1>

      </div>



      <div class="nav-bar-middle">

        <ul class="nav-bar-middle-items">

          <li>Home</li>

          <li>About Us</li>

          <li>Contact Us</li>

          <li>Our Services</li>

          <li>Achievements</li>

        </ul>

      </div>



      <div class="nav-bar-right">

        <i class="fa-solid fa-bars" id="menuIcon"></i>

        <i class="fa-solid fa-user" id="accountIcon"></i>

      </div>

    </div>





    <div class="nav-bar-side">

      <ul class="nav-bar-side-items">

        <li>Home</li>

        <li>About Us</li>

        <li>Contact Us</li>

        <li>Our Services</li>

        <li>Achievements</li>

      </ul>

    </div>

  </div>



  <div class="content">

    brute noster aliquam adversarium utamur arcu voluptatum nobis antiopam pretium te putent dicat deterruisset voluptatibus sententiae definiebas iriure platonem tellus ancillae laudem orci nisl nonumes sanctus ad adipiscing tractatos dolore voluptatum tristique
    porro neque tale rutrum efficiantur definiebas luptatum equidem habemus nostrum hinc antiopam eleifend amet nullam torquent utroque petentium antiopam sociis curabitur interdum error ludus adipiscing prompta electram natum equidem tibique molestiae
    meliore vivamus adipiscing ligula arcu habemus nunc epicuri nulla constituam nascetur ea integer invenire cum sanctus fabulas option dictas nisl dissentiunt consectetur accusata et utinam ceteros similique dicam dico faucibus sapientem ceteros porro
    fabulas graece nibh mi donec montes possim eripuit arcu inceptos omittam feugait vix cum suspendisse lectus himenaeos morbi pro sodales per adipisci interpretaris inciderint iisque habitant mucius leo habitant senectus petentium omnesque mus dictas
    persius magna porta dicam condimentum consectetuer mucius vel epicurei detraxit ocurreret expetenda usu porttitor id hac magnis eloquentiam oratio neglegentur fermentum platea affert repudiandae patrioque mauris sapien ocurreret senectus iuvaret mediocritatem
    intellegat tempus aliquam quam fringilla deterruisset intellegebat fabulas hinc efficitur parturient animal menandri simul sententiae solum orci dolores hinc verear eirmod electram causae ancillae mediocritatem orci vivendo utroque voluptatum platonem
    elaboraret quod iudicabit volutpat sententiae ornatus suspendisse eloquentiam felis vituperatoribus vulputate sanctus mi legimus vitae interpretaris imperdiet dui decore maecenas interpretaris iriure viderer expetendis honestatis venenatis senectus
    reque dictum consetetur pertinacia doctus in eruditi falli graecis contentiones option nostra no persequeris indoctum consetetur appetere quas eget accumsan nisi sanctus fugit vituperata fabellas pericula maximus pellentesque intellegebat tincidunt
    libero mus ancillae his assueverit ludus conclusionemque eum vero melius commodo adversarium error volumus molestiae detraxit viderer tibique suavitate montes rutrum prodesset nostra wisi consectetuer sociosqu vivendo iisque ex utamur quisque feugiat
    definiebas suscipiantur volumus est cetero nulla tractatos dissentiunt montes deserunt graece detracto minim legere quaestio ancillae fabellas efficitur ex venenatis ligula altera maluisset laoreet discere adversarium agam lacus dolorem ornare pro
    platonem quaeque cubilia nisi varius fabulas vidisse pharetra cetero sit doming usu aliquid ullamcorper aliquet dapibus mucius nam sodales mei habitasse dis decore audire malesuada quis ultricies senectus ligula non no intellegebat dicunt dis vidisse
    interdum molestie orci mediocrem vehicula qui idque dolor veniam unum leo penatibus eum ac ceteros montes accumsan netus augue tantas voluptaria eum faucibus simul faucibus referrentur dis suas efficiantur aeque velit class voluptatibus est interdum
    netus dolore salutatus torquent constituam iisque blandit tibique curae cum repudiandae dolor eos appetere mei lacus sodales vis aeque consetetur liber fringilla cras faucibus causae dictumst vix mediocrem vidisse periculis eu scelerisque petentium
    nam eam neque sea facilisi no sem ius leo verterem cetero conceptam interesset definitionem conubia sem aliquip elementum noluisse veri mus aliquam dolore hendrerit malorum regione amet civibus enim fusce te vel porttitor liber tibique iisque omittam
    constituto ignota vivamus omittantur interesset dicit platonem praesent voluptatibus suscipiantur principes natum alterum porro singulis in quaestio velit doming placerat tempor imperdiet sumo netus lacus perpetua aenean doctus quem nam electram elementum
    quis consequat vivendo voluptaria singulis molestiae meliore fabulas erroribus quaeque libris conubia sumo legere veri lacinia oratio hac facilisi liber saperet feugait labores ubique neque pellentesque prompta corrumpit numquam civibus neque est
    facilisi ornare perpetua saepe honestatis possim vituperatoribus mnesarchum sadipscing cum eam dicant mediocrem persequeris ridiculus nulla fabellas vestibulum eius mi iusto veritus causae scripta aptent tempus nisi eruditi tractatos dolor platonem
    pericula audire doming sit qui egestas nascetur corrumpit pro malesuada ac ipsum an no integer veri singulis dis elitr natum placerat nascetur interesset efficitur noluisse sapientem his fabulas falli ponderum reque dapibus dictumst adolescens imperdiet
    fusce libris menandri suscipiantur proin senectus electram cu mi vivamus ultrices odio affert interdum non ancillae periculis possim varius sociis cubilia legimus latine consectetur ea moderatius ponderum an tellus nam magnis magnis ac in mutat consectetur
    habemus adipisci periculis nullam praesent platea epicurei neque quem blandit ac sollicitudin magnis aenean magnis definitiones eruditi legimus potenti vel senectus lacus sociosqu meliore ex himenaeos atomorum ancillae no senserit malesuada libero
    delicata congue luptatum pro nisl mnesarchum ceteros persius mnesarchum debet eu interpretaris vero atomorum salutatus duis elit ullamcorper agam fabulas deserunt commodo nihil mazim expetenda deseruisse in noster eruditi gravida dicam eleifend nonumes
    petentium nominavi luctus eirmod prompta offendit consul viris facilisi offendit platea dicunt perpetua voluptaria ad suscipit dico ceteros ferri litora solet scripserit dictas veniam nihil class cetero reprehendunt tortor interesset sapien viverra
    aeque gloriatur fusce idque porta volumus feugait comprehensam lorem esse petentium magnis fames iudicabit mei eius dicta nihil fabulas commune imperdiet repudiare suas inani inceptos maluisset latine dolores iudicabit unum phasellus velit nonumy
    brute habitasse moderatius commodo sonet erroribus verear conclusionemque verterem reque iisque placerat invenire ut vero oratio eruditi fugit libero adipisci meliore est justo vulputate solum non scelerisque elit turpis sodales pertinacia pretium
    habitasse arcu quaerendum civibus brute feugait ipsum dignissim tritani dissentiunt ignota tincidunt himenaeos porro instructior gloriatur consectetur salutatus per inciderint nisl dolorem alterum vivamus persecuti suspendisse eruditi sociosqu mi
    prompta efficiantur tamquam eruditi aliquet morbi molestiae omnesque ridiculus mea pertinacia turpis mi adolescens necessitatibus quis omittam aliquip nostra ex inani unum repudiandae placerat doctus eleifend maiorum nascetur utroque ultricies ignota
    verterem sed liber duis rhoncus cubilia mus audire percipit sodales maiestatis dictum magna persius splendide suas unum audire ponderum suscipit comprehensam donec scripta similique dolorum dolore adipiscing bibendum oratio nunc utinam nihil expetenda
    iriure aperiri id falli litora velit malesuada aliquet maiorum facilisi accommodare mazim praesent maximus ea eu vituperata duis nonumy sapientem donec gravida qualisque dolores sumo altera dui graeci

  </div>

  <script>
    const navIcon = document.querySelector('#menuIcon');



    const navSide = document.querySelector('.nav-bar-side');



    navIcon.addEventListener('click', toGGle);



    function toGGle() {

      navSide.classList.toggle('show');



      navIcon.classList.toggle('rotate');



    }
  </script>

</body>

</html>

I have tried lot of values but I haven’t seen a helpful one

Answers

You can use z-index. Here, I set it to 9999.

.nav-bar-container {
  /* ... */
  z-index: 9999;
}

<!DOCTYPE html>
<html>

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">



  <title>AlmaTech</title>



  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />

  <link rel="stylesheet" href="all.min.css">

  <style>
    @import url('https://fonts.googleapis.com/css2?family=Cute+Font&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Signika+Negative&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Satisfy&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Caveat:wght@700&family=Cute+Font&display=swap');
    * {
      font-family: 'Signika Negative', sans-serif;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      border-radius: 5px;
    }
    
    .brand {
      font-family: 'Caveat', cursive;
      font-family: 'Cute Font', sans-serif;
    }
    
    .nav-bar-container {
      display: flex;
      justify-content: space-between;
      width: 100%;
      align-items: center;
      padding: 10px 40px;
      box-shadow: 5px 3px 10px rgb(0 0 0 / 0.2);
      background: #e7e7e7aa;
      position: fixed;
      z-index: 9999;
    }
    
    .nav-bar-middle {
      display: flex;
      gap: 30px;
    }
    
    .nav-bar-middle li {
      list-style: none;
      font-size: 20px;
    }
    
    .nav-bar-middle-items {
      display: flex;
      gap: 30px;
    }
    
    .content {
      position: absolute;
    }
    
    .nav-bar-side {
      position: sticky;
      transition: all 0.5s ease-in-out;
      background: #e7e7e7ad;
      display: flex;
      align-items: space-between;
      justify-content: flex-start;
      width: 150px;
      display: none;
      /* border-top-radius:0;

       border-right-radius:0;

       border-left-radius:0;

       border-bottom-radius:0; */
      /* border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;*/
      border-radius: 0 0 10px 0;
      box-shadow: 5px 3px 10px rgb(0 0 0 / 0.2);
      padding-right: 20px;
      padding-bottom: 20px;
      padding-left: 20px;
      flex-direction: column;
      margin-top: 0;
    }
    
    .nav-bar-side ul li {
      padding-top: 20px;
    }
    
    .nav-bar-side ul li {
      list-style: none;
    }
    
    #menuIcon {
      display: none;
    }
    
    .show {
      display: block;
      position: sticky;
      background: #e7e7e7ad;
      display: flex;
      align-items: space-between;
      justify-content: flex-start;
      width: 150px;
    }
    
    .rotate {
      transform: rotate(-90deg)
    }
    
    @media(max-width:900px) {
      #menuIcon {
        display: none;
      }
      #accountIcon {
        display: none;
      }
    }
    
    @media(max-width:800px) {
      #menuIcon {
        display: block;
      }
      .nav-bar-middle {
        display: none;
      }
    }
  </style>

</head>

<body>



  <div class="body">

    <div class="nav-bar-container">

      <div class="nav-bar-logo">

        <h1 class="brand">AlmaTech</h1>

      </div>



      <div class="nav-bar-middle">

        <ul class="nav-bar-middle-items">

          <li>Home</li>

          <li>About Us</li>

          <li>Contact Us</li>

          <li>Our Services</li>

          <li>Achievements</li>

        </ul>

      </div>



      <div class="nav-bar-right">

        <i class="fa-solid fa-bars" id="menuIcon"></i>

        <i class="fa-solid fa-user" id="accountIcon"></i>

      </div>

    </div>





    <div class="nav-bar-side">

      <ul class="nav-bar-side-items">

        <li>Home</li>

        <li>About Us</li>

        <li>Contact Us</li>

        <li>Our Services</li>

        <li>Achievements</li>

      </ul>

    </div>

  </div>



  <div class="content">

    brute noster aliquam adversarium utamur arcu voluptatum nobis antiopam pretium te putent dicat deterruisset voluptatibus sententiae definiebas iriure platonem tellus ancillae laudem orci nisl nonumes sanctus ad adipiscing tractatos dolore voluptatum tristique
    porro neque tale rutrum efficiantur definiebas luptatum equidem habemus nostrum hinc antiopam eleifend amet nullam torquent utroque petentium antiopam sociis curabitur interdum error ludus adipiscing prompta electram natum equidem tibique molestiae
    meliore vivamus adipiscing ligula arcu habemus nunc epicuri nulla constituam nascetur ea integer invenire cum sanctus fabulas option dictas nisl dissentiunt consectetur accusata et utinam ceteros similique dicam dico faucibus sapientem ceteros porro
    fabulas graece nibh mi donec montes possim eripuit arcu inceptos omittam feugait vix cum suspendisse lectus himenaeos morbi pro sodales per adipisci interpretaris inciderint iisque habitant mucius leo habitant senectus petentium omnesque mus dictas
    persius magna porta dicam condimentum consectetuer mucius vel epicurei detraxit ocurreret expetenda usu porttitor id hac magnis eloquentiam oratio neglegentur fermentum platea affert repudiandae patrioque mauris sapien ocurreret senectus iuvaret mediocritatem
    intellegat tempus aliquam quam fringilla deterruisset intellegebat fabulas hinc efficitur parturient animal menandri simul sententiae solum orci dolores hinc verear eirmod electram causae ancillae mediocritatem orci vivendo utroque voluptatum platonem
    elaboraret quod iudicabit volutpat sententiae ornatus suspendisse eloquentiam felis vituperatoribus vulputate sanctus mi legimus vitae interpretaris imperdiet dui decore maecenas interpretaris iriure viderer expetendis honestatis venenatis senectus
    reque dictum consetetur pertinacia doctus in eruditi falli graecis contentiones option nostra no persequeris indoctum consetetur appetere quas eget accumsan nisi sanctus fugit vituperata fabellas pericula maximus pellentesque intellegebat tincidunt
    libero mus ancillae his assueverit ludus conclusionemque eum vero melius commodo adversarium error volumus molestiae detraxit viderer tibique suavitate montes rutrum prodesset nostra wisi consectetuer sociosqu vivendo iisque ex utamur quisque feugiat
    definiebas suscipiantur volumus est cetero nulla tractatos dissentiunt montes deserunt graece detracto minim legere quaestio ancillae fabellas efficitur ex venenatis ligula altera maluisset laoreet discere adversarium agam lacus dolorem ornare pro
    platonem quaeque cubilia nisi varius fabulas vidisse pharetra cetero sit doming usu aliquid ullamcorper aliquet dapibus mucius nam sodales mei habitasse dis decore audire malesuada quis ultricies senectus ligula non no intellegebat dicunt dis vidisse
    interdum molestie orci mediocrem vehicula qui idque dolor veniam unum leo penatibus eum ac ceteros montes accumsan netus augue tantas voluptaria eum faucibus simul faucibus referrentur dis suas efficiantur aeque velit class voluptatibus est interdum
    netus dolore salutatus torquent constituam iisque blandit tibique curae cum repudiandae dolor eos appetere mei lacus sodales vis aeque consetetur liber fringilla cras faucibus causae dictumst vix mediocrem vidisse periculis eu scelerisque petentium
    nam eam neque sea facilisi no sem ius leo verterem cetero conceptam interesset definitionem conubia sem aliquip elementum noluisse veri mus aliquam dolore hendrerit malorum regione amet civibus enim fusce te vel porttitor liber tibique iisque omittam
    constituto ignota vivamus omittantur interesset dicit platonem praesent voluptatibus suscipiantur principes natum alterum porro singulis in quaestio velit doming placerat tempor imperdiet sumo netus lacus perpetua aenean doctus quem nam electram elementum
    quis consequat vivendo voluptaria singulis molestiae meliore fabulas erroribus quaeque libris conubia sumo legere veri lacinia oratio hac facilisi liber saperet feugait labores ubique neque pellentesque prompta corrumpit numquam civibus neque est
    facilisi ornare perpetua saepe honestatis possim vituperatoribus mnesarchum sadipscing cum eam dicant mediocrem persequeris ridiculus nulla fabellas vestibulum eius mi iusto veritus causae scripta aptent tempus nisi eruditi tractatos dolor platonem
    pericula audire doming sit qui egestas nascetur corrumpit pro malesuada ac ipsum an no integer veri singulis dis elitr natum placerat nascetur interesset efficitur noluisse sapientem his fabulas falli ponderum reque dapibus dictumst adolescens imperdiet
    fusce libris menandri suscipiantur proin senectus electram cu mi vivamus ultrices odio affert interdum non ancillae periculis possim varius sociis cubilia legimus latine consectetur ea moderatius ponderum an tellus nam magnis magnis ac in mutat consectetur
    habemus adipisci periculis nullam praesent platea epicurei neque quem blandit ac sollicitudin magnis aenean magnis definitiones eruditi legimus potenti vel senectus lacus sociosqu meliore ex himenaeos atomorum ancillae no senserit malesuada libero
    delicata congue luptatum pro nisl mnesarchum ceteros persius mnesarchum debet eu interpretaris vero atomorum salutatus duis elit ullamcorper agam fabulas deserunt commodo nihil mazim expetenda deseruisse in noster eruditi gravida dicam eleifend nonumes
    petentium nominavi luctus eirmod prompta offendit consul viris facilisi offendit platea dicunt perpetua voluptaria ad suscipit dico ceteros ferri litora solet scripserit dictas veniam nihil class cetero reprehendunt tortor interesset sapien viverra
    aeque gloriatur fusce idque porta volumus feugait comprehensam lorem esse petentium magnis fames iudicabit mei eius dicta nihil fabulas commune imperdiet repudiare suas inani inceptos maluisset latine dolores iudicabit unum phasellus velit nonumy
    brute habitasse moderatius commodo sonet erroribus verear conclusionemque verterem reque iisque placerat invenire ut vero oratio eruditi fugit libero adipisci meliore est justo vulputate solum non scelerisque elit turpis sodales pertinacia pretium
    habitasse arcu quaerendum civibus brute feugait ipsum dignissim tritani dissentiunt ignota tincidunt himenaeos porro instructior gloriatur consectetur salutatus per inciderint nisl dolorem alterum vivamus persecuti suspendisse eruditi sociosqu mi
    prompta efficiantur tamquam eruditi aliquet morbi molestiae omnesque ridiculus mea pertinacia turpis mi adolescens necessitatibus quis omittam aliquip nostra ex inani unum repudiandae placerat doctus eleifend maiorum nascetur utroque ultricies ignota
    verterem sed liber duis rhoncus cubilia mus audire percipit sodales maiestatis dictum magna persius splendide suas unum audire ponderum suscipit comprehensam donec scripta similique dolorum dolore adipiscing bibendum oratio nunc utinam nihil expetenda
    iriure aperiri id falli litora velit malesuada aliquet maiorum facilisi accommodare mazim praesent maximus ea eu vituperata duis nonumy sapientem donec gravida qualisque dolores sumo altera dui graeci

  </div>

  <script>
    const navIcon = document.querySelector('#menuIcon');



    const navSide = document.querySelector('.nav-bar-side');



    navIcon.addEventListener('click', toGGle);



    function toGGle() {

      navSide.classList.toggle('show');



      navIcon.classList.toggle('rotate');



    }
  </script>

</body>

</html>

Simply add z-index: 99 (or any number higher than 1) to the .nav-bar-container element.

Also, if you’re concerned about opacity of the nav-bar-container remove the aa at the and of the background property: #e7e7e7

<!DOCTYPE html>
<html>

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">



  <title>AlmaTech</title>



  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />

  <link rel="stylesheet" href="all.min.css">

  <style>
    @import url('https://fonts.googleapis.com/css2?family=Cute+Font&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Signika+Negative&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Satisfy&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Caveat:wght@700&family=Cute+Font&display=swap');
    * {
      font-family: 'Signika Negative', sans-serif;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      border-radius: 5px;
    }
    
    .brand {
      font-family: 'Caveat', cursive;
      font-family: 'Cute Font', sans-serif;
    }
    
    .nav-bar-container {
      display: flex;
      justify-content: space-between;
      width: 100%;
      align-items: center;
      padding: 10px 40px;
      box-shadow: 5px 3px 10px rgb(0 0 0 / 0.2);
      background: #e7e7e7aa;
      position: fixed;
      z-index: 99;
    }
    
    .nav-bar-middle {
      display: flex;
      gap: 30px;
    }
    
    .nav-bar-middle li {
      list-style: none;
      font-size: 20px;
    }
    
    .nav-bar-middle-items {
      display: flex;
      gap: 30px;
    }
    
    .content {
      position: absolute;
    }
    
    .nav-bar-side {
      position: sticky;
      transition: all 0.5s ease-in-out;
      background: #e7e7e7ad;
      display: flex;
      align-items: space-between;
      justify-content: flex-start;
      width: 150px;
      display: none;
      /* border-top-radius:0;

       border-right-radius:0;

       border-left-radius:0;

       border-bottom-radius:0; */
      /* border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;*/
      border-radius: 0 0 10px 0;
      box-shadow: 5px 3px 10px rgb(0 0 0 / 0.2);
      padding-right: 20px;
      padding-bottom: 20px;
      padding-left: 20px;
      flex-direction: column;
      margin-top: 0;
    }
    
    .nav-bar-side ul li {
      padding-top: 20px;
    }
    
    .nav-bar-side ul li {
      list-style: none;
    }
    
    #menuIcon {
      display: none;
    }
    
    .show {
      display: block;
      position: sticky;
      background: #e7e7e7ad;
      display: flex;
      align-items: space-between;
      justify-content: flex-start;
      width: 150px;
    }
    
    .rotate {
      transform: rotate(-90deg)
    }
    
    @media(max-width:900px) {
      #menuIcon {
        display: none;
      }
      #accountIcon {
        display: none;
      }
    }
    
    @media(max-width:800px) {
      #menuIcon {
        display: block;
      }
      .nav-bar-middle {
        display: none;
      }
    }
  </style>

</head>

<body>



  <div class="body">

    <div class="nav-bar-container">

      <div class="nav-bar-logo">

        <h1 class="brand">AlmaTech</h1>

      </div>



      <div class="nav-bar-middle">

        <ul class="nav-bar-middle-items">

          <li>Home</li>

          <li>About Us</li>

          <li>Contact Us</li>

          <li>Our Services</li>

          <li>Achievements</li>

        </ul>

      </div>



      <div class="nav-bar-right">

        <i class="fa-solid fa-bars" id="menuIcon"></i>

        <i class="fa-solid fa-user" id="accountIcon"></i>

      </div>

    </div>





    <div class="nav-bar-side">

      <ul class="nav-bar-side-items">

        <li>Home</li>

        <li>About Us</li>

        <li>Contact Us</li>

        <li>Our Services</li>

        <li>Achievements</li>

      </ul>

    </div>

  </div>



  <div class="content">

    brute noster aliquam adversarium utamur arcu voluptatum nobis antiopam pretium te putent dicat deterruisset voluptatibus sententiae definiebas iriure platonem tellus ancillae laudem orci nisl nonumes sanctus ad adipiscing tractatos dolore voluptatum tristique
    porro neque tale rutrum efficiantur definiebas luptatum equidem habemus nostrum hinc antiopam eleifend amet nullam torquent utroque petentium antiopam sociis curabitur interdum error ludus adipiscing prompta electram natum equidem tibique molestiae
    meliore vivamus adipiscing ligula arcu habemus nunc epicuri nulla constituam nascetur ea integer invenire cum sanctus fabulas option dictas nisl dissentiunt consectetur accusata et utinam ceteros similique dicam dico faucibus sapientem ceteros porro
    fabulas graece nibh mi donec montes possim eripuit arcu inceptos omittam feugait vix cum suspendisse lectus himenaeos morbi pro sodales per adipisci interpretaris inciderint iisque habitant mucius leo habitant senectus petentium omnesque mus dictas
    persius magna porta dicam condimentum consectetuer mucius vel epicurei detraxit ocurreret expetenda usu porttitor id hac magnis eloquentiam oratio neglegentur fermentum platea affert repudiandae patrioque mauris sapien ocurreret senectus iuvaret mediocritatem
    intellegat tempus aliquam quam fringilla deterruisset intellegebat fabulas hinc efficitur parturient animal menandri simul sententiae solum orci dolores hinc verear eirmod electram causae ancillae mediocritatem orci vivendo utroque voluptatum platonem
    elaboraret quod iudicabit volutpat sententiae ornatus suspendisse eloquentiam felis vituperatoribus vulputate sanctus mi legimus vitae interpretaris imperdiet dui decore maecenas interpretaris iriure viderer expetendis honestatis venenatis senectus
    reque dictum consetetur pertinacia doctus in eruditi falli graecis contentiones option nostra no persequeris indoctum consetetur appetere quas eget accumsan nisi sanctus fugit vituperata fabellas pericula maximus pellentesque intellegebat tincidunt
    libero mus ancillae his assueverit ludus conclusionemque eum vero melius commodo adversarium error volumus molestiae detraxit viderer tibique suavitate montes rutrum prodesset nostra wisi consectetuer sociosqu vivendo iisque ex utamur quisque feugiat
    definiebas suscipiantur volumus est cetero nulla tractatos dissentiunt montes deserunt graece detracto minim legere quaestio ancillae fabellas efficitur ex venenatis ligula altera maluisset laoreet discere adversarium agam lacus dolorem ornare pro
    platonem quaeque cubilia nisi varius fabulas vidisse pharetra cetero sit doming usu aliquid ullamcorper aliquet dapibus mucius nam sodales mei habitasse dis decore audire malesuada quis ultricies senectus ligula non no intellegebat dicunt dis vidisse
    interdum molestie orci mediocrem vehicula qui idque dolor veniam unum leo penatibus eum ac ceteros montes accumsan netus augue tantas voluptaria eum faucibus simul faucibus referrentur dis suas efficiantur aeque velit class voluptatibus est interdum
    netus dolore salutatus torquent constituam iisque blandit tibique curae cum repudiandae dolor eos appetere mei lacus sodales vis aeque consetetur liber fringilla cras faucibus causae dictumst vix mediocrem vidisse periculis eu scelerisque petentium
    nam eam neque sea facilisi no sem ius leo verterem cetero conceptam interesset definitionem conubia sem aliquip elementum noluisse veri mus aliquam dolore hendrerit malorum regione amet civibus enim fusce te vel porttitor liber tibique iisque omittam
    constituto ignota vivamus omittantur interesset dicit platonem praesent voluptatibus suscipiantur principes natum alterum porro singulis in quaestio velit doming placerat tempor imperdiet sumo netus lacus perpetua aenean doctus quem nam electram elementum
    quis consequat vivendo voluptaria singulis molestiae meliore fabulas erroribus quaeque libris conubia sumo legere veri lacinia oratio hac facilisi liber saperet feugait labores ubique neque pellentesque prompta corrumpit numquam civibus neque est
    facilisi ornare perpetua saepe honestatis possim vituperatoribus mnesarchum sadipscing cum eam dicant mediocrem persequeris ridiculus nulla fabellas vestibulum eius mi iusto veritus causae scripta aptent tempus nisi eruditi tractatos dolor platonem
    pericula audire doming sit qui egestas nascetur corrumpit pro malesuada ac ipsum an no integer veri singulis dis elitr natum placerat nascetur interesset efficitur noluisse sapientem his fabulas falli ponderum reque dapibus dictumst adolescens imperdiet
    fusce libris menandri suscipiantur proin senectus electram cu mi vivamus ultrices odio affert interdum non ancillae periculis possim varius sociis cubilia legimus latine consectetur ea moderatius ponderum an tellus nam magnis magnis ac in mutat consectetur
    habemus adipisci periculis nullam praesent platea epicurei neque quem blandit ac sollicitudin magnis aenean magnis definitiones eruditi legimus potenti vel senectus lacus sociosqu meliore ex himenaeos atomorum ancillae no senserit malesuada libero
    delicata congue luptatum pro nisl mnesarchum ceteros persius mnesarchum debet eu interpretaris vero atomorum salutatus duis elit ullamcorper agam fabulas deserunt commodo nihil mazim expetenda deseruisse in noster eruditi gravida dicam eleifend nonumes
    petentium nominavi luctus eirmod prompta offendit consul viris facilisi offendit platea dicunt perpetua voluptaria ad suscipit dico ceteros ferri litora solet scripserit dictas veniam nihil class cetero reprehendunt tortor interesset sapien viverra
    aeque gloriatur fusce idque porta volumus feugait comprehensam lorem esse petentium magnis fames iudicabit mei eius dicta nihil fabulas commune imperdiet repudiare suas inani inceptos maluisset latine dolores iudicabit unum phasellus velit nonumy
    brute habitasse moderatius commodo sonet erroribus verear conclusionemque verterem reque iisque placerat invenire ut vero oratio eruditi fugit libero adipisci meliore est justo vulputate solum non scelerisque elit turpis sodales pertinacia pretium
    habitasse arcu quaerendum civibus brute feugait ipsum dignissim tritani dissentiunt ignota tincidunt himenaeos porro instructior gloriatur consectetur salutatus per inciderint nisl dolorem alterum vivamus persecuti suspendisse eruditi sociosqu mi
    prompta efficiantur tamquam eruditi aliquet morbi molestiae omnesque ridiculus mea pertinacia turpis mi adolescens necessitatibus quis omittam aliquip nostra ex inani unum repudiandae placerat doctus eleifend maiorum nascetur utroque ultricies ignota
    verterem sed liber duis rhoncus cubilia mus audire percipit sodales maiestatis dictum magna persius splendide suas unum audire ponderum suscipit comprehensam donec scripta similique dolorum dolore adipiscing bibendum oratio nunc utinam nihil expetenda
    iriure aperiri id falli litora velit malesuada aliquet maiorum facilisi accommodare mazim praesent maximus ea eu vituperata duis nonumy sapientem donec gravida qualisque dolores sumo altera dui graeci

  </div>

  <script>
    const navIcon = document.querySelector('#menuIcon');



    const navSide = document.querySelector('.nav-bar-side');



    navIcon.addEventListener('click', toGGle);



    function toGGle() {

      navSide.classList.toggle('show');



      navIcon.classList.toggle('rotate');



    }
  </script>

</body>

</html>

Baiscs first!!, move the content inside of the body and set top to the content. You can change that based on the screen resolution. Change the bg for the side nav as well

  <!DOCTYPE html>
    <html>
    
    <head>
    
      <meta charset="UTF-8">
    
      <meta name="viewport" content="width=device-width, initial-scale=1">
    
    
    
      <title>AlmaTech</title>
    
    
    
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer"
      />
    
      <link rel="stylesheet" href="all.min.css">
    
      <style>
        @import url('https://fonts.googleapis.com/css2?family=Cute+Font&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Signika+Negative&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Satisfy&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Caveat:wght@700&family=Cute+Font&display=swap');
        * {
          font-family: 'Signika Negative', sans-serif;
          margin: 0;
          padding: 0;
          box-sizing: border-box;
          border-radius: 5px;
        }
        
        .brand {
          font-family: 'Caveat', cursive;
          font-family: 'Cute Font', sans-serif;
        }
        
        .nav-bar-container {
          display: flex;
          justify-content: space-between;
          width: 100%;
          align-items: center;
          padding: 10px 40px;
          box-shadow: 5px 3px 10px rgb(0 0 0 / 0.2);
          background: #e7e7e7aa;
          position: fixed;
        }
        
        .nav-bar-middle {
          display: flex;
          gap: 30px;
        }
        
        .nav-bar-middle li {
          list-style: none;
          font-size: 20px;
        }
        
        .nav-bar-middle-items {
          display: flex;
          gap: 30px;
        }
        
        .content {
          position: absolute;
          top:60px;
        }
        
        
        .nav-bar-side {
          position: sticky;
          transition: all 0.5s ease-in-out;
          background: #e7e7e7aa;
          display: flex;
          align-items: space-between;
          justify-content: flex-start;
          width: 150px;
          display: none;
          /* border-top-radius:0;
    
           border-right-radius:0;
    
           border-left-radius:0;
    
           border-bottom-radius:0; */
          /* border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;*/
          border-radius: 0 0 10px 0;
          box-shadow: 5px 3px 10px rgb(0 0 0 / 0.2);
          padding-right: 20px;
          padding-bottom: 20px;
          padding-left: 20px;
          flex-direction: column;
          margin-top: 0;
        }
        
        .nav-bar-side ul li {
          padding-top: 20px;
        }
        
        .nav-bar-side ul li {
          list-style: none;
        }
        
        #menuIcon {
          display: none;
        }
        
        .show {
          display: block;
          position: sticky;
          background: #e7e7e7ad;
          display: flex;
          align-items: space-between;
          justify-content: flex-start;
          width: 150px;
        }
        
        .rotate {
          transform: rotate(-90deg)
        }
        
        @media(max-width:900px) {
          #menuIcon {
            display: none;
          }
          #accountIcon {
            display: none;
          }
        }
        
        @media(max-width:800px) {
          #menuIcon {
            display: block;
          }
          .nav-bar-middle {
            display: none;
          }
        }
      </style>
    
    </head>
    
    <body>
    
    
    
      <div class="body">
    
        <div class="nav-bar-container">
    
          <div class="nav-bar-logo">
    
            <h1 class="brand">AlmaTech</h1>
    
          </div>
    
    
    
          <div class="nav-bar-middle">
    
            <ul class="nav-bar-middle-items">
    
              <li>Home</li>
    
              <li>About Us</li>
    
              <li>Contact Us</li>
    
              <li>Our Services</li>
    
              <li>Achievements</li>
    
            </ul>
    
          </div>
    
    
    
          <div class="nav-bar-right">
    
            <i class="fa-solid fa-bars" id="menuIcon"></i>
    
            <i class="fa-solid fa-user" id="accountIcon"></i>
    
          </div>
    
        </div>
    
    
    
    
    
        <div class="nav-bar-side">
    
          <ul class="nav-bar-side-items">
    
            <li>Home</li>
    
            <li>About Us</li>
    
            <li>Contact Us</li>
    
            <li>Our Services</li>
    
            <li>Achievements</li>
    
          </ul>
    
        </div>
          <div class="content">
    
        brute noster aliquam adversarium utamur arcu voluptatum nobis antiopam pretium te putent dicat deterruisset voluptatibus sententiae definiebas iriure platonem tellus ancillae laudem orci nisl nonumes sanctus ad adipiscing tractatos dolore voluptatum tristique
        porro neque tale rutrum efficiantur definiebas luptatum equidem habemus nostrum hinc antiopam eleifend amet nullam torquent utroque petentium antiopam sociis curabitur interdum error ludus adipiscing prompta electram natum equidem tibique molestiae
        meliore vivamus adipiscing ligula arcu habemus nunc epicuri nulla constituam nascetur ea integer invenire cum sanctus fabulas option dictas nisl dissentiunt consectetur accusata et utinam ceteros similique dicam dico faucibus sapientem ceteros porro
        fabulas graece nibh mi donec montes possim eripuit arcu inceptos omittam feugait vix cum suspendisse lectus himenaeos morbi pro sodales per adipisci interpretaris inciderint iisque habitant mucius leo habitant senectus petentium omnesque mus dictas
        persius magna porta dicam condimentum consectetuer mucius vel epicurei detraxit ocurreret expetenda usu porttitor id hac magnis eloquentiam oratio neglegentur fermentum platea affert repudiandae patrioque mauris sapien ocurreret senectus iuvaret mediocritatem
        intellegat tempus aliquam quam fringilla deterruisset intellegebat fabulas hinc efficitur parturient animal menandri simul sententiae solum orci dolores hinc verear eirmod electram causae ancillae mediocritatem orci vivendo utroque voluptatum platonem
        elaboraret quod iudicabit volutpat sententiae ornatus suspendisse eloquentiam felis vituperatoribus vulputate sanctus mi legimus vitae interpretaris imperdiet dui decore maecenas interpretaris iriure viderer expetendis honestatis venenatis senectus
        reque dictum consetetur pertinacia doctus in eruditi falli graecis contentiones option nostra no persequeris indoctum consetetur appetere quas eget accumsan nisi sanctus fugit vituperata fabellas pericula maximus pellentesque intellegebat tincidunt
        libero mus ancillae his assueverit ludus conclusionemque eum vero melius commodo adversarium error volumus molestiae detraxit viderer tibique suavitate montes rutrum prodesset nostra wisi consectetuer sociosqu vivendo iisque ex utamur quisque feugiat
        definiebas suscipiantur volumus est cetero nulla tractatos dissentiunt montes deserunt graece detracto minim legere quaestio ancillae fabellas efficitur ex venenatis ligula altera maluisset laoreet discere adversarium agam lacus dolorem ornare pro
        platonem quaeque cubilia nisi varius fabulas vidisse pharetra cetero sit doming usu aliquid ullamcorper aliquet dapibus mucius nam sodales mei habitasse dis decore audire malesuada quis ultricies senectus ligula non no intellegebat dicunt dis vidisse
        interdum molestie orci mediocrem vehicula qui idque dolor veniam unum leo penatibus eum ac ceteros montes accumsan netus augue tantas voluptaria eum faucibus simul faucibus referrentur dis suas efficiantur aeque velit class voluptatibus est interdum
        netus dolore salutatus torquent constituam iisque blandit tibique curae cum repudiandae dolor eos appetere mei lacus sodales vis aeque consetetur liber fringilla cras faucibus causae dictumst vix mediocrem vidisse periculis eu scelerisque petentium
        nam eam neque sea facilisi no sem ius leo verterem cetero conceptam interesset definitionem conubia sem aliquip elementum noluisse veri mus aliquam dolore hendrerit malorum regione amet civibus enim fusce te vel porttitor liber tibique iisque omittam
        constituto ignota vivamus omittantur interesset dicit platonem praesent voluptatibus suscipiantur principes natum alterum porro singulis in quaestio velit doming placerat tempor imperdiet sumo netus lacus perpetua aenean doctus quem nam electram elementum
        quis consequat vivendo voluptaria singulis molestiae meliore fabulas erroribus quaeque libris conubia sumo legere veri lacinia oratio hac facilisi liber saperet feugait labores ubique neque pellentesque prompta corrumpit numquam civibus neque est
        facilisi ornare perpetua saepe honestatis possim vituperatoribus mnesarchum sadipscing cum eam dicant mediocrem persequeris ridiculus nulla fabellas vestibulum eius mi iusto veritus causae scripta aptent tempus nisi eruditi tractatos dolor platonem
        pericula audire doming sit qui egestas nascetur corrumpit pro malesuada ac ipsum an no integer veri singulis dis elitr natum placerat nascetur interesset efficitur noluisse sapientem his fabulas falli ponderum reque dapibus dictumst adolescens imperdiet
        fusce libris menandri suscipiantur proin senectus electram cu mi vivamus ultrices odio affert interdum non ancillae periculis possim varius sociis cubilia legimus latine consectetur ea moderatius ponderum an tellus nam magnis magnis ac in mutat consectetur
        habemus adipisci periculis nullam praesent platea epicurei neque quem blandit ac sollicitudin magnis aenean magnis definitiones eruditi legimus potenti vel senectus lacus sociosqu meliore ex himenaeos atomorum ancillae no senserit malesuada libero
        delicata congue luptatum pro nisl mnesarchum ceteros persius mnesarchum debet eu interpretaris vero atomorum salutatus duis elit ullamcorper agam fabulas deserunt commodo nihil mazim expetenda deseruisse in noster eruditi gravida dicam eleifend nonumes
        petentium nominavi luctus eirmod prompta offendit consul viris facilisi offendit platea dicunt perpetua voluptaria ad suscipit dico ceteros ferri litora solet scripserit dictas veniam nihil class cetero reprehendunt tortor interesset sapien viverra
        aeque gloriatur fusce idque porta volumus feugait comprehensam lorem esse petentium magnis fames iudicabit mei eius dicta nihil fabulas commune imperdiet repudiare suas inani inceptos maluisset latine dolores iudicabit unum phasellus velit nonumy
        brute habitasse moderatius commodo sonet erroribus verear conclusionemque verterem reque iisque placerat invenire ut vero oratio eruditi fugit libero adipisci meliore est justo vulputate solum non scelerisque elit turpis sodales pertinacia pretium
        habitasse arcu quaerendum civibus brute feugait ipsum dignissim tritani dissentiunt ignota tincidunt himenaeos porro instructior gloriatur consectetur salutatus per inciderint nisl dolorem alterum vivamus persecuti suspendisse eruditi sociosqu mi
        prompta efficiantur tamquam eruditi aliquet morbi molestiae omnesque ridiculus mea pertinacia turpis mi adolescens necessitatibus quis omittam aliquip nostra ex inani unum repudiandae placerat doctus eleifend maiorum nascetur utroque ultricies ignota
        verterem sed liber duis rhoncus cubilia mus audire percipit sodales maiestatis dictum magna persius splendide suas unum audire ponderum suscipit comprehensam donec scripta similique dolorum dolore adipiscing bibendum oratio nunc utinam nihil expetenda
        iriure aperiri id falli litora velit malesuada aliquet maiorum facilisi accommodare mazim praesent maximus ea eu vituperata duis nonumy sapientem donec gravida qualisque dolores sumo altera dui graeci
    
      </div>
    
      </div>
    
    
    
    
    
      <script>
        const navIcon = document.querySelector('#menuIcon');
    
    
    
        const navSide = document.querySelector('.nav-bar-side');
    
    
    
        navIcon.addEventListener('click', toGGle);
    
    
    
        function toGGle() {
    
          navSide.classList.toggle('show');
    
    
    
          navIcon.classList.toggle('rotate');
    
    
    
        }
      </script>
    
    </body>
    
    </html>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Css navigation bar, Where am I getting it wrong?

Answers