CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
rand_user91
rand_user91

Reputation: 83

Set up a different Bootstrap menu breakpoint, but menu won't display on this breakpoint

I have set up custom

I have set up a new breakpoint so that the mobile menu appears at 1200px with the following css: 

@media (max-width: 1200px) {
.navbar-header {
    float: none;
}
.navbar-toggle {
    display: block;
}
.navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.navbar-collapse.collapse {
    display: none!important;
}
.navbar-nav {
    float: none!important;
    margin: 7.5px -15px;
}
.navbar-nav>li {
    float: none;
}
.navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
}
}

the issue is that when I get to that breakpoint the mobile menu always collapses and never reveals,

Here is the markup: 

<nav class="navbar navbar-inverse a-1-navbar a-1-navbar-shadow" role="navigation" id="a-1-main-menu">
<div class="container">
    <div class="navbar-header a-1-navbar-header">

        <button type="button" class="navbar-toggle a-mobile-toggle" data-toggle="collapse" data-target="#a-menu"  style="float:left;">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>

        <a class="navbar-brand a-1-logo-wrapper" href="#" style="float:right;">
            <img class="hidden-xs a-1-logo" src="life.png"   alt="">
            <img class="visible-xs a-1-logo" src="life.png"  alt="">
        </a>

    </div>

    <div class="collapse navbar-collapse" id="a-menu" >
        <ul class="nav navbar-nav navbar-right a-menu-bar">
            <li class="active"><a href="#" class="a-1-menu-item" data-submenu="Vehicles"> Vehicles  <span class="glyphicon glyphicon-chevron-down"></span></a></li>
            <li><a href="#" class="a-1-menu-item" data-submenu="Specials">       Specials <span class="glyphicon glyphicon-chevron-down"></span></a></li>
            <li><a href="#" class="a-1-menu-item" data-submenu="Finance">       Finance & Insurance <span class="glyphicon glyphicon-chevron-down"></span></a></li>
            <li><a href="#" class="a-1-menu-item" data-submenu="Servicing">       Servicing <span class="glyphicon glyphicon-chevron-down"></span></a></li>
            <li><a href="#" class="a-1-menu-item" data-submenu="Parts">       Parts <span class="glyphicon glyphicon-chevron-down"></span></a></li>
            <li><a href="#" class="a-1-menu-item" data-submenu="Contact">       Contact <span class="glyphicon glyphicon-chevron-down"></span></a></li>
        </ul>
    </div>
</div>

Is some custom JavaScript needed?

Upvotes: 0

Views: 94

Answers (1)

kavare
kavare

Reputation: 1806

I've tested your code and there's no problem in revealing collapsed items. Perhaps you should check the following thing first:

  1. Did you include jQuery?
  2. Did you include Bootstrap3 js resource?
  3. Did you include collapse plugin in your Bootstrap3 js resource?

For Bootstrap3 you need to add more lines in your css

While there's no problem hiding collapsed items, it DOES have problem when showing the dropdown list. The problem is you miss out this:

.navbar-collapse.collapse.in { 
  display: block!important;
}

.collapsing {
  overflow: hidden!important;
}

Here's the example on Codepen.

Upvotes: 1

Related Questions