PreNav (Bootstrap3) won't drop down in mobile view

Question

I can't figure out exactly why my preNav won't drop down in mobile view. I think it might have something to do with the bootstrap.css, but I was hoping someone had some more insight on the issue. I currently have 2 'navbar navbar-fixed-top' horizontal navs on the top of my page. In mobile view, it looks like this:

and the 2nd nav (in white) drops down just fine, but clicking the top nav drop down (in black) has no reaction. Is this due to bootstrap.css? Any ideas would be helpful.Here is my CSS for each nav if it helps:

#nav1 {
position: relative;
top:0;
}

#nav2 {
position: relative;
border-bottom:none;
}

and HTML for topNav (Nav1):

<div class="container-full">
<div class="row">
    <div class="navbar navbar-inverse navbar-fixed-top" id="nav1" role="navigation">

    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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="col-sm-3 col-sm-3 pull-left">
        <form class="navbar-form" role="search">
        <div class="input-group">
            <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
            <div class="input-group-btn">
                <button class="btn btn-default" type="submit">GO</button>
            </div>
        </div>
        </form>
    </div>
    <div class="collapse navbar-collapse navbar-collapse" id="pre-nav">
        <ul class="nav navbar-nav" id="pre-nav-menu">
            <li><a href="#">Current Students</a></li>
            <li><a href="#">Staff</a></li>
            <li><a href="#">Employers</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
        <span id="phone"><a href="tel:1-877-655-7676">1.877.655.7676</a></span>
            <a href="#formJump"><input type="button" value="Request Info" class="btn btn-default pull-right" id="rinfoBtn" data-toggle="collapse" data-target=".navbar-collapse"/></a>
        </ul>
    </div>
</div>

on there now, I'd post the nav2 HTML but its loaded with mega-menu so is very long. It utilizes the same pattern/classes as this nav — HerbalChaos420, Jan 08 '16 at 16:51
You need to check your data-target because it doesn't appear to be attached to the id it's currently set at. (You also have navbar-collapse set twice on the same div FYI) — vanburen, Jan 08 '16 at 16:55
Might be a copy/paste error but also looks like either the `.container-full` or `#nav1` div doesn't have a closing tag... — An0nC0d3r, Jan 08 '16 at 16:57
possible duplicate of [this](http://stackoverflow.com/questions/25750541/navbar-dropdown-not-working-on-mobile-devices) — varun aaruru, Jan 08 '16 at 16:59
all helpful and pointing me in the right direction! Thanks guys — HerbalChaos420, Jan 08 '16 at 16:59

score 1 · Answer 1 · answered Jan 08 '16 at 17:32

It was indeed my data-target as vanburen pointed out. Instead of data-target=".navbar-ex1-collapse" I needed data-target=".navbar-collapse" , removing the 'ex1-' which must have been left in there as "example 1" from the original megaMenu source I pulled. Thanks vanburen!

PreNav (Bootstrap3) won't drop down in mobile view

1 Answers1