CODEWITHSUNDEEP
htmlcssangular
user13491010
user13491010

Reputation:

How to do so that the nav is in a fixed position and that the scroll is like in the link

I try to have the same header as on the link page, I tried something but I can't get the same thing the nav bar goes behind the background image and the effect of the scroll what to do ?

Angular 10 version.

link : https://fr.wix.com/website-template/view/html/1995?siteId=5202b3eb-077d-474c-90d3-edf1650f510c&metaSiteId=2740ba1a-5bff-4a4c-aa9a-8bab8c80ef06&originUrl=https%3A%2F%2Ffr.wix.com%2Fwebsite%2Ftemplates%2Fhtml%2Fonline-store

html, body {
  margin: 0;
  padding: 0;
  background-color: #d3d3d3;
}

.header-content {
  background-image: url('/assets/img/livre.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 800px;
  width: 90%;
  margin: auto;
  top: 90px;
  position: relative;
}

.top-nav {
  display: flex;
  justify-content: space-between;
  width: 90%;
  margin: auto 80px;
  position: fixed;
}

.top-nav-search {
  padding-top: 35px;
}
<div class="nav-content">
  <div class="top-nav">
    <h1>E-Book Store</h1>
    <div class="top-nav-search">
      <input type="text" placeholder="Search.." name="search">
      <button type="submit">
        <i class="fa fa-search"></i>
      </button>
    </div>
  </div>
  <div class="header-content"></div>
</div>

Upvotes: 1

Views: 55

Answers (1)

Jonathan Lopez
Jonathan Lopez

Reputation: 186

You could set a z-index: 100 (or something to have the highest value of z-index in your code but less that modals or this kind of elemtens) css property to the nav

Upvotes: 1

Related Questions