Ad

Bootstrap Mobile Menu Dropdown Displays As Desktop Version

I'm using OctoberCMS with a Bootstrap Menu.

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

desktop

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

october mobile


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 target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="#">Home</a>
                </li>

                <li>
                    <a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="#">About</a>
                </li>

                <li class="dropdown ">
                    <a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" 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 target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="#">Category 1</a>
                        </li>
                        <li class="dropdown-item">
                            <a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="#">Category 2</a>
                        </li>
                        <li class="dropdown-item">
                            <a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="#">Category 3</a>
                        </li>  
                    </ul>
                </li>

                <li>
                    <a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" 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

Ad

Answer

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;
  }
}

rendered

Ad
source: stackoverflow.com
Ad