Bootstrap Mobile Menu Dropdown displays as Desktop version

Question

I'm using OctoberCMS with a Bootstrap Menu.

When the browser is scaled down to Mobile, the Dropdown still displays as the Desktop bubble.

It should display like it does on their website where it stacks in rows.

---

JS Fiddle

https://jsfiddle.net/Ldm1p63r/

I've narrowed the problem down to being the open class added/removed from <li class="dropdown "> by the javascript.

---

HTML Menu

<nav id="layout-nav" class="navbar navbar-inverse navbar-fixed-top navbar-autohide" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>

        <div class="collapse navbar-collapse">

            <ul class="nav navbar-nav navbar-left">
                <li class="active">
                    <a href="#">Home</a>
                </li>

                <li>
                    <a href="#">About</a>
                </li>

                <li class="dropdown ">
                    <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
                      Blog <i class="icon-chevron-down"></i>
                    </a>
                    <ul class="dropdown-menu">
                        <li class="dropdown-item">
                            <a href="#">Category 1</a>
                        </li>
                        <li class="dropdown-item">
                            <a href="#">Category 2</a>
                        </li>
                        <li class="dropdown-item">
                            <a href="#">Category 3</a>
                        </li>  
                    </ul>
                </li>

                <li>
                    <a href="#">Contact</a>
                </li>
            </ul>

        </div>
    </div>
</nav>

---

CSS

I'm applying OctoberCMS css theme for example to style the menu.

https://octobercms.com/themes/website/assets/css/theme.css

---

JS

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.js

Update: OctoberCMS may also be using these files https://github.com/rainlab/vanilla-theme/tree/master/assets/vendor/bootstrap/js

Answer 1

I simply added the same css they have on their site, except that it seems in your fiddle there is the show class used instead of open as class selector.

js fiddle solution

CSS

@media (max-width: 767px) {
  .navbar-nav .show .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
    background-color: transparent;
    border: 0;
    box-shadow: none;
  }
}