Making a navbar go to the correct section-CodePudding

I am beginner at code. I am trying to get my navbar to go to the correct sections of my HTML page. For instance, I want my skills href to go to the skills section of the html. I know I am missing something, but I do not know what it is.I greatly appreciate your help!

Here is my code for my navbar

<div  style="position: inherit;">
        <a  href="#aboutme">About Me</a>
        <a  href="#skills">Skills</a>
        <a  href="#contactme">Contact Me</a>
</div>

here is my code for the #skills section. All of the sections have the same coding.

<div >
        <h2 >Skills</h2>
            <div >
            <img src="HTML.png" alt="html" width="100px">
            <img src="Css.png" alt="css" width="75px">
          <img src="JavaScript-Logo.png" alt="Javascrip" width="180px">
            </div>

CodePudding user response：

You have to use the id Attribute.

Example:

<div id="skills">
    <h2 >Skills</h2>
    <div >
        <img src="HTML.png" alt="html" width="100px">
        <img src="Css.png" alt="css" width="75px">
        <img src="JavaScript-Logo.png" alt="Javascrip" width="180px">
    </div>
</div>

I think this will help you: https://www.w3docs.com/snippets/html/how-to-create-an-anchor-link-to-jump-to-a-specific-part-of-a-page.html

CodePudding user response：

#skills,#contactme,#aboutme{
margin-top:100vh;
}

#skills a, #contactme a, #aboutme a{
text-decoration:none;
}
  
a{
margin-left:20px;
margin-right:20px;
text-align:center;}

.Navbar{
display:flex;
justify-content:center;

}

<div id='Navbar'  >
        <a  href="#aboutme">About Me</a>
        <a  href="#skills">Skills</a>
        <a  href="#contactme">Contact Me</a>
</div> 


<div id='skills' >
        <h2 ><a href='#Navbar'>Skills</a></h2>
            <div >
            
            </div>
</div>

<div id='aboutme' >
        <h2 ><a href='#Navbar'>About Me</a></h2>
            <div >
            
            </div>
</div>


<div id='contactme' >
        <h2 ><a href='#Navbar'>Contact Me</a></h2>
            <div >
            
            </div>
</div>