0

I am attempting to set up my collapsed nav bar (only visible on mobile) so that when someone clicks on a link in the toggle, or the toggle itself, or anywhere on the page, the navbar closes. I have looked at this question, but I am unable to comment and ask about it as a fairly new user to stack overflow: How to hide collapsible Bootstrap 4 navbar on click

The javascript solution in the top answer didn't work, and when I apply a data-toggle & data-target to the link, it works to close the nav bar but no longer links anywhere (it is just linked to lower on the page).

I've also looked at other versions of this question but the javascript solutions haven't worked, because they are generally targeted towards a navbar that is using an unordered list, which mine is not. I've tried to edit the JS to suit my needs but it hasn't worked.

    <nav class="navbar navbar-inverse navbar-toggleable-sm fixed-top" style="box-sizing:border-box;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;" id="mainNav">

        <div class="container" style="box-sizing:border-box;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;">

        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle Navigation"> 
            <span class="navbar-toggler-icon"></span>
            </button> 

        <a class="navbar-brand mr-auto js-scroll-trigger" href="#page-top">Logo</a>

            <div class="collapse navbar-collapse ml-auto" id="navbarResponsive" style="box-sizing:border-box;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;">

            <div class="navbar-nav navMenuBox">
            <a class="nav-item nav-link navmenu js-scroll-trigger" href="#howto" data-toggle="collapse" data-target=".navbar-collapse.show">How to Use</a>
            <a class="nav-item nav-link navmenu js-scroll-trigger" href="#mappy">Map</a>
            <a class="nav-item nav-link navmenu js-scroll-trigger" href="#about">About</a>
            </div><!--navbar-nav-->
        </div><!--collapse-->


        </div><!--container-->
    </nav>
Ailis
  • 47
  • 12

1 Answers1

0

the javascript solutions haven't worked, because they are generally targeted towards a navbar that is using an unordered list, which mine is not.

Can you please show the pre-modified javascript? Probably the easiest solution is targeting your ordered list.

hip
  • 43
  • 7
  • here is one I've tried: $(document).ready(function () { $(document).click(function (event) { var clickover = $(event.target); var _opened = $(".navbar-collapse").hasClass("navbar-collapse in"); if (_opened === true && !clickover.hasClass("navbar-toggle")) { $("button.navbar-toggle").click(); } }); }); here is another: $('.navbar-nav>li>a').on('click', function(){ $('.navbar-collapse').collapse('hide'); }); – Ailis Aug 25 '17 at 20:34
  • sorry I accidentally hit enter without shift! I've editted to include the code although it didn't format properly with markup, sorry. neither of these ones targeted a list so I'm not sure why they don't work. – Ailis Aug 25 '17 at 20:36
  • BTW, check Bootstrap4 Navbar examples ( https://getbootstrap.com/docs/4.0/examples/navbars/# ). Note that all menu items, but the ones in a dropdown group, come in a list. – hip Aug 25 '17 at 20:39
  • yeah I'm wondering now if I need to convert to using a list.. I've learned what I know so far from lynda.com and it had said it didn't need to be within a list, and i've had trouble customizing the style of the menu at max width when in list form. – Ailis Aug 25 '17 at 20:43
  • 1
    Just a suggestion: start from one of the Bootstrap samples and sart adding your contents/changes one by one while refreshing the page. It helps a lot and let's you know you're in the right way (not when you start from scratch). – hip Aug 25 '17 at 20:47