How to set menu to direct the user to the exact point set in href="# "

Asked

Viewed 109 times

0

How to set a menu so that clicking on any item directs the user to the exact starting point of Section related to the clicked item?

The problem is that when clicked directs to the beginning of the paragraph tag instead of the beginning of the Section as defined in the menu.

I’m using a Sticky menu, describe a part of the code as an example

html code:

   ...
    <div id="navbar">
      <a href="#start">Inicio</a>       
      <a href="#nosotros">Nosotros</a>
      <a href="#contact">Contacto</a>
    </div>
    <script src="js/navbar_javascript.js"></script>  
   </div>
</header>

For all are defined a Section...

  <section id="nosotros">   
      <div class="container-fluid">       

        <div class="quienes_somos">
          <div class="row">

            <div class="col-lg-6 col-md-6 col-sm-12 ">
              <div class="foto_nosotros">
                <img src="" alt="" width="">
              </div>>
            </div>

            <div class="col-lg-6 col-md-6 col-sm-12">
              <h3 class="title_que_hacemos">Sobre Nosotros...</h3>
              <p class="text_que_hacemos"> ... </p>

            </div>              
          </div>
        </div>

      </div>
  </section>

In css I set top and bottom margins for Section:

    #nosotros {
    margin-top: 10vh;
    margin-bottom: 10vh;
}

I hope you have expressed yourself well. I have tried several options.. I hope someone can help me! :)

html css

  • I didn’t understand the problem. By clicking on <a href="#nosotros">Nosotros</a> will go to the beginning of <section id="nosotros">.

  • Are you using Bootstrap? Which version? You mean when you go to Section a piece of it gets underneath the Navbar, covering part of the content is this?

  • Yes, Bootstrap 04. Exactly that hugosl! The 10vh margin and the title that are inside the Section are outside the visualization area. I need to scroll up to see.

2 answers

1


Your problem is documented here officially: https://getbootstrap.com/docs/4.0/components/navbar/#placement

Bootstrap’s own suggestion is that you put a padding in the body

Fixed navbars use position: fixed, meaning they’re Pulled from the normal flow of the DOM and may require custom CSS (e. g., padding-top on the <body>) to Prevent overlap with other Elements.

PORTUGUÊS "As navbars fixed use position: fixed, i.e., they are extracted from the normal DOM flow and may require custom CSS (for example, padding-top on <body>) to avoid overlapping with other elements."

Look at the suggested CSS in the BS4 Example itself: https://getbootstrap.com/docs/4.1/examples/navbar-fixed/navbar-top-fixed.css

/* Show it is fixed to the top */
body {
  padding-top: 4.5rem;
}

OBS: that value of padding-top: 4.5rem; is related to Navbar height, if you have a customized Navbar and wider than the original you will need to change this value 4.5rem;

Example cited

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>
/* Show it is fixed to the top */
body {
  min-height: 75rem; /* esse valor é apenas para criar uma barra de rolagem na página */
  padding-top: 4.5rem;
}
</style>
</head>
<body>
    
    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
        <a class="navbar-brand" href="#">Fixed navbar</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarCollapse">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled" href="#">Disabled</a>
            </li>
          </ul>
          <form class="form-inline mt-2 mt-md-0">
            <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
          </form>
        </div>
      </nav>
  
      <main role="main" class="container">
        <div class="jumbotron">
          <h1>Navbar example</h1>
          <p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser's viewport.</p>
          <a class="btn btn-lg btn-primary" href="../../components/navbar/" role="button">View navbar docs &raquo;</a>
        </div>
      </main>
  
    
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>

  • I know your answer, I have a very modified structure. I am using a Carousel and a navbar Sticky positioned below. with padding on the body left me the space above the corousel. I got the result by placing a div before the <Section nosotros> <div id="scrollPosition_nosotros"> </div>

  • @flagsrose cool that solved there, your solution shows that you understand well the concept and that know become rss. If my answer helped you in any way consider marking it as Accept, in this icon below the arrows on the left side of my answer :) so the site does not get open questions pending without response accepted []s

  • @flagsrose young a hint, vc can only mark an answer as accepted. So unfortunately vc can only mark the ✔ for one person...

0

Clicking here

<a class="nav-link" href="#myfeatures">Features</a>

Will direct to this block, through the myfeatures ID

            <div class="row m-t-40" id="myfeatures">
                <h1>direciona para cá</h1>
            </div>

  • very interesting this kind of spacing usage. I don’t know if from the way I’ve been structuring the code, something didn’t let me function as expected. I got the result by putting a div before the start of <section id="nosotros"> guy <div id="scrollPosition_nosotros"> </div> and on the Nav <a href="#scrollPosition_nosotros">Nosotros</a>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.