Product Landing Page nav-bar question

HTML-CSS
1

Hello,

Am trying to keep the nav-bar position as fixed but its having an after effect of my first sections header going behind the nav-bar

/* file: index.html */
<!DOCTYPE html>
<html>
<head>
  <title>Xbox</title>
  <meta charset='utf-8'>
  <meta name='viewport' content='device-width initial-scale=1.0'/>
  <link rel='stylesheet' href='styles.css'/>

</head>
<body>
  <header id='header'> 
    <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Xbox_Logo.svg/1200px-Xbox_Logo.svg.png' width='60'
    id='header-img'
    class='logo'>
    <nav id='nav-bar'>
      <ul>
        <li ><a href='#Specs' class='nav-link'>Specs</a></li>
        <li><a href='#video' class='nav-link'>Games</a></li>
        <li><a href='#pricing' class='nav-link'>Pricing</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <section>
      <h2>Welcome to Our Storefront</h2>
      <form action='https://www.freecodecamp.com/email-submit' id='form'>
          <legend for='email'>Sign up for the latest info on our new console</legend>
          <input type='email' id='email' placeholder='please enter your email here' name='email'>
          <input type='submit' value='Get Started' id='submit'>
          </form>

   </section>
   
   <section id='Specs'>
     <h2>Xbox Series X Specifications</h2>
     <ul>
       <li>
         <h3>PROCESSOR</h3>
         <p>CPU. 8X Cores @ 3.8 GHz (3.66 GHz w/SMT) Custom Zen 2 CPU</p>

       </li>
       <li>
         <h3>MEMORY & STORAGE</h3>
         <p> Memory. 16GB GDDR6 w/320 bit-wide bus</p>
       </li>
       <li>
         <h3>VIDEO CAPABILITIES</h3>
         <p> Gaming Resolution. True 4K</li>
       </li>
       <li>
         <h3>SOUND CAPABILITIES</h3>
         <p>Dolby Digital 5.1 
            DTS 5.1</p>
          </li>
        <li>
          <h3>PORTS & CONNECTIVITY</h3>
          <p>HDMI. 1x HDMI 2.1 port

USB. 3x USB 3.1 Gen 1 ports

Wireless. 802.11ac dual band</p>
        </li>

     </ul>
     <iframe id='video' width="560" height="315" src="https://www.youtube.com/embed/NqPeeO-7yT4"></iframe>
   </section>
   <div id='pricing' class='container'>
     <section id='XSS' class='console'>
       <h2>Xbox Series S</h2>
       <p>299$</p>
     </section>
     <section id='XSX' class='console'>
       <h2>Xbox Series X</h2>
       <p>499$</p>
     </section>


   </div>

  </main>
  
</body>

/* file: styles.css */


header{
display: flex;
flex-direction: row;
justify-content: space-between;
position: fixed;
background: green;
width: 100%;



}

nav > ul{
display: flex;
margin-right: 5px;



}



ul{
list-style: none;

}



a{
text-decoration: none;
}
ul > li{
margin-right: 40px;
}

.container{
display: flex;
justify-content: space-evenly;
align-items: center;
}

.console{
background-color: #e6e600;
margin: auto;
text-align: center;
height: 150px;
width: 170px;
}

main{


@media -





  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

Challenge: Build a Product Landing Page

Link to the challenge:

2

You can make the header stretch completely from side to side and also touch the top of the page and then you won’t see the text underneath as you scroll. One way to do this would be to get rid of the default margins on the body which will make it touch the sides. And then you can make it touch the top by setting top: 0.

1 Like
3

An element with position: fixed is removed from the normal flow and positioned relative to the viewport. This means that your main element is now the one at the top of the flow, which overlaps with the fixed position of the header. To solve this, you can simply add top padding to your main element.

Alternatively, you can also use position:sticky. position:sticky automatically switches between relative and fixed based on your scroll position. Since relative keeps the element in the normal flow, this means that header will stay in the normal flow of document (above main element) when you have not reached the scroll threshold.

If using position:sticky, remember to also specify a threshold in your css (any one or more of top, right, bottom, left) to indicate at which position, the switch between fixed and relative should happen.

4

Thanks for the detailed explanation !
I got it now :3

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.