How to make my navbar sticky when i'm using div?-CodePudding

i'm using div, not navbar tags and it kinda confuse me. in last project i'm using the nav tags when making the navbar and using the sticky tag, and it works, but on this project my mentor want me to use div tag. i'm using the usual sticky tags, but doesn't really works. i don't understand div really well so please can someone help me out? please be kind when answering i appreciate your help for helping a newbie like me. *i'm sorry if this confusing i don't understand how to make a proper question.

* {
  margin: 0;
  padding: 0;
}

.wrapper {
  width: 1170px;
  margin: auto;
}

header {
  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
    url("Background.jpg");
  height: 100vh;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: center center;
  position: relative;
}

.nav-area {
  float: right;
  list-style: none;
  margin-top: 30px;
}

.nav-area li {
  display: inline-block;
}

.nav-area li a {
  color: #fff;
  text-decoration: none;
  padding: 5px 20px;
  font-family: "Poppins";
  font-size: 16px;
}

.nav-area li a:hover {
  background: #fff;
  color: #333;
}

.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.logo img {
  width: 150px;
  float: left;
  height: auto;
}

.welcome-text {
  position: absolute;
  width: 800px;
  height: 300px;
  margin: 20% 15%;
  text-align: center;
}

.welcome-text h1 {
  text-align: center;
  color: #fff;
  text-transform: uppercase;
}

/*SECTION*/

#section1 {
  height: 100vh;
  background: black;
}

.section1 p {
  color: #fff;
  font-family: "Poppins";
  text-align: center;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="portfolio.css" />
  <title>Shira</title>
  <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:wght@300&display=swap" rel="stylesheet" />
</head>

<body>
  <header>
    <div  id="home">
      <div >
        <img src="2.png" />
        <ul  >
          <li><a href="#home">home</a></li>
          <li><a href="#section1">About</a></li>
          <li><a href="#">home</a></li>
          <li><a href="#">home</a></li>
          <li><a href="#">home</a></li>
        </ul>
      </div>
      <div >
        <h1>hi hshjhak</h1>
      </div>
    </div>
  </header>

  <div >
    <section id="section1">
      <p>AAAAAAA</p>
    </section>
  </div>
</body>

</html>

CodePudding user response：

It's the same you were applying sticky property to a navbar. The tag doesn't matter

CodePudding user response：

Looking for this?

You must to add the class sticky to the "logo" div (or a common container), because you need both the logo and the navigation to be sticky.

NOTE: do not use 2 "class" attributes on a single element, like this: <ul >, do this: <ul >

* {
  margin: 0;
  padding: 0;
}

.wrapper {
  width: 1170px;
  margin: auto;
}

header {
  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("Background.jpg");
  height: 100vh;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: center center;
}

.nav-area {
  float: right;
  list-style: none;
}

.nav-area li {
  display: inline-block;
}

.nav-area li a {
  color: #fff;
  text-decoration: none;
  padding: 5px 20px;
  font-family: 'Poppins';
  font-size: 16px;
}

.nav-area li a:hover {
  background: #fff;
  color: #333;
}

.sticky {
  position: sticky;
  top: 0;
  width: 100%;
}

.logo {
  padding-top: 30px;
}

.logo img {
  width: 150px;
  float: left;
  height: auto;
}

.welcome-text {
  position: absolute;
  width: 800px;
  height: 300px;
  margin: 20% 15%;
  text-align: center;
}

.welcome-text h1 {
  text-align: center;
  color: #fff;
  text-transform: uppercase;
}


/*SECTION*/

#section1 {
  height: 100vh;
  background: black;
}

.section1 p {
  color: #fff;
  font-family: 'Poppins';
  text-align: center;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="portfolio.css">
  <title>Shira</title>
  <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:wght@300&display=swap" rel="stylesheet">
</head>

<body>
  <header>
    <div >
        <img src="2.png">
        <ul >
          <li><a href="#home">home</a></li>
          <li><a href="#section1">About</a></li>
          <li><a href="#">home</a></li>
          <li><a href="#">home</a></li>
          <li><a href="#">home</a></li>
        </ul>
      </div>
    <div  id="home">
      <div >
        <h1>hi hshjhak</h1>
  </header>
  </div>
  <div >
    <section id="section1">
      <p>AAAAAAA</p>
  </div>
  </section>
  </div>
</body>

</html>