Hi, good evening everyone.
That’s actually two questions, but I think they are well related.
I have a bootstrap 5 navbar. In small devices, when it’s collapsed, once I select an item, it remains open. I know it should load collapsed on reload, but I’m buliding a SPA page, and the navbar is part of the main layout.
Also, when it opens, does not overlap the background but drag the content downwards.
How could I change these behaviors?
Thanks!
That's the default behavior of the Navbar in Bootstrap 5. You will need some custom JS code to collapse it, when a link is clicked.
That is because of the position you set for the navbar. It overlaps the content when it's fixed top, otherwise it pushes is down.
Thank you.
My navbar is positioned as sticky top.
So you mean, is not posible to get those bahaviors with the Wappler standard features?
First of all, thank you for your help.
But I’m sure someone else have done it before. Since it’s the most common type of navbar outthere. A sticky top navbar wich closes onclick and overlaps the content.
Actually, it only pushes when inmediately down there’s a column with image background, and overlaps the rest of the content.
Regarding the auto close option, there’s another old post, but looks that is’t working over bootstrap 5 navbar
Not really clear for me what do you mean.
Maybe post your page code so I can see what are you doing on the page.
sure!
<nav class="navbar navbar-dark bg-primary pt-lg-0 pb-lg-0 navbar-expand-lg sticky-top pb-0">
<div class="me-lg-0 gy-lg-0 container-fluid">
<a class="navbar-brand w-75 ms-lg-5 pt-0 pb-0" href="#">
<img src="/assets/images/logo.jpg" class="flex-shrink-1 img-fluid">
</a>
<button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#collapse1" aria-controls="collapse1" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="collapse1" class="collapse navbar-collapse">
<div class="navbar-nav ms-auto">
<a class="nav-item nav-link" href="/" internal>Inicio</a>
That’s not the whole code. Please copy from <body> to </body>
Also make sure to wrap your code in 3 backticks ``` when pasting it.
Sorry, here is the whole page
<body is="dmx-app" id="main">
<div class="container-fluid">
<div class="row style2 align-items-lg-center me-xl-0">
<div class="text-end pe-4 col-lg-12">
<p class="text-secondary mb-lg-0">Cómo llegar</p>
</div>
</div>
</div>
<nav class="navbar navbar-dark bg-primary pt-lg-0 pb-lg-0 navbar-expand-lg sticky-top pb-0">
<div class="me-lg-0 gy-lg-0 container-fluid">
<a class="navbar-brand w-75 ms-lg-5 pt-0 pb-0" href="#">
<img src="/assets/images/logo.jpg" class="flex-shrink-1 img-fluid">
</a>
<button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#collapse1" aria-controls="collapse1" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="collapse1" class="collapse navbar-collapse">
<div class="navbar-nav ms-auto">
<a class="nav-item nav-link" href="/" internal>Inicio</a>
<a class="nav-item nav-link" href="/servicios" internal>Servicios</a>
<a class="nav-item nav-link" href="/alojamientos" internal>Alojamientos</a>
<a class="nav-item nav-link" href="/actividades" internal>Actividades</a>
<a class="nav-item nav-link" href="/galeria" internal>Galería</a>
<a class="nav-item nav-link" href="/tarifas" internal>Tarifas</a>
</div>
</div>
</div>
</nav>
<div is="dmx-view" id="content">
<%- await include(content, locals); %>
</div>
<footer class="gx-0">
<div class="row piedepagina row-cols-1 row-cols-sm-1 row-cols-md-3 row-cols-lg-3 mb-lg-4 me-xl-0 gx-0">
<div class="col align-self-center text-center">
<ul class="list-group bg-transparent lista" style="list-style: disc;">
<li class="list-group-item bg-transparent active">Suscripción a newsletter
</li>
<li class="list-group-item active bg-transparent">Trabaja con nosotros</li>
<li class="list-group-item active bg-transparent">Contacto</li>
</ul>
</div>
<div class="col align-self-lg-center text-lg-center text-center">
<div class="btn-group" role="group" aria-label="Button Group">
<button id="btn3" class="btn text-light"><i class="fab fa-facebook-square fa-2x"></i></button>
<button id="btn4" class="btn text-light"><i class="fab fa-instagram-square fa-2x"></i></button>
<button id="btn5" class="btn text-light"><i class="fab fa-whatsapp-square fa-2x"></i></button>
<button id="btn6" class="btn text-light"><i class="far fa-envelope fa-2x"></i></button>
</div>
</div>
<div class="col pt-lg-3 pb-lg-3 mb-5 pt-5 pb-3">
<h6 class="text-lg-center text-light text-center style4">
</h6>
</div>
</div>
</footer>
</body>
That’s the layout, then comes the views.
Thank you!
Thanks for the link.
As i explained in my previous posts - change the navbar position to fixed top so it doesn’t push the content below. When using sticky top position and not scrolled down the page the element is acting like a relatively positioned, which pushes your content down.
I really apreciate your help Teodor.
But my question was if t’s posible to do it with a sticky menu, if someone knew a trick.
Also, for closing the dropdown after selecting an item. You said to me to do it with custom JS, but I can’t generate JS (tha’s why I like Wappler). I understand that maybe goes beyond the Wappler oficial support . But again, maybe someone else as comunity member, is willing to give me a hand.
Thanks a lot
But that is how the sticky position is supposed to work. Posted a link explaining that. Position sticky toggles the position between relative and fixed , depending on the scroll position. When you have not scrolled and when the element has not reached the top of the screen, it has a relative position! This means it will push the content down.
Scrolling past the page top, the element has a fixed position. Then it does not push the content ...
If you don't want this behavior (which is how CSS works, not a Wappler thing) change the position of the navbar to fixed top, so that it uses fixed position always.
Wappler relies on what the Bootstrap 5 framework offers. If you need any customizations of the core functionality, Wappler cannot offer a magic wand that does this.
Here's a code you can put at the bottom of the page, before the closing </body> tag, which should do the job:
<script>
const navLinks = document.querySelectorAll('.nav-item')
const menuToggle = document.getElementById('collapse1')
const bsCollapse = new bootstrap.Collapse(menuToggle, {toggle:false})
navLinks.forEach((l) => {
l.addEventListener('click', () => { bsCollapse.hide() })
})
</script>
I’m very sorry about this miss understanding. I wasn’t asking for magic, just something like that.
It works perfect!
Thank you