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

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

#1

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


#2

You need to use position: fixed;


#3

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


#4

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.


#5

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


#6

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)


#8

Position top is not a thing.

Top is .


#9

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.


#10

Thank you all so much!!! :hugs:


#11

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.


#12

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


#13

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>

#14

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