Fixar um NavBar

Front-end HTML
#1

Olá bom dia, estou fazendo uma pagina com section ou seja é uma unica pagina com sessões e gostaria de deixar meu nav bar fixo, até consegui isso porem quando clico no botão sobre por exemplo ele não mostra a sessão do sobre em baixo do nav bar, mostra no topo da pagina e com isso parte da sessão não aparece, alguem saberia como fazer com que as sessões apareçam sequente ao nav bar?

Grato desde já

#2

Vc poderia colocar uma div com a mesma altura do nav no topo ou um padding top no body com tamanho do nav

#3

Obrigado Diego farei esse teste. E se eu colocar o nav dentro da div? Pode funcionar?

#4

Pode funcionar, mas de qualquer jeito terá que definir o tamanho da div

#5

Fiz das duas formas mas não deu certo, quando eu clico no botão a section vai para o topo da página e uma parte dela fica atrás do nav bar por mais que eu defina o tamanho do body

#6

Acho que entendi errado, é isso que vc quer?

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style>
nav {
    background: blue;
    position: fixed;
    width: 100%;
    box-sizing: border-box;
    top: 0;
    left: 0;
}
section.sobre {
    position: absolute;
    background: yellow;
    left: 0;
    width: 100%;
    display: none;
}

</style>
</head>
<body>
<nav>
<button type="button" class="sobre">Sobre</button>
<section class="sobre">.............
 Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste
 Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste
 Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste
</section>
</nav>
</body>
</html>
<script>
$(document).ready(function(){
    $("button.sobre").click(function(){
        $("section.sobre").css("display", "block");
    });
});
</script>