Question 131173 in Xcode Question posted in
Whether you're new to Xcode or an experienced developer, our archive has everything you need to know about this integrated development environment (IDE). From basic functionalities to advanced features, our archive covers a wide range of Xcode-related questions and answers. Browse our archive now and find solutions to your Xcode questions, and take your app development skills to the next level

Xcode – Making a navbar go to the correct section

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 class="Navbar" style="position: inherit;">
        <a class="active" href="#aboutme">About Me</a>
        <a class="active" href="#skills">Skills</a>
        <a class="active" href="#contactme">Contact Me</a>
</div>

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

<div class="skills">
        <h2 class="header">Skills</h2>
            <div class="skills-img">
            <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>
Tags:

3

Answers


  1. 0

    You have to use the id Attribute.

    Example:

    <div id="skills">
    <h2 class="header">Skills</h2>
    <div class="skills-img">
        <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

    Login or Signup to reply.
  2. 0 
    #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' class="Navbar" >
        <a class="active" href="#aboutme">About Me</a>
        <a class="active" href="#skills">Skills</a>
        <a class="active" href="#contactme">Contact Me</a>
</div> 


<div id='skills' class="skills">
        <h2 class="header"><a href='#Navbar'>Skills</a></h2>
            <div class="skills-img">
            
            </div>
</div>

<div id='aboutme' class="skills">
        <h2 class="header"><a href='#Navbar'>About Me</a></h2>
            <div class="skills-img">
            
            </div>
</div>


<div id='contactme' class="skills">
        <h2 class="header"><a href='#Navbar'>Contact Me</a></h2>
            <div class="skills-img">
            
            </div>
</div>
    Login or Signup to reply.
  3. 0

    another option is to add an a tag with name attribute set it to a unique name in the webpage that you want the link to jump too, this is called fragment identifier (see Chapter 7 from: https://tools.ietf.org/html/rfc1866), as a beginner, I advice to start studying the standards, not only online tutorials…

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search