How to keep a Navbar at the top of my viewport?

I am currently doing my Product landing page project and I was wondering how to fulfill this user story

User Story #13: The navbar should always be at the top of the viewport.

Here is what I have done so far : https://codepen.io/bookworm0618/pen/wxojZQ?editors=1100

6 Likes

You need to use position: fixed;

4 Likes

Thanks! but now my navbar is squished to the left. What happened?

1 Like

You need to style the nav and give it position using top or right or what you want. A position on your nav disassociates it with the position of your header, which your Nav is the child of.

Try putting the position on your header and see what happens instead.

thanks but it is still doing the same thing :confused:

You’re getting closer.

Putting position on an element gives it layout, this triggers the browser to look for layout properties.

Add width, and padding to your header now (hint: on width use percentages)

4 Likes

Position top is not a thing.

Top is .

1 Like

Hi, @booklion
You gave position: top, @Tirjasdyn did not mean that.

You have to use position property with value as position: fixed and then make it to top: 0; left: 0; and apply a width: 100%;

You have given the header as position: fixed thats fine, now give it a top and left property as in the above hint and give it a 100% width, now you will be able to see your navbar on top.

For the ul tag there will be a default margin and padding, so you have to clear it out and adjust it according to your need.

Apply flex properties to header to make the elements in your navbar to align center.

6 Likes

Thank you all so much!!! :hugs:

1 Like

Hi @Sujith3021, please help me to review this personal portfolio test: https://codepen.io/Semiu/pen/mzYoNj

I have not been able to get a clue of why user stories 7 and 11 are not passed.

Thanks.

Hi @Semiu

I see that, you have cleared the test, but if your layout doesn’t look good, and if you pass the test, then it’s like only 50% you have cleared.

Your navbar should hold a structure as ul > li > a, then <ul> should be the parent of <li> elements, it is a list item, so it tends to stay within the <ul> or <ol>, so change your structure accordingly.

<ul> has a default left-padding and margin at top and bottom, you might want to clear it for some cases or have a knowledge of it.

To have a border for li elements, you might give the border property to the li, rather than the anchor elements, but do this after you alter the structure. After you change the structure of your navbar, you can see the border you have given to ul. Currently it overlaps the last anchor element, because of child mismatch

Thank you @Sujith3021 for the feedback.

I get your explanation. I am not just sure why it does not work for me. This is my code part.
Yet it could not pass this test: User Story #7: The navbar should contain at least one link that I can click on to navigate to different sections of the page. Thanks for the support.

<header id="header"> 
   <navbar>
    <ul id="navbar">
    <li><a href="#welcome-section" class="nav-link" rel="internal">Welcome Section</a></li> 
    <li><a href="#projects" class="nav-link" rel="internal">Projects</a></li> 
    <li><a href="#contact" class="nav-link" rel="internal">Contact</a></li>
    </ul>
    </navbar>
    </header>
   
<a id="welcome-section"></a>
<div id="welcome-section">
    <h1>This is the very personal personal portfolio</h1>
1 Like

Here is the problem, you have repeated Id’s, that is an issue. You should change that.

1 Like

Agree with you position fixed helps to fix element in one place

@Sujith3021 @Tirjasdyn thanks man position:Fixed worked. because it didn’t work for me before when i was using position absolute

Why is CSS so hard? and I have noticed you only learn the basics of CSS in the given challenges of CSS Basics, I also struggle and then get ideas and problems solved from other resources like https://www.w3schools.com/css/default.asp or https://internetingishard.com/. As I only get hints or solutions which do not resolve the issues here.

1 Like

well it worked for you @Sujith3021 but not for me buddy.

Perhaps you should watch youtube tutorials. I recommend you watch kevin powell videos , i learned a lot from his channel :upside_down_face:

1 Like