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.
Related
This is what I have:
<div class="container" style="padding-top: 70px;">
<div id="navbar">
<!-- Fixed navbar -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<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>
<a class="navbar-brand" href="/">
<div class="col-xs-2"><img src="img/favicon.png" alt="Dev Icon" height="20px" width="20px"></div><div class="col-xs-10">FrontEnd Dev</div></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<?php include('includes/navbar.php'); ?>
</div><!--/.nav-collapse -->
</div>
</nav>
</div>
The <?php include('includes/navbar.php'); ?> just adds the <ul class="nav navbar-nav"> with the <li> tags from another array file.
This issue only happens when the toggle button is available on smaller devices. Clicking on the button does nothing visually (but it does change classes in the code). Clicking the button a few more times will result in the disappearing of the complete navbar. I removed any other css styling that could affect the navbar but is still the same. I use Bootstrap v3.3.7 using the CDN links from the Bootstrap website.
I found the problem. The toggle button has data-target="#navbar" which targets the <div id="navbar" class="navbar-collapse collapse">. I didn't realize that I had all the navbar wrapped up in a ´div´ with the id of navbar. So that's where the conflict was.
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/
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.
I am currently working on a Bootstrap-based website, and I wanted to change the opacity of my bootstrap navbar on scroll. I wanted the navbar to become full visible at a height of 500px.
So far so good, I changed the scroll opacity using the following code I found online:
$(document).on('scroll', function (e) {
$('.navbar').css('opacity', ($(document).scrollTop() / 500));
});
My problem is that the navbar scroll opacity works on my website, but when I open my website in mobile view, the bootstrap-hamburger menu does not work.
When I press the button of the hamburger menu, the menu collapses and the hyperlinks are visible. The only problem is that I do not see a background behind those links. I tried editing this in my CSS, but setting an background there does not work, I think due to the scroll opacity script I implemented.
I am sorry for my crappy English, but I hope you understand my problem :)
Edit: Here's my navbar code:
<nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
<div class="container topnav">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapsemenu">
<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 topnav" href="#home"><img src="img/logo.png" class="logo"/></a>
</div>
<div class="collapse navbar-collapse" id="collapsemenu" style="padding-top:14px;">
<ul class="nav navbar-nav navbar-right">
<li>
ABOUT
</li>
<li>
WORK
</li>
<li>
TEAM
</li>
<li>
CONTACT
</li>
</ul>
</div>
</div>
</nav>
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