I am a bit lost here, mainly because I don't know jquery but I am trying to uses bootstraps collapsing jquery plugin to get a mobile first menu working. I am not using bootstraps css, do I need to be using it? is it possible to just use the jquery plugin without any of bootstraps css? When I press the three bar menu icon nothing happens. My css is currently hiding and revealing the three bar menu icon—I don't know if this is competing with whatever is in the jquery or not.
<body>
<section class="grid sticky">
<div class="container">
<header class="grid twelve header">
<a href="#" class="menuButton btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<div class="iconBar"></div>
<div class="iconBar"></div>
<div class="iconBar"></div>
</a>
<div class="logoHolder">
<a class="logo" href="index.html">
<img src="img/logo/ks_logo.svg">
</a>
</div>
<!-- Main Nav, hidden below 768 px -->
<nav class="mainNav not-phone not-phoneSM">
<ul class="nav">
<li><a href="work.html">Work</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
</div>
</section>
<!-- Mobile Main Nav, called upon to relieve when screen is at 768 px -->
<section class="not-desktop not-tablet">
<header>
<nav class="mobileMainNav nav-collapse collapse">
<ul>
<li><a href="work.html">Work</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
</section>
<!-- jQuery via Google + local fallback, see h5bp.com -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Bootstrap jQuery Plugins, compiled and minified -->
<script src="bootstrap2/js/bootstrap.min.js"></script>
</body>
Buddy there are Style classes in css files of bootstrap which are used by dropdown js to work . So either you write your custom styles for them or use the default styles . There are few I am mentioning below:
.navbar .nav > li > .dropdown-menu:after {
}
.navbar .nav > li > .dropdown-menu:before {
}
.dropdown-menu > li > a {
}
.dropdown-menu{
}
.dropdown-toggle {
}
.dropdown{
}
Stick the dropdown class to the Li element you want to have dropdown toggle functionality.
And to the attach dropdown-menu to the ul to display dropdown menu .
Example :
<ul class="nav">
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Hom <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another</a></li>
<li><a href="#">Some</a></li>
</ul>
</li>
</ul>
You can completely rewrite these styles and use them in your project .