Start fixed navigation bar on second page

user_14405203 0
Viewed 52

I have this navigation bar that works really well. It is fixed so it follows you as you scroll through the website. However, I would like for the navbar to only start in the second section (#home) and for it to not be visible in the first section (#section0).

Could I please have some help?

#section0 {
  width: 100%;
  height: 100vh;
  background-color: blue;
}

#home {
  width: 100%;
  height: 100vh;
  background-color: white;
  display: block;
  margin: 0 auto;
}

#home ul {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  z-index: 9999;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: black;
  position: -webkit-fixed;
  /* Safari */
  position: fixed;
  top: 0;
}

#home ul li.left-menu {
  display: flex;
  justify-content: flex-end;
}

#home ul li.right-menu {
  display: flex;
  justify-content: flex-start;
}

#home li a {
  display: block;
  color: white;
  text-align: center;
  padding: 13px 20px;
  text-decoration: none;
  font-family: Futura;
  font-size: 8px;
}

#home li a:hover {
  color: #00CFFF;
}

#home .active {
  color: #00CFFF;
}

#secondpage {
  height: 100vh;
  width: 100%;
  background-color: orange;
}
<section id="section0">
</section>

<section id="home">
  <ul>
    <li class="left-menu">
      <a class="active" href="#home">HOME</a>
      <a href="#how-works">HOW IT WORKS</a>
      <a href="#why-us">WHY CHOOSE US</a>
    </li>
    </li>
    <li class="right-menu">
      <a href="#services">SERVICES</a>
      <a href="#gallery">OUR GALLERY</a>
      <a href="#contact">CONTACT US</a>
    </li>
</section>

<section id="secondpage">
</section>

css html
1 Answers

Just set a higher z-index for the first section.

body {
  margin: 0;
  padding: 0;
}

#section0 {
  width: 100%;
  height: 100vh;
  background-color: blue;
  z-index: 99999;
  position: relative;
}

#home {
  width: 100%;
  height: 100vh;
  background-color: white;
  display: block;
  margin: 0 auto;
}

#home ul {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  z-index: 9999;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: black;
  position: -webkit-fixed;
  /* Safari */
  position: fixed;
  top: 0;
}

#home ul li.left-menu {
  display: flex;
  justify-content: flex-end;
}

#home ul li.right-menu {
  display: flex;
  justify-content: flex-start;
}

#home li a {
  display: block;
  color: white;
  text-align: center;
  padding: 13px 20px;
  text-decoration: none;
  font-family: Futura;
  font-size: 8px;
}

#home li a:hover {
  color: #00CFFF;
}

#home .active {
  color: #00CFFF;
}

#secondpage {
  height: 100vh;
  width: 100%;
  background-color: orange;
}
<section id="section0">
</section>

<section id="home">
  <ul>
    <li class="left-menu">
      <a class="active" href="#home">HOME</a>
      <a href="#how-works">HOW IT WORKS</a>
      <a href="#why-us">WHY CHOOSE US</a>
    </li>
    </li>
    <li class="right-menu">
      <a href="#services">SERVICES</a>
      <a href="#gallery">OUR GALLERY</a>
      <a href="#contact">CONTACT US</a>
    </li>
</section>

<section id="secondpage">
</section>

Note:

  1. I have added position: relative to first section (.section0) for z-index to work.
  2. I have remove margin and padding from <body> only to make this snippet clean.



Edit: As you said, the previous example makes the navigation bar slide out from under the first section, you can try this example using position: sticky.

I'll explain what I did here.

  1. I took the navigation bar (<ul>) out of home section.
  2. I have wrapped the element <ul>, home and secondpage in an element and gave it a class called wrapper.
  3. The first section remains out of the wrapper.
  4. I have applied position: sticky; to navigation (<ul>) and added a top value at which the navigation should stay fixed.
  5. I have also added position: relative; to wrapper class for the sticky element to work.
  6. This means the navigation bar (<ul>) stays fixed inside the wrapper class.

Working Example:

body {
  margin: 0;
  padding: 0;
}

#section0 {
  width: 100%;
  height: 100vh;
  background-color: blue;
  position: relative;
}

#home {
  width: 100%;
  height: 100vh;
  background-color: white;
  display: block;
  margin: 0 auto;
}

ul {
  background: #fff;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  z-index: 9999;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: black;
  position: -webkit-fixed;
  /* Safari */
  /*position: fixed;*/
  position: sticky;
  top: 0;
}

ul li.left-menu {
  display: flex;
  justify-content: flex-end;
}

ul li.right-menu {
  display: flex;
  justify-content: flex-start;
}

ul li a {
  display: block;
  color: white;
  text-align: center;
  padding: 13px 20px;
  text-decoration: none;
  font-family: Futura;
  font-size: 8px;
}

li a:hover {
  color: #00CFFF;
}

.active {
  color: #00CFFF;
}

#secondpage {
  height: 100vh;
  width: 100%;
  background-color: orange;
}


.wrapper {
position: relative;
}
<section id="section0">
</section>


<div class="wrapper">

  <ul>
    <li class="left-menu">
      <a class="active" href="#home">HOME</a>
      <a href="#how-works">HOW IT WORKS</a>
      <a href="#why-us">WHY CHOOSE US</a>
    </li>
    <li class="right-menu">
      <a href="#services">SERVICES</a>
      <a href="#gallery">OUR GALLERY</a>
      <a href="#contact">CONTACT US</a>
    </li>
  </ul>

  <section id="home">
  </section>

  <section id="secondpage">
  </section>

</div>

user_127309380
Related