Collapse Navbar on link click only on sm breakpoint

Webdesign Help
1

Hey everyone,

So I added a Navbar to my page and it properly switches to the toggle button on sm breakpoints.

I wanted to set it up so that on small breakpoints, when you expand the menu and click a link, it would collapse the menu (This is for anchor links on the same page). I added data-bs-toggle=“collapse” to a span within the HTML and it worked great.

The problem is when the page goes above small and the navbar transitions to a set list of links along the top of the page, when you click on one, it tries to collapse the navbar, so the navbar does a weird squish animation before resetting to normal. Is there a way I can do this so that the collapse one calls on certain breakpoints?

My current idea is to have two links and then just set one that collapses to display only on sm and hide on larger, but that feels a bit hacky to me.

2

To make it work you need to write some javascript

3

I’ll try here without seeing the code so don’t shoot the messenger lol.

Because websites built in BSS are using Bootstraps current version, this means your sites are being built with Mobile First technology. This means that the smallest size of XS (phones) is the default.

By changing that small size setting for that menu toggle, you need to then change it back on the next size up (larger) that it is needed to “not” act the same as the x-small size, basically setting it back to where it was before the change you make.

Alter your code to change the settings back in say either SM or MD size breakpoint and that should fix your issue.

4

Can you explain by adding a media query closes the mobile menu when clicking on a link

5

@kuligaposten Nope lol, just answering the part where he was having the issue of it not going back to normal on larger breakpoints after he changed it on the small one. :stuck_out_tongue:

6 
// Closes responsive dropdown menu when a dropdown link is clicked
$('.dropdown-item').click(function() {
    $('.navbar-collapse').collapse('hide');
});

Needs Jquery enabled but should be easy enough to change to javascript