Scrollspy doesn't seem to work with the built in bootstrap "spanX" classes, for example:
This Works
<body data-spy="scroll" data-target="#scrollspy-nav">
<div id="scrollspy-nav" class="span4">
<ul class="nav nav-tabs nav-stacked affix">
<li>Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
</ul>
</div>
<div>
<section id="test1">Test 1 <!-- Lots of <br/>'s --></section>
<section id="test2">Test 2 <!-- Lots of <br/>'s --></section>
<section id="test3">Test 3 <!-- Lots of <br/>'s --></section>
</div>
</body>
This does not:
<body data-spy="scroll" data-target="#scrollspy-nav">
<div id="scrollspy-nav" class="span4">
<ul class="nav nav-tabs nav-stacked affix">
<li>Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
</ul>
</div>
<div class="span8">
<section id="test1">Test 1 <!-- Lots of <br/>'s --></section>
<section id="test2">Test 2 <!-- Lots of <br/>'s --></section>
<section id="test3">Test 3 <!-- Lots of <br/>'s --></section>
</div>
</body>
The first example (the one that works), does not have a spanX class on the content container div.
For a simple two column layout, create a .row and add the appropriate number of .span columns. As this is a 12-column grid, each .span* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).
<div class="row">
<div class="span4">...</div>
<div class="span8">...</div>
</div>
© twitter bootstrap
Related
I'm using the Foundation 5-Framework. I want to create a navigation with a panel under it. When im adding the panel, the navigationbar is always on top the panel.
This is my Code:
<div id="content">
<div class="row">
<div class="contain-to grid fixed">
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1>MySite</h1>
</li>
<li class="toggle-topbar menu-icon">
<span></span>
</li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li class="active">
Index
</li>
<li>
Contact
</li>
<li>
About me
</li>
<li class="has-dropdown">
Sign up
<ul class="dropdown">
<li>
Log in
</li>
</ul>
</li>
</ul>
</section>
</nav>
</div>
</div>
<div class="row">
<div class="small-12 columns panel">
<p>This is a panel.</p>
</div>
</div>
</div>
</div>
You can either remove the class "fixed" from your third row (if you don't need a fixed positioned top bar),
or add margin-top to the second (panel) row (with the same height as the top-bar) if you wish to keep the top-bar fixed.
When an element is position fixed (like absolute and float) it is not actually on the page in the sense that static elements are not relative to it. so your panel was anchoring to the top of the page, because there was no block above it.
I am simplifying it a bit, but I hope that helps.
I am having a problem with Foundation 5 where I am trying to get the columns in a row div to have collapsed gutters. More specifically, I am interested in collapsing the outer column gutters so that my nav bar and header div will line up nicely. I tried applying the .collapse class to the containing row div as well as to each column element, to no avail.
If anyone could help me figure out what I am missing, I would really appreciate it! Below is the code for the problem section of the page and a screen cap so you can see what I am trying to accomplish.
Ultimately I want to create a narrow vertical strip on either side of the page with a transitional gradient (blue to grey). If it is possible to do this in in the gutter, that would be a good solution to my problem as well. Thanks in advance!
<!-- Header Image and Left Side Nav Links -->
<div class="row collapse">
<div class="header-image">
<nav class="top-bar-z top-bar large-12 medium-12 small-12 columns" data-topbar role="navigation" data-options="is_hover:false">
<ul class="title-area">
<li class="name">
<h1>
Lacmhacarh
</h1>
</li>
<li class="toggle-topbar menu-icon"><span>menu</span></li>
</ul>
<!-- Right Side Nav Links -->
<section class="top-bar-section">
<ul class="right">
<li class="divider"></li>
<li class="has-dropdown">
Blog
<ul class="dropdown">
<li>Archive</li>
<li>Resources</li>
<li class="divider"></li>
<li>See all →</li>
</ul>
</li>
<li class="divider"></li>
<li class="has-dropdown">
Portfolio
<ul class="dropdown">
<li class="divider"></li>
<li>Résumé<i class="fi-play"></i></li>
<li>GitHub</li>
<li>LinkedIn</li>
<li>Twitter</li>
<li class="divider"></li>
<li><label>Special Projects</label></li>
<li>The Abh Nation</li>
<li>Something Cool Here</li>
</ul>
</li>
<li class="divider"></li>
<li>Contact</li>
<li class="divider"></li>
</ul>
</section>
</nav>
<!-- Header Foreground Image -->
<div class="large-4 columns">
<div class="header-logo-left">
</div>
</div>
<div class="large-4 columns">
<div class="header-logo-center">
</div>
</div>
<div class="large-4 columns">
<div class="header-logo-right">
</div>
</div>
</div>
</div>
After re-examining the code I figured out that the column gutters are not the problem causing the apparent offset in the right edge of the nav-bar. I had placed an extra divider after the "Contact" button, which was adding 10px of space.
Here is the original HTML for that part of the nav-bar:
<li class="divider"></li>
<li>Contact</li>
<li class="divider"></li>
And the new code:
<li class="divider"></li>
<li>Contact</li>
I believe that in order for .collapse to work, the .columns must be the first child div of the row.
<div class="row collapse">
<div class="large-12 columns"> <!--gets collapsed-->
Collapsed?
</div>
</div>
To build nav tabs via Bootstrap, it's simple, I just add code:
<ul class="nav nav-tabs">
<li class="active">
Home
</li>
<li>Tab1</li>
<li>Tab2</li>
</ul>
http://jsfiddle.net/M4YZ6/
but it's only top part of the tabs, who knows how to build bottom part using bootstrap like on picture below:
Thanks a lot!
try this
http://jsfiddle.net/M4YZ6/5/
HTML
<div class="tabbable">
<ul class="nav nav-tabs" id="myTab">
<li class="active">
<a data-original-title="" rel="tooltip" href="#tab1" data-toggle="tab">Home</a>
</li>
<li><a data-original-title="" rel="tooltip" href="#tab2" data-toggle="tab">Profile</a></li>
<li><a data-original-title="" rel="tooltip" href="#tab3" data-toggle="tab">Message</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="tab1">
Home
</div>
<div class="tab-pane" id="tab2">
Profile
</div>
<div class="tab-pane" id="tab3">
Message
</div>
</div>
</div>
I believe Tabbable nav is what you are looking for,
<div class="tabbable"> <!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
<li class="active">Section 1</li>
<li>Section 2</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>Howdy, I'm in Section 2.</p>
</div>
</div>
</div>
Markup taken from the nav component documentation
===Edit===
Js fiddle
A picture tells a thousand words..
I want rid of that nasty bit of padding on the left. How can I do it? Here's the HTML:
<div class="container">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<ul class="nav">
<li class="li-home active">
Home
</li>
<li class="li-abc">
Abc
</li>
<li class="li-def">
Def
</li>
<li class="li-ghi">
Ghi
</li>
</ul>
</div>
</div>
</div>
Put your navbar into a row because row has a margin-left: -20px that's why your content looks like this.
I am using Zurb Foundation 4 and I need my top bar navigation to be centered as .large-12.columns
I tried the following (but it doesn't work)
<div class="row">
<div class="large-12 columns">
<nav class="top-bar">
<ul class="title-area">
...
</ul>
<section class="top-bar-section">
<ul class="left">
<li>Link 1</li>
<li>Link 2</li>
</ul>
<ul class="right">
<li>Link 3</li>
<li>Link 4</li>
</ul>
</section>
</nav>
</div>
</div>
Update:
I created jsFiddle based on Foundation Example
If the browser size is big, the navigation width changes. But I want it to be centered fixed as main content.
As the Foundation 4 docs saying :
http://foundation.zurb.com/docs/components/top-bar.html
If you want your navigation to be set to your grid width, wrap it in
div class="contain-to-grid".
So try using the following :
<div class="contain-to-grid">
<!-- Your nav bar -->
<nav class="top-bar">
<ul class="title-area">
<!-- Title area here... -->
</ul>
<section class="top-bar-section">
<ul class="left">
<!-- Title area here... -->
</ul>
<ul class="right">
<!-- Title area here... -->
</ul>
</section>
</nav>
</div>
Hope this helps !
If I understand correctly what you want, you just need to wrap your nav.top-bar element in a div with class contain-to-grid.
<div class="row">
<div class="contain-to-grid">
<nav class="top-bar">
<ul class="title-area">
...
</ul>
<section class="top-bar-section">
<ul class="left">
<li>Link 1</li>
<li>Link 2</li>
</ul>
<ul class="right">
<li>Link 3</li>
<li>Link 4</li>
</ul>
</section>
</nav>
</div>
</div>
The foundation framework allows nested rowthe first <div class="row"> get the width of the page but you can put another <div class="row">into it which is going a smaller 12-columns-max-width.
You can check the docs related to this feature here : http://foundation.zurb.com/docs/components/grid.html
Are you sure the row you paste in the question is the first one in your HTML code ? If it is, can you paste a link for a demo of your code please?
EDIT
If i understand it rights, it pretty simple to do with CSS :
.top-bar {
max-width: 900px;
margin:auto;
}
<div class="contain-to-grid">
<nav class="top-bar" data-topbar role="navigation">
<div class="row">
<div class="large-12 columns">
<ul class="menu" data-responsive-menu="accordion">
<li>1
</li>
<li>2
</li>
<li>3
</li>
<li>4
</li>
</ul>
</div>
</div>
</nav>