My problem is that I have a menu which I don't want to display in full-width browser window and when the window width less than 768px it can be seen by toggle bar clicking.
But I found the collapse transition doesn't work when I click the toggle bar. I have tested to remove the "full-hide" class, and it works fine, everything is normal.
I want to have the normal transition. What should I do?
I appreciate your help very much.
:>
It's my menu code
<div class="full-hide" id="navbar-collapse-2">
<?php
$args = array(
'menu' => 'all-menu',
'menu_class' => 'nav navbar-nav',
'container' => 'false'
);
wp_nav_menu( $args );
?>
</div>
And in style.css,
.full-hide{ display: none;}
toggle bar code
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#navbar-collapse-2" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="glyphicon glyphicon-align-justify toggle-bar" aria-hidden="true">
</span>
</button>
If i understand you right, you want the button to show at 768 (which is the max size for small screens).
Since you use bootstrap, you can apply it as well to your button.
<button type="button" class="navbar-toggle collapsed hidden-md hidden-lg" data-toggle="collapse" data-target="#navbar-collapse-2" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="glyphicon glyphicon-align-justify toggle-bar" aria-hidden="true"></span>
</button>
apply the classes hiddden-md and hidden-lg to it. It will show only the button then when your screen goes in lower width.
Optional:
Apply this trick to your menu you want to show that way as well, if you use a seperate menu. I am not sure, cause I cant make that up out of your context if this is your main menu and apply BootStrap to it, or you seperate that (i use mostly a different kind of menu for my mobile development)
<div class="hidden-md hidden-lg" id="navbar-collapse-2">
<?php
$args = array(
'menu' => 'all-menu',
'menu_class' => 'nav navbar-nav',
'container' => 'false'
);
wp_nav_menu( $args );
?>
</div>
See for documentation http://getbootstrap.com/css/#responsive-utilities
Related
I am looking at this theme and it is exactly perfect of what I am looking for (Side bar wise): http://themesdesign.in/webadmin_1.1/layouts/green/index.html
I want the Menu Button that expands/minimizes the side bar, while still retaining all the side bar menus.
When it's in XS screen, I want the side bar hidden, but pops up when that menu button is pressed.
This is what I have so far in codes:
<nav class="navbar-default navbar-static-side" role="navigation">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#side-menu" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="sidebar-collapse hidden-xs">
<ul class="nav navbar-collapse collapse" id="side-menu">
<li class="nav-header">
<h2 style="color: #e8e8e8"></h2>
<h6 class="" style="color:#808080;">By: </h6>
</li>
<li>
<a class="active" data-toggle="collapse" data-target="#firstMenu" aria-expanded="true" aria-controls="navbar"><i class="fa fa-th-large"></i> <span class="nav-label">Dashboards</span> <span class="fa arrow"></span></a>
<ul class="side-menu-ul collapse in" id="firstMenu">
<li>Dashboard v.1</li>
<li class="active">Dashboard v.2</li>
<li>Dashboard v.3</li>
<li>Dashboard v.4</li>
<li>Dashboard v.5 </li>
</ul>
</li>
<li>
<a data-toggle="collapse" data-target="#secondMenu" aria-expanded="false" aria-controls="navbar"><i class="icon ion-email"></i><span>Mail Box</span> </a>
<ul class="side-menu-ul collapse" id="secondMenu">
<li>Inbox</li>
<li>Compose Mail</li>
<li>Single Mail</li>
</ul>
</li>
</ul>
</div>
</nav>
Having not much design experience, I'm not really sure on how to proceed from here. Especially the part where clicking a button minimizes the side navbar. Would anyone be able to help me?
Edit: I just found another great example here: http://blog.codeply.com/2016/05/18/bootstrap-sidebar-responsive-examples/ The section "Left sidebar that collapses to icons" has what I am looking for. However, the problem with that one is, when it's collapsed to icons, it does not show any menu sub-items.
You can use a click event to update the state of your application when the button is clicked.
https://developer.mozilla.org/en-US/docs/Web/Events/click
Since you are going from one CSS state to another with your sidebar, your best bet would probably be to make both solutions in CSS. This way you can change a parent containers class through the onclick event of the button.
If you want it closed for example you would add a closed class to your sidebar and have your closed css cascade downwards by using:
.closed .child-element {}
To target child elements of the closed state.
I have this code that will hide the page-title if it is visible and the drop down menu button is clicked.
$('.site-overlay-toggle .btn').on("click", function(){
if ( $(".page-title").is(':visible') ) {
$( ".page-title" ).hide();
} else {
$( ".page-title" ).show();
}
});
This works as long as the drop down menu is manually clicked open and clicked closed. If I click on a anchor link in the menu on the same page, the page will scroll down to the correct section, and the drop-down menu will automatically close. This will however not trigger this code.
Is there a way I can detect if the menu is closed automatically?
You can use jQuery $('.site-overlay-toggle .btn').trigger('click') in the event for anchor.
If you have menu like this
<button type="btn btn-navbar" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".nav-collapse" aria-expanded="false"> <span class="icon-bar"></span>
This how code will loke like when menu is closed.
But if menu is open code looks like this
<button type="btn btn-navbar" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse" aria-expanded="true"> <span class="icon-bar"></span>
So you can use function .is("collapsed") or .hasClass("collapsed") for get true if menu is closed and flase if isn´t or you can get state of atribude aria-expanded.
http://api.jquery.com/is/
The issue I am having is getting both Scrollspy and a mobile menu to collapse when a link is clicked together. I can get the functionality of either one working by itself, but not together.
This snippet has scrollspy working, however, the mobile menu does not collapse when a linked is clicked.
<body data-spy="scroll" data-target="#mainNavbar">
<nav id="mainNavbar" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
<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" href="#">Site Name</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-right" id="navbarCollapse">
<ul class="nav navbar-nav">
<li>About</li>
<li>Social</li>
<li>Contact</li>
<li>Blog</li>
</ul>
</div>
</div>
</nav>
</body>
If I add the following to each anchor tag the mobile menu will collapse on click, but scrollspy breaks:
data-toggle="collapse" data-target=".navbar-collapse.in"
I'm assuming that using data-target is causing the issue, but I'm not sure how else to get around it.
Does anybody know of a way to get these two things to work together?
In searching other answers I was able to get both features to work by themselves, but I've yet been able to find something to assist in getting them working together. If I missed an answer, please point me in the right direction.
Thanks,
After further searching, it seems like using the data-toggle and data-target in the anchor tags breaks scrollspy. I've decided to use the following JS I found on another StackOverflow question for collapsing the mobile nav menu. This doesn't work with sub-menus it seems, but I'm not worried about that.
<script>
$('.navbar-collapse a').click(function (e) {
$('.navbar-collapse').collapse('toggle');
});
</script>
I want my bootstrap and angular app menu to collapse with animation after selection, and then let the handler do navigation. (I'm mystified why a menu wouldn't close by default on selection).
I've found how to do jquery stuff in an angular app, and how to do menu stuff in a jquery app, so I'm trying to combine the solutions to these two questions:
(menu, but not angular) Hide Twitter Bootstrap nav collapse on click
(anugular, but not menu) How to trigger ng-click [AngularJS] programmatically
My html looks like this...
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-navbar-collapse">
<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" href="#/" ng-bind="title"></a>
</div>
<div class="collapse navbar-collapse" id="js-navbar-collapse">
<ul class="nav navbar-nav">
<li ng-repeat="menuItem in menuItems" ng-click="selected(menuItem)"><p ng-bind="menuItem.name"></p></li>
</ul>
</div>
And so, I think my JS should look like this...
$scope.selected = function(menuItem) {
console.log(menuItem);
$timeout(function() {
angular.element('#js-navbar-collapse').triggerHandler('click');
}, 10);
};
But after trying every selector and several jquery methods, I can't make it work. The result is the same each time: the menu stays open, and all I get on the UI is a little flash of the menu icon.
Please forgive me if you feel that the question i am asking is little silly.
I am trying to create HTML page with Bootstrap NavBar and Off Canvas and found the page which does exactly the same i wanted. On top of the existing i need one extra feature.
http://getbootstrap.com/examples/offcanvas/
If you look at this link you will see navigation bar on top of the page and list on right hadn side. whne we reduce the size of the page navigation bar will turn into Menu icon and list will disappear. Also new button will be added to show hide list.(see below Big screen image)
What i need is to move the link/button which is visible on small screen should get added on the left side of the navbar. Simmiler kind of icon the one we have for menu on small screen.(see below small screen image)
Big screen
Small screen
You could put the toggle button into the navbar like this..
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<button type="button" class="navbar-toggle visible-xs pull-left" data-toggle="offcanvas">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
Codeply demo
Try using the pull-left class on the button instead of the default pull-right class.
Example: http://www.bootply.com/274FaWMbMX
The flaw with this design is that after a user clicks the button to access the menu, the button is no longer visible due to the menu expanding.