Please, I need help as I have done these for hours and achieving no result.
How do i make the get this;
When I click a .nav-link button in the nav element, I am taken to the corresponding section of the landing page
My nav links to be horizontal and with spacing and no being highlighted blue.
https://codepen.io/estherugwueke/pen/pojZrNm
Thanks in advance
estherugwueke:
When I click a .nav-link button in the nav element, I am taken to the corresponding section of the landing page
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
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;
Done, thank you!
However, I still haven’t been able to position the nav elements horizontally.
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;
}
Did that earlier but couldn’t see my scrolling bar by the side anymore.