Nav-bar and video

HTML-CSS
1

https://codepen.io/ibdavid10/pen/jOyVWZx?editors=1100

hey guys, i’m doing the free code camp product landing page and i’m having trouble with my nav-bar and the imported video.

about the nav bar i can’t link him to a specific location in the page. it’s telling me that i need to have an href attribute but where do i write it and do i need to add the to it?

about the video i simply can’t center it, i tried positions, displays, align-item,justify content, width and height, padding and margin but all seems to go wrong when i’m checking for responsiveness.

thanks to anyone that will help.
2

Hi mate, about your #nav-bar:

just nest an link tag inside your <li> elements and give each of them an href, like this:

<nav id="nav-bar">
    <ul>
      <li><a class="nav-link" href= "#squad">Squad</a></li>
      <li><a class="nav-link" href= "#calender">Calender</a></li>
      <li><a class="nav-link" href= "#products">Products</a></li>
    </ul>
  </nav>

Beside that, padding: 200px; in your CSS #nav-bar selector, makes your links clickable areas overlap each other so you need to adjust it
To see what I mean, give your CSS #nav-bar selector something like a background-color: white;

After you adjust your links’ padding, if you still want your links to display one next to the other, you need to add a new CSS selector for your <ul> element, and give that a display: flex; too, something like this:

#nav-bar {
  display: flex;
}

ul {
  display: flex;
}

.nav-link {
  background-color: white; /* this is for debug*/
  text-decoration:underline;
  text-align:center;
  display:inline;
  padding:20px;
}

Hope that helps :blush:

3

thanks for your help but i still have one more question.
i want my nav-bar to be at the center of the page, i did what you wrote and it is still located at the left side of the page. do you any idea what will hepl?

p.s. also do you know to responsively center the video?

4

Hi,

get rid of display: float in your CSS #header-img selector. Also you don’t need to apply a position: fixed to your #nav-bar.

Then, to center your <ul> element inside its container (which is the nav-bar) just add justify-content: center; to your #nav-bar CSS selector.

Last, remember that <ul> elements always keep their default padding on the left, even if you got rid of the bullet-points.

To fix that, you need to specify a padding-left: 0; on your ul CSS selector.

Happy coding!

5

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