I am building a site with Bootstrap. On a mobile device, I have a hamburger menu. This appears as part of the Navbar. When I click the navbar, the content of the page is pushed down and the menu appears at the top. This is the default behavior of Bootstrap's Navbar. I would like to push the content right and have my menu take up the full height of the device.
Is there a way to do this with Bootstrap? Currently, my code looks like this:
<div class="collapse" id="nav1">
<h4>Hello</h4>
<ul class="list-unstyled">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
<nav class="navbar">
<div class="col-xs-2">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav1">
☰
</button>
</div>
<div class="col-xs-8 center-block text-center">
My App
</div>
<div class="col-xs-2 text-right">
<button>login</button>
</div>
</nav>
Is there a way to make the hamburger menu appear along the side instead of the top?
you could use the jasny bootstrap - it's pretty nice and you can integrate it too bootstrap really easy without touching core files:
http://www.jasny.net/bootstrap/javascript/#offcanvas
also, bootstrap already got a offcanvas function:
http://getbootstrap.com/examples/offcanvas/
Without testing:
<div class="sidebar-offcanvas" id="nav1">
<h4>Hello</h4>
<ul class="list-unstyled">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
<nav class="navbar">
<div class="col-xs-2">
<button class="navbar-toggler" type="button" data-toggle="offcanvas" data-target="#nav1">
☰
</button>
</div>
<div class="col-xs-8 center-block text-center">
My App
</div>
<div class="col-xs-2 text-right">
<button>login</button>
</div>
</nav>
////EDIT////
Working fiddle: http://jsfiddle.net/chjdfqpg/2/
Related
I'm developing a wordpress theme based on Bootstrap and I'm trying to add scrollspy's effects to my nav, but it only highlights the first element of my nav went the page is loaded (which is wrong, since its corresponding section in in the middle of the page) and then nothing else happens.
My html:
<div class="nav-collapse collapse text-center span4 scrollspy">
<ul class="nav text-center">
<li>
<a href="#section1" >Section 1</a></li>
<li>
Section 2</li>
</ul>
</div>
And the JS with which I try to activate Scrollspy:
$(document).ready(
$("body").scrollspy({
target: ".scrollspy"
})
)
My page is structured as follows:
<section id="zero" style="height: 100vh">
...
</section>
<section id="section1" style="height: 100vh">
...
</section>
<section id="section2" style="height: 100vh">
...
</section>
So I'm not really sure what your navbar looks like as you just posted the nav-collapse part but it looks fine to me. It may be that you only have 2 sections and if you have a fixed navbar and don't specify the offset your second section may not be reaching the top therefore not triggering the active event. There may be some issue with your navbar structure as well but I'm not really sure. It may be the way you are initianting the scrollspy with $(document).ready( instead of using $(document).ready(function(){ but not really sure as they both worked for me in the followig fiddle demo that I posted. Below is the working code that I used along with a working fiddle. I have added a smooth scrolling code below the scrollspy initiation script if you would like your scroll to have a smooth transition. Here is the fiddle that I used and it is working just fine Fiddle.
And here is the code with the full navbar that I used.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<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="#">Logo</a>
</div>
<div id="navbar" class="navbar-collapse collapse scrollspy">
<ul class="nav navbar-nav">
<li class="active">Section Zero</li>
<li>Section 1</li>
<li>Section 2</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
<section id="zero" style="height: 100vh;background: #222;">
...
</section>
<section id="section1" style="height: 100vh;background: #555;">
...
</section>
<section id="section2" style="height: 100vh;background: #888;">
...
</section>
And here is the ready function that I used with the top offset
$(document).ready(function(){
$('body').scrollspy({
target: ".scrollspy",
offset: 50
});
});
Hopefully this helps you figure out where things are going wrong.
I am using a free html5 theme to build on for a website and need a bit of help with the Navbar Hover function. To view the original html5 theme go to" http://www.templatemo.com/free-website-templates/430-robotic
The theme is a onepage theme however I am converting into a multipage theme. Originally in the theme you would click a menu item and it would scroll down the page to that content but I want it to open the new page in same window for that content. The way a normal site would do so. Below is a HTML and CSS.
HMTL
<div class="templatemo_menu">
<div class="templatemo_socialmedia">
<div class="templatemo_social">
<a href="http://www.Facebook.com/GreenHouseEffectUSA">
<img src="images/facebook.png" alt="templatemo facebook">
</a>
</div>
<div class="templatemo_social">
<a href="https://twitter.com/greenhouse_usa">
<img src="images/twitter.png" alt="templatemo twitter">
</a>
</div>
<div class="templatemo_social">
<a href="#">
<img src="images/youtube.png" alt="templatemo youtube">
</a>
</div>
</div>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="top-menu">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav" wp-nav-menu="Primary" wp-nav-menu-type="bootstrap">
<li>
HOME
</li>
<li>
ABOUT
</li>
<li>
DONATE
</li>
<li>
VOLUNTEER
</li>
<li>
CONTACT
</li>
</ul>
</div>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
Try moving the classes to the div rather than the ul
I'm trying to create a simple navbar at the right and pane on the left. Like they have showed in their documentation (section - Tabs on the right).
But the tabs are coming on the top only. Here's the JsFiddle demo
Am i doing anything wrong? Are tabs-right deprecated in new version of bootstrap?
The bootstrap version you are using is Bootstrap v3.3.5.
The documentation you are referring to is Bootstrap v2.0.0.
Use the right version as your code is right.
Snippet
#import url("https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="tabbable tabs-right">
<ul class="nav nav-tabs">
<li class="active">Section 1</li>
<li class="">Section 2</li>
<li class="">Section 3</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="rA">
<p>I'm in Section A.</p>
</div>
<div class="tab-pane" id="rB">
<p>Howdy, I'm in Section B.</p>
</div>
<div class="tab-pane" id="rC">
<p>What up girl, this is Section C.</p>
</div>
</div>
</div>
Fiddle: http://jsfiddle.net/b6zvmfmr/1/
I would like to implement links in nested submenus but it doesn't seem willing to work.
<div class="ui menu">
<div class="menu">
<div class="ui pointing dropdown link item">
<i class="dropdown icon"></i>
<span class="text">Menu</span>
<div class="menu">
<div class="item">
<i class="dropdown icon"></i>
<span class="text">Sub Menu</span>
<div class="menu">
<div class="header">Links</div>
<div class="item">Google</div>
<div class="item">StackOverflow</div>
</div>
</div>
</div>
</div>
</div>
</div>
The links in the submenu will not work (though links in the menu will).
Is this a bug or a "normal" feature. Has anyone find a way around this ?
Thanks a lot.
You don't need the div in the leaf menu item - try this under the links sub menu
<a class="item" href="http://www.google.com">Google</a>
I have been driving myself mad over getting ScrollSpy working. I have a menu that remains in a fixed, left position as the user scrolls down after a certain point, however, ScrollSpy refuses to work in any shape or form. I have tried a multitude of methods to get it working, as well as using a CMS (DotNetNuke) so please excuse some messy code here and there.
Here's the HTML of the nav:
<div role="complementary" class="bs-docs-sidebar hidden-print" id="sideNav">
<div class="sideNavCont">
<div>
<span class="sideMenuHeading">TITLE</span>
</div>
<div class="sideMenuGuideSep"></div>
<div class="sideMenu" id="navbar">
<ul class="nav nav-list affix sideMenuGuide">
<li>Option 1</li>
<li>Option 2 </li>
<li>Option 3 </li>
<li>Option 4 </li>
(and so on...)
</ul>
</div>
</div>
</div>
And here is the HTML for the content I want spied on:
<div id="content">
<span id="opt1">
<strong>Overview</strong>
</span>
<div>
<strong>
<span id="opt2" style="font-size: 32px;">TITLE</span>
</strong>
</div>
<p>
<span id="opt3" style="font-size: 32px;">
<strong>TITLE</strong>
</span>
</p>
</div>
Plus I have this piece of Jquery:
$('body').scrollspy({ target: '#content' });
Note that I also currently have working page anchors on each heading that work from linking from the nav.
I know the answer is probably staring me right in the face, but I'd appreciate your help. Thanks!
From the bootstrap doc, http://getbootstrap.com/javascript/#scrollspy.
"Then add the data-target attribute with the ID or class of the parent element of any Bootstrap .nav component."
So it should probably be initialized like this:
$('body').scrollspy({ target: '#sideNav' })