My nav links are not working as intended, how can i correct this issue

45 Views Asked by Eric Ndumbi At 14 September 2023 at 09:34

I am building a simple recipe website and I have 3 nav-links:

HOME
RECIPE
ABOUT US.

My id attributes match the values in my href attributes but still, the nav links are not active or scroll down to their intended section. I have yet to make the about us section. I am using HTML, CSS, and Bootstrap, do not know any JavaScript.

<header id="header-section">

  <div class="container">
    <ul class="nav nav-pills">
      <li class="nav-item"><a href="#header-section" class="nav-link">Home</a></li>
      <li class="nav-item"><a href="#recipe-section" class="nav-link">Recipes</a></li>
      <li class="nav-item"><a href="#about-section" class="nav-link">About Us</a></li>
    </ul>
  </div>

  <section class="recipe" id="recipe-section">
    <div>
      <h4>My passport may be collecting dust, but my taste buds are on a global adventure!</h4>
    </div>

I have tried puting the nav-links outside the header section to see if it would work but nothing. I returned them into the header section as i like how it looks with one background image for the nav-links and header section.

Original Q&A

There are 1 best solutions below

Vivek Tarsariya On 20 September 2023 at 09:09

I see your code there has some mistakes. you have added id in wrong way you just need to add id in sections and add link path using #id. I have try to code working them. Plz check below snippet.

<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html {
            scroll-behavior: smooth;
        }

        section {
            height: 500px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
        }
    </style>
</head>

<body>
    <header id="header-section">
        <div class="container">
            <ul class="nav nav-pills">
                <li class="nav-item"><a href="#header-section" class="nav-link">Home</a< /li>
                <li class="nav-item"><a href="#recipe-section" class="nav-link">Recipes</a></li>
                <li class="nav-item"><a href="#about-section" class="nav-link">About Us</a></li>
            </ul>
        </div>
    </header>
    <section class="recipe" id="header-section" style="background: red;">
        <div>
            <h4>Home</h4>
        </div>
    </section>
    <section class="recipe" id="recipe-section" style="background: green;">
        <div>
            <h4>Recipes</h4>
        </div>
    </section>
    <section class="recipe" id="about-section" style="background: blue;">
        <div>
            <h4>About Us</h4>
        </div>
    </section>
</body>

</html>

My nav links are not working as intended, how can i correct this issue

There are 1 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in NAV

Related Questions in SMOOTH-SCROLLING

Trending Questions

Popular # Hahtags

Popular Questions