bootstrap 3: pancake menu toggle -opens, then closes immediately

I have a feeling this would be much easier if I wasn't using a wordpress bootstrap theme.

I wanted to add my mobile navigation (pancake menu) to iPad/portrait. I've accomplished this here:

check this out in iPad/portrait:

http://cjehost.com/ncjwla3/

touch the pancake menu and see how it opens for a sec, then immediately closes? If I delete the css  I'm using to move the breakpoint so I can display the pancake menu on my iPad, the toggle works great on my iPhone (but completely disappears from iPad/portrait),

Here's the css I'm using to add a breakpoint so I can display my pancake menu in iPad/portrait - any ideas what's going on? I tried removing 1 style at a time, but that didn't help:

@media (max-width: 768px) {
    .navbar-header {
        float: none !important;
    }
    .navbar-toggle {
        display: block !important;
    }
    .navbar-collapse {
        border-top: 1px solid transparent !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }

    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px !important;
    }
    .navbar-nav>li {
        float: none !important;
    }
    .navbar-nav>li>a {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
}

Open in new window

phillystyle123Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

lenamtlCommented:
Hi,

I'm not able to reproduce your issue...
0
phillystyle123Author Commented:
I had the css for this commented out. Please try again  -iPad, portrait view (or your smartphone) the menu appears for a second, then disappears.

Here's the link:
http://cjehost.com/ncjwla3/

The css I'm using to make the pancake menu show up in iPad portrait is:

@media (max-width: 768px) {
    .navbar-header {
        float: none !important;
    }
    .navbar-toggle {
        display: block !important;
    }
    .navbar-collapse {
        border-top: 1px solid transparent !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }

    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px !important;
    }
    .navbar-nav>li {
        float: none !important;
    }
    .navbar-nav>li>a {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
}

Open in new window


If I comment it out, the pancake menu only works on phones.
0
phillystyle123Author Commented:
I found the answer here:  http://stackoverflow.com/questions/18192082/bootstrap-3-navbar-collapse

and here's the css that worked for me - this ensures that the pancake menu shows up in ipad portrait and functions correctly:

@media (max-width: 991px) {
    .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;
    }
    .navbar-text {
        float: none;
        margin: 15px 0;
    }
    /* since 3.1.0 */
    .navbar-collapse.collapse.in { 
        display: block!important;
    }
    .collapsing {
        overflow: hidden!important;
    }
}

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
phillystyle123Author Commented:
No one had addressed the question and I found the answer.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.