Fixed nav not working (landing page project)

Fixed nav not working (landing page project)
0
#1

This is how my nav should look but fixed

instead when I add fixed it turns into this…

My codepen > https://codepen.io/rubyNY/pen/GLyrbR
This is my code:

<body class="container">
<header id="header">
  <img id="header-img" src="https://png2.kisspng.com/sh/4e9515f7e68f163bbee410c2e5957878/L0KzQYm3VMIxN517j5H0aYP2gLBuTfNwbpdqfZ91b3fyPbTokQB2a5RuhtG2Y3zsgH7okwQub5CyjtdsdHB1PYbohMliaWdpT9VvNkS7PoOAUcMzQGU5Sac7NEK0RISBUcUyOWoziNDw/kisspng-coffee-logo-cappuccino-clip-art-go-vector-5ad9aa6d7cf648.2713284415242143815119.png" alt="coffee cup logo">
  <nav id="nav-bar">
    <a class="nav-link" href="#about">ABOUT US</a>
    <a class="nav-link" href="#gallery">GALLERY</a>
    <a class="nav-link" href="#contact">CONTACT</a>
  </nav>    
</header>     

<section class="main">
  <div>
    <img src="http://pluspng.com/img-png/waffle-breakfast-png-it-s-waffles-day-we-inspire-life-754.png">
  </div>
  <div class="form">
    <h1>Fresh Breakfast Served Daily</h1>
    <span>subscribe for weekly coupons</span>
    <form id="form" action="/">
      <input type="email" name="email" id="email" placeholder="enter your email" />
      <input id="submit" type="submit" value="Get Coupons" class="btn"></input>
    </form>
  </div>
</section>  

<section id="about">
  <div>
  <h1>TEST TEST TEST</h1>
  </div>  
</section>

<section id="gallery">
  <div>
  <h1>TEST TEST TEST</h1>
  </div>  
</section>

<section id="contact">
  <div>
  <h1>TEST TEST TEST</h1>
  </div>  
</section>

</body>

  




<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

CSS

body {
  margin: 0;
  padding: 0;
  background-color: white;
  color: black;
  font-family: sans-serif;
}

#header {
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#header-img {
  width: 100px;
  height: 110px;
}

#nav-bar a {
  margin: 0;
  padding: 1rem;
  text-decoration: none;
  color: inherit;
}

#nav-bar a:hover {
  color: #ff9c11;
}

.container {
  max-width: 1400px;
  margin: 0 auto !important;
  padding: 0 40px !important;
}

h1 {
  font-weight: 500;
  font-size: 3rem;
  margin-bottom: .5rem;
  margin-top: 4rem;
}

span {
  font-weight: 500;
  font-size: 1.4rem;
  margin-bottom: 2rem;
}

input {
  padding: .75rem 1.5rem;
  border-radius: .5rem;
}

.btn {
  color: white;
  background-color: #ff9c11;
  padding: .75rem 1.5rem;
  border-radius: .5rem;
  font-size: .9rem; 
}

.form {
  float: right; !important
}

.main img {
  width: 25rem; !important
  height: 25rem; !important
  float: left; !important
  margin-left: 10rem; !important
}

/* GLOBAL */
section {
 margin: auto;
 overflow: hidden;
 display: flex;
 justify-content: center; 
}






/* responsive */
@media (max-width: 1362px) {
  .main img {
    display: none;
  }
  
  .form {
    text-align: center;
    float: none;
  }
}
#2

You can try a couple things.

  1. Add a main class and add margin-top: 110px or another value to your liking.

  2. Since you are using position: fixed, you should add top: 0, left: 0; and right: 0 to tell the browser where you want the fixed header to be positioned.

#3

Thanks for the response.

If I use top, left, right : 0 my nav breaks the width and sent to opposite sides of the screen. If I alter them by giving left and right a value than when I resize the screen smaller it breaks as well.

#4

What about using justify-content: space-around; ?

Don’t forget to add the main class I mentioned.

#5

I am not sure where to add the new class you’re mentioning.

#6

Any where in the CSS section. I put it after the section selector.

#7

ok i see what you’re saying, but while that brings it close to the width I had before its still not exactly right.

should I just change: right: 200px; left: 200px;

#8

also, if I wanted now to get the nav background color to be 100% the width of the screen what could I do?

#9
  1. Don’t use a fixed size on the position properties.
#header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #dbdbdb;
}
  1. You have the semi-colon before !important (line 73 to 80) it should be after. You also don’t need any of the !important you are using. In fact, you will rarely need to use !important if your CSS is well written. It should mainly be used with utility classes and styles you know need to always overwrite other styles.

  2. You have an empty main element, not sure why?

#10
  1. Thanks that worked.

  2. Yep your write I forgot I wrote those and went on to different issues, removed them…

  3. Was doing the suggestion of Randell