0

im new to front-end development and hope i get some clarification on this topic by you guys . I need to build a website where i implement a nav bar and when an element or link in this navbar is clicked it should scroll down to the correct section of the webpage. Its all an onepager.

My question is how to implement a nav bar using bootstrap 5 and/or external css stylesheet alligned to the right side with following elements : About me, Random Facts, Skills, Portfolio, Contact Me where when e.g. Random Facts is clicked it scrolls down to Random facts.

Also i wanted to know what exactly the difference between """ a class="nav-link active" aria-current="page" href="#" """ and standard """a class="nav-link" href="#" """ is.

<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fabian Zaiser</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">About Me</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Random Facts</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Skills</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
</body>

This i what i have currently. Thank you guys so much in advance.

Improve this question
1

1 Answer 1

Reset to default
1 
Add CSS

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">

Add JS
<script src=" https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js " integrity=" sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo " crossorigin=" anonymous "></script>
<script src=" https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js " integrity=" sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/ " crossorigin=" anonymous "></script>

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container-fluid">
          <a class="navbar-brand" href="#">Fabian Zaiser</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
              </button>
          <div class="collapse navbar-collapse " id="navbarSupportedContent">
            <!-- ml-auto still works just fine-->
            <div class="navbar-nav ml-auto mb-2 mb-lg-0">
              <a class="nav-link active" aria-current="page" href="#">About Me</a>
              <a class="nav-link" href="#randomfacts">Random Facts</a>
              <a class="nav-link" href="#">Skills</a>              
            </div>
          </div>
        </div>
      </nav>
      
      <div id="randomfacts">

        Random Facts
      </div>

For this question "e.g. Random Facts is clicked it scrolls down to Random facts." need to add div id and href is is same so we can scroll down on exact div.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.