Project landing page navbar css help

I dont know how to make the navbar the top of the viewport, I also want to make the words in the navbar (about/inspiration etc) span out so that they are side by side but I don’t know how to do it. Please help

My code so far:

Your browser information:

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

Challenge: Build a Product Landing Page

Link to the challenge:

Tell us what’s happening:
how do i make the nav on top of the viewport? Also I want to make the about/inspiration etc text on the nav bar to be side by side and go on the right but I have no idea how to do that. Please help me

Your code so far

Your browser information:

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

Challenge: Build a Product Landing Page

Link to the challenge:

Hi @lilpoopstain360,
looking at your project a bit there are some errors:

  1. In your CSS panel, in your header rule you have forgotten the ; at the end of width: 100%
  2. In your HTML panel, replace the id of the article element "about/inspiration" with this "about-inspiration".

Now, for the problems you have:

  1. When you deal with a header fixed remember to set a margin-top to the element under the header (in this case article) to avoid overlapping.
  2. In your header rule put the property top: 0; and others properties like justify-content and align-items, useful when you face flexbox.
  3. To have the elements of the list side by side, put in your li rule display: inline-block;.

I hope I was helpful. :wave:

1 Like

There are a lot of ways to do it.
But the best way includes having a semantically structured HTML doc.

Take this example:

<nav>
 <ul>
   <li> hello </li>
   <li> world </li>
</ul>
</nav>

<!-- all your other codes -->
 
<style>
/* to keep the nav at the top fixed, even when user scrolls down */
nav{
position: fixed;
top:0;
}
</style>
  • Keep the nav within itself and not within a header for a more semantically structured doc. Although nesting it within the header tag is not a problem at all.
  • Keep the nav tag at the top of the body and it’ll automatically stay on top of other doc contents
  • if you are aiming to achieve a fixed position for the nav so that it stays on top even when a user scrolls.

Tl;Dr: Nav in itself is a semantic tag, so it makes sense why you may wanna use it independently. without nesting it within header :wink:

1 Like

thank you so much for the help but now that I aligned the texts in the body the logo has moved to the center too and I dont want that. How do I fix this?

Visualize this

<header>
<img id='logo' src='' />
 <nav>...</nav>
</header>

the header has 2 elements nested inside it, the image elem and the nav elem.

if you flex the header, the elements inside them will be aligned in a row.

if you would want the logo and the nav to be separate and not in the center
you can try:

<style>
header{
display:flex;
justify-content:space-around;
alighn-items:center;

}
/* align items to center them vertically*/
/* justify-content: space-around to have spaces around the img and nav and the border*/
</style>

additionally you can also play around w/ the width of the img tag and the nav tag for more visual design…

1 Like

Hi @lilpoopstain360,

Do you remember what I said in point 2 of the solution?

  1. These properties go into the header rules:
display: flex;
justify-content: space-around;
  1. Remove this piece of code:
#nav-bar, .nav-link {
  display: flex;
  justify-content: space-around;
  float: right;
}

You’ve already set the flexbox in the header.
After these changes you’ll get what you want as in the image.

Don’t forget to add a margin-right in the ul, li rules to separate the items.

:wave:

1 Like

Thank you so much it worked! Also I’m sorry I keep asking so many questions but how do i make it so that each pricing is spread out horizontally and each have their own column instead of being stacked on top of each other? I’ve tried display: flex; display: column; display:inline-block; and a bunch of others but nothing really worked

what I can think of is:

  • wrap the prices inside a container
  • flex the container
  • justify-content as space-around in the container while adding styles
  • for vertical alignment add align-items: center;

Don’t forget to give the container a width so the changes are more noticeable

Don’t worry,

  1. Wrap the three div with class='product' with another div with a class for example container-products.

  2. In .container-products you have to add display: flex with its properties.

  3. In .product remove these lines:

    align-items: center;
    justify-content: space-around;
    

    are already present in .container-products,
    and this:

    margin: 20px 450px;

    interfers with flex’s properties.

  4. To let the contents of each product breathe, replace
    padding-bottom: 20px; with padding: 20px;.

Note: If you have other questions, open a new topic, this is already closed. :wave:

1 Like

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