Product Landing Page: questions about my project

Code Feedback
1

Hello,

I have finished my Product Landing Page project but still have a few questions about it.
Here is the link to my project: https://codepen.io/antoine-binamee/full/QWboRNW
Here are my questions:

  • When I hover over the links in the navigation bar, the background turns white (as intended) but there is still a thin margin around them that makes it look like they have a black border. The height of the header and the height of the links are both set to 50px. I have tried various things but can’t get rid of this “black border”. Does anyone have an idea how to do it?
  • When I click on a link, the page scrolls to the right section but the title (h2) of the section is hidden behind the fixed header. I guess I could just link the links to the element right above the title, but it would not be the best solution in terms of accessibility. Is there a “clean” way to avoid this problem?

I’m also open to all comments and suggestions.

Thanks for reading!
Antoine

2

@antoineb (1) I’m probably not the best to explain why, but one way around this would be to display a white border when you hover your anchor tag. Something like border: 1px solid #fff should do the trick…

(2) The scroll is functioning correctly but because of the navigation bar, the title is covered. You can add padding-top to the section tag and see if that works…

The website looks great by the way, good job!

2 Likes
3

Thank you for you answer!

Your tricks worked!
(1) I added a 2px border at the top and bottom of the links and it now looks fine. I still don’t get why it wouldn’t work without it though.

#menu a:hover {
  color: #000;
  background-color: #fff;
  border-style: solid none;
  border-color: #fff;
  border-width: 2px;
}

(2) I added a 50px padding-top and it worked like a charm.

section {
  padding-top: 50px;
}

Thanks again and have a great day!