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

Navigation
0

How to configure a menu so that when clicking on an item, you direct the user to the exact start point of the section related to the item clicked?

The problem is that when I click, it directs to the beginning of the paragraph tag instead of the beginning of the section as defined in the menu.

I am using a sticky menu, I 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 everyone there is 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 defined the top and bottom margins for the section: 

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

I hope you have managed to express me well. I already tried several options .. I hope someone can help me! :)

    
asked by anonymous 11.12.2018 / 17:38

2 answers

1

Your issue is documented here officially: link

Bootstrap's own suggestion is that you put a padding into body

  

Fixed navbars use position: fixed , meaning they're pulled from the normal flow of the DOM and may require custom CSS (eg, padding-top on the <body> ) to prevent overlap with other elements.

PORTUGUESE "% fixed% use navbars , that is, they are extracted from the normal DOM flow and may require custom CSS (eg padding-top in position: fixed ) to avoid overlapping with other elements. "

Look at the CSS suggested in the BS4 Example: link 

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

NOTE: This value of <body>) refers to the height of Navbar, if you have a custom Navbar that is wider than the original you will need to change this padding-top: 4.5rem;

Example quoted 

<!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><scriptsrc="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><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>
    
11.12.2018 / 19:58
0

Clicking here 

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

You will be directed to this block through the ID myfeatures 

            <div class="row m-t-40" id="myfeatures">
                <h1>direciona para cá</h1>
            </div>
    
11.12.2018 / 19:36
Saving a Dictionary in a Python File Insert records cart codeigniter