I have a menu that is displayed when a button is pressed and it shows me the menu options, the problem is that it appears above the body of my page, and I would like that for each time the button is clicked it moves the body 1cm downwards.
You would also achieve the same effect by adding a padding-bottom
1cm space to the 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 inside the click event this line.
document.getElementById('menu_top').style.paddingBottom = '1cm';
I added the id
to the header as well, but it didn't work.
I add that also the menu button appears only if the screen resolution is less than 1024x600 pixels. And it hides my menu items from me.
And in case the resolution is higher, only the elements of my menu are shown, aligned. And the button is hidden.
I leave you 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 to it when displaying it, for this I added a line of css. Just remove it if it's not what you need. Cheers!
try adding this css: