want position to be fixed, but changes the layout-CodePudding

i am currently making a header for a website, and i want my header to stay at the top. have my layout and i tried using position fixed, but all of the items would move to the left. is there a better way, or a solution to solve this? i have my website working for a mobile device. i used display flex to make a burger icon, and is this an issue that is disturbing this?

layoutbroken layout

  <body>
    <div >
      <!---navigation--->
      <nav >
        <!---containger for the logo--->
        <div >
          <!---logo--->
          <a href="#home" ><img  src="img/logo.jpg" alt="logo"></a>
        </div>
        <!---links to other pages--->
        <ul >
          <li><a href="#aboutus">About us</a></li>
          <li><a href="#Products">Products</a></li>
          <li><a href="#b&s">Business and shop</a></li>
          <li><a href="#Recuritments">Recruitments</a></li>
          <li><a href="#faq">FAQ</a></li>
          <li><a href="#Contact">Contact</a></li>
        </ul>
        <div >
          <div ></div>
          <div ></div>
          <div ></div>
        </div>
      </nav>
      <script src="headerfooter/headerscript.js"></script>
    </div>

css




nav{
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 8vh;
  background-color: white;
  width: 88%;
  margin: auto;
}

.logo{
  height:70px;
}

.navlinks{
  display: flex;
  justify-content: space-around;
  width: 80%;
  background-color: white;
  list-style: none;
}

.navlinks a{
  text-decoration: none;
  letter-spacing: 1px;
  font-size: 13px;
  font-weight: bold;
  text-transform: uppercase;
  display: inline-block !important;
  justify-content: space-around;
  white-space: nowrap;
}

.burger{
  display: none;
  cursor: pointer;
}

.burger div{
  width: 25px;
  height: 3px;
  background-color: rgb(0,0,0);
  margin: 5px;
}

@media screen and (max-width:1000px){
  body{
    overflow-x: hidden;
  }
  .navlinks{
    position: absolute;
    right: 0px;
    height: 92vh;
    top:8vh;
    background-color: pink;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    transform: translateX(100%);
    transition: transform 0.5 ease-in;
  }
  .navlinks li{
    opacity: 0;
  }
  .burger{
    display: block;
  }
}

.nav-active{
  transform: translateX(0%);
}

@keyframes navlinkFade {
  from{
    opacity: 0;
    transform: translateX(50px);
  }
  to{
    opacity: 1;
    transform: translateX(0px);
  }
}

CodePudding user response：

Your nav tag has a width set of 88%, making that 100% should solve the problem. Then you just have to style the elements within it to fit the screen and it should look better. If you can set up a JSfiddle with the issue, I can debug it better for you.

CodePudding user response：

As mentioned by @Rahul Mehta, you have set a width of 88% so you can switch that to 100%, as for the fixed navbar you can use:

.nav {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 999;
}

CodePudding user response：

I have prepared a possible solution to your problem. If I understood correctly, you want to fixing the header at the top of the page. To do this, I used the .topheader {position: sticky; top: 0;} setting, thus preserving the nav {width: 88%} setting.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.topheader {
    position: sticky;
    top: 0;
}

nav{
    display: flex;
    justify-content: space-around;
    align-items: center;
    min-height: 8vh;
    background-color: white;
    width: 88%;
    margin: auto;
  }
  
  .logo{
    height:70px;
  }
  
  .navlinks{
    display: flex;
    justify-content: space-around;
    width: 80%;
    background-color: white;
    list-style: none;
  }
  
  .navlinks a{
    text-decoration: none;
    letter-spacing: 1px;
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
    display: inline-block !important;
    justify-content: space-around;
    white-space: nowrap;
  }
  
  .burger{
    display: none;
    cursor: pointer;
  }
  
  .burger div{
    width: 25px;
    height: 3px;
    background-color: rgb(0,0,0);
    margin: 5px;
  }

  .content1 {
      height: 100vh;
      width: 88%;
      background-image: url("https://images.unsplash.com/photo-1631784460794-d4e763069ee3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1371&q=80");
      background-position: center;
      background-repeat: no-repeat;
      margin: 0 auto;
  }
  .content2 {
      height: 100vh;
      width: 88%;
      background-image: url("https://images.unsplash.com/photo-1502741224143-90386d7f8c82?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1169&q=80");
      background-position: center;
      background-repeat: no-repeat;
      margin: 0 auto;
  }
  
  @media screen and (max-width:1000px){
    body{
      overflow-x: hidden;
    }
    .navlinks{
      position: absolute;
      right: 0px;
      height: 92vh;
      top:8vh;
      background-color: pink;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      transform: translateX(100%);
      transition: transform 0.5 ease-in;
    }
    .navlinks li{
      opacity: 0;
    }
    .burger{
      display: block;
    }
  }
  
  .nav-active{
    transform: translateX(0%);
  }
  
  @keyframes navlinkFade {
    from{
      opacity: 0;
      transform: translateX(50px);
    }
    to{
      opacity: 1;
      transform: translateX(0px);
    }
  }

<!DOCTYPE html>
<html lang="en">
  <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" />
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
  </head>
  <body>
    <div >
      <!---navigation--->
      <nav >
        <!---containger for the logo--->
        <div >
          <!---logo--->
          <a href="#home" 
            ><img  src="img/logo.jpg" alt="logo"
          /></a>
        </div>
        <!---links to other pages--->
        <ul >
          <li><a href="#aboutus">About us</a></li>
          <li><a href="#Products">Products</a></li>
          <li><a href="#b&s">Business and shop</a></li>
          <li><a href="#Recuritments">Recruitments</a></li>
          <li><a href="#faq">FAQ</a></li>
          <li><a href="#Contact">Contact</a></li>
        </ul>
        <div >
          <div ></div>
          <div ></div>
          <div ></div>
        </div>
      </nav>
      <script src="headerfooter/headerscript.js"></script>
    </div>

    <div ></div>
    <div ></div>
  </body>
</html>