Problem with drop-down menu + HTML button

Navigation
0

I have a menu that is displayed when I press a button and it shows me the options of the menu, the problem is that it appears above the body of my page, and I would like it to move the body 1cm each time the button is clicked down.

It would also achieve the same effect by adding a padding-bottom to the 1cm space menu.

This is the menu: 

<header class="bg-dark-red py-1" id="menu_top">
    <div class="container">
        <nav class="navbar navbar-expand-lg navbar-light" id="menu_nav">
            <h1>
                <a class="navbar-brand" href="index.html">
                    <img src="images/aki_logo.jpg" width="250" style="border-radius: 10px;">
                </a>
            </h1>


            <!--BOTON MENU-->
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" id="boton_menu">
                <span class="navbar-toggler-icon"></span>
            </button>
            <!--_____________________-->

            <input type="hidden" class="btn_navbar">

            <!--ELEMENTOS DEL MENU-->
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav ml-lg-4 mr-auto">
                    <li>
                        <input type="button" onclick="document.location.reload();" class="button_inicio" value="Inicio">
                    </li>

                    <li class="nav-item">
                        <a class="nav-link" href="#Acerca_de" data-ancla="Acerca_de">Quienes Somos</a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link" href="#Planes" data-ancla="Planes">Planes</a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link" href="#Servicios" data-ancla="Servicios">Servicios Adicionales</a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link" href="#Contacto" data-ancla="Contacto">Contacto</a>
                    </li>

                </ul>
                <!--<div class="header-right">
                    <a href="signin.html" class="signin mr-4">Sign in <i class="fas fa-sign-in-alt"></i></a>
                    <a href="register.html" class="contact">Get Started</a>
                    </div>-->
                </div>
            </nav>
        </div>
    </header>

And this is just an animation that I add to the menu button. 

<script type="text/javascript">

    const btn = document.querySelector('.navbar-toggler')

    btn.addEventListener('click', () => {
        btn.classList.remove('animate')
        setTimeout(() => btn.classList.add('animate'), 100)
    })

</script>

I tried to add this line within the click event. 

document.getElementById('menu_top').style.paddingBottom = '1cm';

I added the id to the header too, but it did not work.

I add that the menu button also appears only if the screen resolution is less than 1024x600 pixels. And it hides the elements of my menu.

And in case the resolution is higher, only the elements of my menu are displayed, aligned. And the button is hidden.

    
asked by M4uriXD 15.11.2018 в 15:42
source

2 answers

1

Here is an example of how to do it so that the menu does not appear on the body of the page. I did not understand well if apart from this you wanted to add a space when you deploy it, for this add a line of css. Just remove it if it is not what you need. Greetings! 

document.getElementById('menu_top').style.paddingBottom = '1cm';

    const btn = document.querySelector('.navbar-toggler')

    btn.addEventListener('click', () => {
        btn.classList.remove('animate')
        setTimeout(() => btn.classList.add('animate'), 100)
        
    })
/*Solo para distinguir el contenido*/
.contenido{height:100px;background-color:red}

/*Seleccionamos el menú solo cuando está desplegado y le agregamos padding*/

.navbar-collapse.collapse.show{padding-bottom: 2em;}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>




<header class="bg-dark-red py-1" id="menu_top">
    <div class="container">
        <nav class="navbar navbar-expand-lg navbar-light" id="menu_nav">
            <h1>
                <a class="navbar-brand" href="index.html">
                    <img src="images/aki_logo.jpg" width="250" style="border-radius: 10px;">
                </a>
            </h1>


            <!--BOTON MENU-->
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" id="btn_menu">
                <span class="navbar-toggler-icon"></span>
            </button>
            <!--_____________________-->

            <input type="hidden" class="btn_navbar">
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav ml-lg-4 mr-auto">
                    <li>
                        <input type="button" onclick="document.location.reload();" class="button_inicio" value="Inicio">
                    </li>

                    <li class="nav-item">
                        <a class="nav-link" href="#Acerca_de" data-ancla="Acerca_de">Quienes Somos</a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link" href="#Planes" data-ancla="Planes">Planes</a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link" href="#Servicios" data-ancla="Servicios">Servicios Adicionales</a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link" href="#Contacto" data-ancla="Contacto">Contacto</a>
                    </li>

                </ul>
                
                </div>
            </nav>
        </div>
    </header>
<div class="contenido"><h3>Contenido de la pagina</h3></div>
    
answered by 15.11.2018 / 16:59
source
0

try to add this css: 

#navbarSupportedContent{
   display:block;
}
    
answered by 15.11.2018 в 16:40
PHP Combine data from several arrays If statement does not recognize the operator ||