Navbar doesn't collapse by default on smaller screens

sage
1

Hi,

I don’t know if this is an issue with something I’m doing within Roots or whether it’s a lack of general understanding so I apologise in advance if I’m asking for help in the wrong place.

I’m using Bootstrap v4.1.3 and Roots v9.0.5.

I’ve got a navbar that should default to collapsed until the screen size is large. However, the menu is still showing on small screens (vertical menu) and the navbar toggler is showing too. When I click on the navbar toggler the menu collapses but when I refresh the page or move to other pages the navbar always defaults to open. On large screens the menu is visible (horizontal menu) and the navbar toggler is not showing.

I’ve looked at the site’s HTML and the navbar has the ‘show’ class in the ‘navbar-collapse.collapse’ div by default which I don’t think it should do.

I have got the following code in app/Controllers/App.php

    public function primarymenu()
{
    $args = [
        'theme_location' => 'primary_navigation',
        'menu_class' => 'navbar-nav mr-auto',
        'walker' => new \App\wp_bootstrap4_navwalker()
    ];
    return $args;
}

In header.blade.php I have:

<header class="banner">
{{ get_bloginfo('name', 'display') }} @solidicon('bars') 
  <div class="collapse navbar-collapse justify-content-between" id="navbarPrimaryNavigation">
    @if (has_nav_menu('primary_navigation'))
      {!! wp_nav_menu($primarymenu) !!}
    @endif
    @include('partials.list-social')
  </div>
</nav>

I haven’t added any script in my common.js file because I didn’t think it was necessary but when I have tried adding $(’.collapse’).collapse(); it didn’t make any difference.

I have got other code in common.js:

  • lozad
  • ekko lightbox

I’ve tried replacing the html within with the first example code on https://getbootstrap.com/docs/4.0/components/navbar/ and the same thing happens on small screens - so, the navbar toggler is visible and the vertical menu is shown. Clicking on the navbar toggler collapses the menu successfully.

I hope I’m explaining this clearly! Is anyone able to help?

Thanks so much.

2

This is more of a Bootstrap question than a Sage question, but if you can share the actual HTML output of your code I’ll bet we could find the problem.

3

Hi,

Thank you, that’s really kind.

Here’s the HTML output. I’ve edited slightly to take out the client’s name and svg stuff etc:

<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
  <a class="navbrand" href="//localhost:3000/"><img class="logo" src="//localhost:3000/app/themes/theme-name/dist/images/LOGO-Full-Colour-Logo_75bb900e.svg" alt="Website Name"></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarPrimaryNavigation" aria-controls="navbarPrimaryNavigation" aria-expanded="true" aria-label="Toggle navigation">
    <span class="fa-1x"><svg class="svg-inline--fa fa-bars fa-w-14" aria-hidden="true" data-prefix="fas" data-icon="bars" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path fill="currentColor" d="lots-of-svg"></path></svg><!-- <i class="fas fa-bars"></i> --></span>
  </button>

  <div class="navbar-collapse justify-content-between collapse show" id="navbarPrimaryNavigation" style="">
              <div class="menu-primary-navigation-container">

<ul id="menu-primary-navigation" class="navbar-nav mr-auto">
<li id="menu-item-207" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-146 current_page_item  active nav-item nav-item-207"><a title="Home" href="//localhost:3000/" class="nav-link">Home</a></li>
<li id="menu-item-788" class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-788"><a title="About" href="//localhost:3000/about/" class="nav-link">About</a></li>
<li id="menu-item-347" class="menu-item menu-item-type-post_type_archive menu-item-object-services menu-item-has-children nav-item nav-item-347  dropdown"><a title="Services" href="#" class="dropdown-toggle nav-link" data-toggle="dropdown" role="button" aria-haspopup="true">Services</a>
<div role="menu" class=" dropdown-menu">
<a title="In the park" href="//localhost:3000/services/in-the-park/" class="menu-item menu-item-type-post_type menu-item-object-services dropdown-item" id="menu-item-800">Casting in the park</a><a title="Guided fishing" href="//localhost:3000/services/guided-fishing/" class="menu-item menu-item-type-post_type menu-item-object-services dropdown-item" id="menu-item-799">Guided</a>
<a title="Corporate days" href="//localhost:3000/services/corporate-days/" class="menu-item menu-item-type-post_type menu-item-object-services dropdown-item" id="menu-item-801">Corporate days</a></div>
</li>
<li id="menu-item-213" class="menu-item menu-item-type-custom menu-item-object-custom nav-item nav-item-213"><a title="Events" href="//localhost:3000/events/" class="nav-link">Events</a></li>
<li id="menu-item-858" class="menu-item menu-item-type-taxonomy menu-item-object-category nav-item nav-item-858"><a title="Videos" href="//localhost:3000/blog/videos/" class="nav-link">Videos</a></li>
<li id="menu-item-233" class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-233"><a title="Blog" href="//localhost:3000/blog/" class="nav-link">Blog</a></li>
<li id="menu-item-781" class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-781"><a title="Contact" href="//localhost:3000/contact/" class="nav-link">Contact</a></li>
</ul>

</div>

  </div>
</nav>

As soon as I reduce the screen size or look at the site on a small device, the ‘show’ class gets added in:

      <div class="navbar-collapse justify-content-between collapse show" id="navbarPrimaryNavigation" style="">

I’d expect the ‘show’ class only to be added in when the navbar toggler is clicked.

If I click the navbar toggler then the ‘show’ class is removed and the nav menu is hidden.

Thanks so much for looking at this, I know it’s not really the right question for this forum.

4

The code you’ve shared has the show class applied. Are you sure you don’t have that somewhere in your source?

5

No, I haven’t got the show class anywhere in my source code. I know this class is the problem but I have no idea where it’s coming from.

6

Even if I replace the entire navbar with the sample code from the Bootstrap 4 site, it still happens. Somehow the ‘show’ class gets added in for small screens.

7

This one’s got me stumped. I would try eliminating other factors: remove other JavaScript, try updating Bootstrap to the latest version, check that you’re not using the same collapse ID elsewhere on your page, etc. see if you can remove things until it works.

8

It’s so strange isn’t it. I’ve tried removing all the JavaScript I added to common.js (I haven’t got anything in home.js or about.js) and it makes no difference. I don’t think I’ve added any JavaScript elsewhere.

I’m not using the same collapse ID elsewhere on the page.

I’ve updated Bootrap from v4.1.3 to v4.2.1 and that hasn’t fixed it either.

I’m stumped too.

9

This topic was automatically closed after 42 days. New replies are no longer allowed.