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
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.
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;
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.