Ok, not an ideal solution - but I added an *id="topNavBtn"* to the <button>
used for expanding. I then added this function in:
function toggle_top_nav() {
/* if we are on a smaller screen, we have the "toggle" menu, so we need
to make sure we close it when clicking... */
if (jQuery(document).width() < 768) {
jQuery('#topNavBtn').click();
}
}
I then just call that with any link that I would want to close the menu
down again on smaller screens. Hope that helps someone else!
Cheers
Andy
On Thursday, 29 August 2013 08:08:41 UTC+1, Andy Newby wrote:
>
> Hi,
>
> I'm trying to work out how to toggle the navbar you see in Bootstrap
> 3.0.0. Its fine when you look at > 768px, but when you are on smaller you
> get the "compressed" version (i.e when you click the "show" link, which
> then pulls down the menu). That all works fine, but the problem I'm having
> is how to hide this menu again programatically?
>
> <!-- Fixed navbar -->
>> <div class="navbar navbar-default navbar-fixed-top">
>> <div class="container">
>> <div class="navbar-header">
>> <button type="button" class="navbar-toggle"
>> data-toggle="collapse" data-target=".navbar-collapse">
>> <span class="icon-bar"></span>
>> <span class="icon-bar"></span>
>> <span class="icon-bar"></span>
>> </button>
>> <a class="navbar-brand go_home" href="javascript:
>> void(0);"><img src="./new/steampunklogosmall.png" id="logo" /></a>
>> </div>
>> <div class="navbar-collapse collapse"> <!---->
>> <ul class="nav navbar-nav">
>>
>> <li class="dropdown">
>> <a href="#" class="dropdown-toggle"
>> data-toggle="dropdown">Menu <b class="caret"></b></a>
>> <ul class="dropdown-menu">
>> <li><a href="javascript:void(0)"
>> class="following">Following</a></li>
>> <li><a href="javascript:void(0)" class="myorders">My
>> Orders</a></li>
>> <li><a href="javascript: void(0);"
>> class="search_btn">Search</a></li>
>> <li><a href="javascript:void(0)"
>> class="load_faq">FAQ</a></li>
>>
>> </ul>
>> </li>
>>
>> <li class="dropdown">
>> <a href="#" class="dropdown-toggle" data-toggle="dropdown">
>> By Subject <b class="caret"></b></a>
>> <ul class="dropdown-menu">
>> <li><a href="javascript: void(0);"
>> class="go_home">All</a></li>
>> <li><a href="javascript:void(0);" class="do_load_cat"
>> rel="art_design">Art, Design</a></li>
>> <li><a href="javascript:void(0);" class="do_load_cat"
>> rel="library">Library</a></li>
>> </ul>
>> </li>
>>
>> <li class="dropdown">
>> <a href="#" class="dropdown-toggle" data-toggle="dropdown">
>> By Media <b class="caret"></b></a>
>> <ul class="dropdown-menu">
>> <li><a href="javascript: void(0);"
>> class="go_home">All</a></li>
>> <li><a href="javascript:void(0);" class="load_by_media"
>> rel="aluminium">Aluminium</a></li>
>> <li><a href="javascript:void(0);" class="load_by_media"
>> rel="brass">Brass</a></li>
>> <li><a href="javascript:void(0);" class="load_by_media"
>> rel="bronze">Bronze</a></li>
>> </ul>
>> </li>
>> </ul>
>> <ul class="nav navbar-nav navbar-right">
>> <li><a href="javascript:void(0);" class="top-right-nav-btn
>> profile"><b class="icon icon-user"></b> Profile</a></li>
>> <li><a href="javascript:void(0);" class="logout
>> top-right-nav-btn" ><b class="icon icon-off"></b> Logout</a></li>
>> </ul>
>> </div><!--/.nav-collapse -->
>> </div>
>> </div>
>>
>
>
> As an example, I use this to "close" a dropdown menu item when clicked:
>
> $('.dropdown.open .dropdown-toggle').dropdown('toggle');
>
> I have tried doing:
>
> $('button.navbar-toggle.collapsed').click();
>
> ...but it still stays open when you click on a link.
>
> Has anyone managed to do this?
>
> TIA
>
> Andy
>
>
--
You received this message because you are subscribed to the Google Groups
"twitter-bootstrap" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
For more options, visit https://groups.google.com/groups/opt_out.
