0

I have 2 problems finalizing my bootstrap navbar. 1. on click of any of the menu links (while in mobile mode), the menu is not getting hidden 2. when we click on the nav link then the page goes to the inpage link however, the top of that section is masked under the navbar

you can experiment with the code here: https://jsfiddle.net/dandoonian/b504pavg/5/

and here's my navbar code

<nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link" href="#section1">Section 1</a>
      <a class="nav-item nav-link" href="#section2">Section 2</a>
      <a class="nav-item nav-link" href="#section3">Section 3</a>
      <a class="nav-item nav-link" href="#section4">Section 4</a>
      <a class="nav-item nav-link" href="#section5">Section 5</a>
      <a class="nav-item nav-link" href="#section6">Section 6</a>
    </div>
  </div>
</nav>

i have recorded a small video showing what's happening. https://youtu.be/olA7ddDKsWk

P.S. this is bootstrap code out of the box, didn't modify anything to it, just added content and renamed the links

Dany Balian
  • 608
  • 7
  • 16
  • Does this answer your question? [How to hide collapsible Bootstrap 4 navbar on click](https://stackoverflow.com/questions/42401606/how-to-hide-collapsible-bootstrap-4-navbar-on-click) – chojnicki May 24 '20 at 17:45
  • No, i already tried that and many other articles i passed through, i guess something is conflicting in my code.. when i added the data-toggle parameter the clicks stopped working at all.. (i didn't try the jquery option, because i want to solve it using css) – Dany Balian May 24 '20 at 18:11
  • the weird thing is that, even when i get the sample navbar from bootstrap 4 website and i just add long content to it, and divs, the navbar links don't make the menu disappear and the link scrolls to a bad location. – Dany Balian May 25 '20 at 10:36

1 Answers1

0

Concerning the offset problem, I have solved it in an ugly way.

I have added a dummy div on top of every section with a 72px height and made the links point to that div instead of my content div.

so instead of having: 

<div class="container" id="section1">
    <h2>header</h2>
    <p>content here</p>
</div>

I did this:

<div class="dummy" id="section1" style="width:100%; height:72px;"></div>
<div class="container">
    <h2>header</h2>
    <p>content here</p>
</div>

and to prevent the first section having a huge padding on top, i have added a negative margin-top on the first section.

{margin-top: -56px;}

Concerning the disappearing of the menu, none of the methods I tried worked, so i solved it using javascript.

$('.navbar-nav>li>a').on('click', function(){
    $('.navbar-collapse').collapse('hide');
});

Hope this helps someone else solve their problem

Dany Balian
  • 608
  • 7
  • 16