My Product Landing Page- Assist me!

General
1

Please, I need help as I have done these for hours and achieving no result.
How do i make the get this;

  1. When I click a .nav-link button in the nav element, I am taken to the corresponding section of the landing page
  2. My nav links to be horizontal and with spacing and no being highlighted blue.

https://codepen.io/estherugwueke/pen/pojZrNm

Thanks in advance

2

Your nav-link class applies to the <li> elements, but your href is on the <a> element.

Use the CSS to apply a style to your <a> elements maybe?

1 Like
3

You can do this one by adding an id to the specific part of the page div and than link the anchor tag to it. ex:

<a href="#home">Home</a>

<div id="home">Div Content Here</div>

This one you just select your css and use the text-decoration: none; property and change the color to something else ex, color: black;

4

Done, thank you!

However, I still haven’t been able to position the nav elements horizontally.

5

Thanks, dear.

Corrections made.

6

What you can do is select the ul element, then use the display: flex; and flex-direction-column; then you can just add a little padding and margins to the links.
ex:

element {
   display: flex;
   flex-direction: row;
}
7

Did that earlier but couldn’t see my scrolling bar by the side anymore.