0

Como configurar um menu para que ao clicar em algum item direcione o usuario ao ponto exato de início de section relacionado a o item clicado?

O Problema é que cuando clico direciona ao inicio da tag de paragrafo em vez do inicio da section como o definido no menu.

Estou utilizando um sticky menu, descrevo uma parte do codigo como exemplo

codigo do html:

   ...
    <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>

Para todos estão defindas uma 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>

No css defini margens de top e bottom para a section:

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

Espero que tenha coseguido expresar-me bem. já tentei varias opções.. Espero que alguém consiga me ajudar! :)

3
  • Não entendi o problema. Ao clicar em <a href="#nosotros">Nosotros</a> irá para o início de <section id="nosotros">.
    – Sam
    11/12/2018 às 16:53
  • Vc está usando Bootstrap? Qual versão? Vc quer dizer que quando vai para section um pedaço dela fica por baixo da Navbar, cobrindo parte do conteúdo é isso?
    – hugocsl
    11/12/2018 às 16:58
  • Sim, Bootstrap 04. Exatamente isso hugosl! A margem de 10vh e o título que estão dentro da section ficam fora da area de vizualização. Necessito dar scroll pra cima para poder visualizar.
    – Rose
    11/12/2018 às 18:49

2 Respostas 2

1

Seu problema está documentado aqui oficialmente: https://getbootstrap.com/docs/4.0/components/navbar/#placement

A sugestão do próprio Bootstrap é que vc coloque um padding no 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 fixas usam position: fixed, ou seja, são extraídas do fluxo normal do DOM e podem exigir CSS personalizado (por exemplo, padding-top no <body>) para evitar a sobreposição com outros elementos."

Olha o CSS sugerido no Exemplo do próprio BS4: 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: esse valor de padding-top: 4.5rem; é referente a altura da Navbar, se vctiver uma Navbar customizada e mais larga que a original vc vai precisar mudar esse valor 4.5rem;

Exemplo citado

<!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>

3
  • Certa tua resposta, tenho uma estrutura bastante modificada. Estou utilizando um carousel e a sticky navbar posicionada abaixo. com padding no body me deixou o espaço acima do corousel. consegui o resultado colocando um div antes da <section nosotros> <div id="scrollPosition_nosotros"> </div>
    – Rose
    12/12/2018 às 14:16
  • @flagsrose legal que resolveu ai, sua solução mostra que vc entendeu bem o conceito e que sabe se virar rss. Se a minha resposta te ajudou de alguma forma considere marca-la como Aceita, nesse ícone ✔ abaixo das setinhas no lado esquerdo da minha resposta :) assim o site não fica com perguntas abertas pendentes sem resposta aceita []´s
    – hugocsl
    12/12/2018 às 14:21
  • @flagsrose jovem uma dica, vc só pode marcar uma resposta como aceita. Então infelizmente vc só pode marcar o para uma pessoa...
    – hugocsl
    12/12/2018 às 14:44
0

Clicando aqui

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

Irá direcionar para esse bloco, através do ID myfeatures

            <div class="row m-t-40" id="myfeatures">
                <h1>direciona para cá</h1>
            </div>
1
  • muito interessante este tipo de utilização de espaçamento. Não sei se pela forma que tenho estruturado o código, alguma coisa não me deixou funcionar como o esperado. Consegui o resultado colocando uma div antes do início da <section id="nosotros"> tipo <div id="scrollPosition_nosotros"> </div> e na nav <a href="#scrollPosition_nosotros">Nosotros</a>
    – Rose
    12/12/2018 às 14:39

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .