Question: Anchor Link not jumping to the top: Product landing page for my fake company

HTML-CSS
#1

My question is in the latest post.

Hi, there!
I finally got the time (and determination!) to create a product landing page , made from scratch with creative commons licensed images.
I had only one one media query - one is already overwhelming right now :tired_face:

When I click “New!” on the navigation link on the top, it jumps to the middle of the New section, instead of the top. I cannot figure out why.

I passed the test with 16/16, but I know there are tons of areas to correct and improve. Feedback is appreciated. Thank you.

full page view

1 Like
#2

I am noob and the only improvement I could find is change the z-index of the first video so the video wont hide the navbar when you scroll the page down. However, you did a great job, 100 times better than mine :smiley: Congratulation!

2 Likes
#3

I am a noob but I think this honestly looks great! One thing I would change is changing the background color of some sections, especially the header, as it looks a bit cluttered and confusing with it all being white. Also, some elements are kind of “pushed” to the left of the screen, making them hard to see and seem a bit unorganized. This could be fixed just by simply setting the margin to “auto” after setting the width, but I’d recommend looking some things up on Google or Stack Overflow for things you think you can improve or are stuck on, there’s no shame to it. There’s also the fact that the navigation links change color when visited, but since these are only for navigation, I think that seems a bit off. This is just from one beginner to another, but I do think you’re doing a great job! Also, I love the idea of this factory tour company, I think it’s a clever idea!

1 Like
#4

@thaihoangson08 and @Bullfrog,
Thank you very much for your feedback!
I have

  • added z-index
  • changed the header & footer color
  • added margin to the left
  • removed a:hover/a:visited colors

Yes, I enjoyed creating this fake company which offers factory tours for Tesla, SpaceX, weed, and tequila :grin:

1 Like
#6

After posting in the Project Feedback section and got reviews, then I just realized when I click the links on the Navigation link “New” and “Our Tours” on my my landing page it jumps to/jumps up to the middle of the section - though I have the ID at the beginning of each section.

 <nav id="nav-bar"> 
  <ul>
  <li><a class="nav-link" href="#new">NEW!</a></li>
  <li><a class="nav-link" href="#tours">OUR TOURS</a></li>
  <li><a class="nav-link" href="#accommo">ACCOMMODATIONS</a></li>
  <li><a class="nav-link" href="#covid">COVID-19</a></li>
  <li><a class="nav-link" href="#contact">CONTACT US</a></li>
  </ul>   

<section id="new">
<h2>NEW TOURS. Book now!</h2>   
<div class="newtours"> ....

Does anyone know why and how to fix it so that it jumps to the beginning of the section?