How to position the Section below the menu

Question

I’m using Ancora menu, and when I click on the link it gets the top of the menu, how do I place it below the menu?

How does it look:

How it should look:

code: Script

<script>
    var menu = $('#menu .nav li');
    var sectionPositions = $('section').map(function () {
        return $(this).position().top;
    });
    var sections = $('section');
    $(document).on('scroll', function () {
        var scroll = $(document).scrollTop();
        var currentElement;
        $(sectionPositions).each(function (i) {
            if (scroll > this - 50) currentElement = menu[i];
        });
        currentElement && addClass(currentElement);
    });
    menu.on('click', function () {
        addClass(this);
    });

    function addClass(el) {
        menu.removeClass('active');
        $(el).addClass('active');
    };
</script>

Section

    <section data-slide="4" id="Devices">
        <div class="row">
            <div class="div2 text-center">
                <img class="div2Img" src="~/Content/Images/BackGround/dispositivos.png" />

                <p class="div2Texto">Seu Site ou Software funcionando em qualquer dispositivo</p>
            </div>
        </div>
    </section>

Menu

<li><a href="#Devices">Dispositivos</a></li>

Answer 1

From what I’ve seen you’re using menu with position:fixed, to solve just add a padding-top in the body:

body 
{ 
    padding-top: 60px; // altura do seu menu
}