Develop Reference

How to get rid of this gap between consecutive <header> and <main>

JSFiddle here.
I have an HTML page where the body consists of a <header> element followed by a <main> element. The problem is that there is a gap/empty-horizontal-space between the <header> and <main> elements, which is neither any padding nor any margin.
I need to get rid of this gap. How do I do that?
body {
background-color: black
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/css/materialize.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/js/materialize.min.js"></script>
<header class="light-blue darken-4">
<div class="row section">
<div class="col s12">
<i class="material-icons">menu</i>
<span class="container">
Logo
</span>
</div>
<!-- .col -->
</div>
<!-- .row -->
<ul id="side-drawer-container" class="side-nav ">
<li>Sass</li>
<li>Components</li>
<li>JavaScript</li>
</ul>
<div class="row">
<div class="col s12">
<ul class="tabs tabs-transparent center">
<li class="tab">All</li>
<li class="tab">ONE</li>
<li class="tab">TWO</li>
<li class="tab">THREE</li>
</ul>
</div>
</div>
</header>
<main>
<div class="row">
<div class="col s12">
<section id="all"></section>
<section id="One">
<div class="row hoverable lime lighten-3">
<div class="col s12">
<ul class="tabs tabs-transparent center lime lighten-3">
<li class="tab">Amy</li>
<li class="tab">Bob</li>
<li class="tab">Anna</li>
<li class="tab">Liv</li>
</ul>
</div>
<!-- .col -->
</div>
<!-- .row -->
<div id="amy">Amy amy</div>
<!-- #amy -->
<div id="bob">Bob bob</div>
<!-- #bob -->
<div id="anna">Anna anna</div>
<!-- #anna -->
<div id="liv">Liv liv</div>
<!-- #liv -->
</section>
<section id="Two">2
</section>
<section id="Three">3
</section>
</div>
</div>
</main>

It's the margin-bottom: 20px on .row creating that gap. It's the result of "margin collapse" because that .row is the last child of header and has a margin that is collapsing outside of header
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
If there is no border, padding, inline content, block_formatting_context created or clearance to separate the margin-top of a block from the margin-top of its first child block, or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block from the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.
You can either just remove that, or add overflow: hidden to header if you want the margin to show up inside of header instead of outside of it.

Bootstrap nav pills- first nav pill data still there when 2nd nav pill active

I am using Bootstrap pills for toggling on the same page. There are two nav-pills and two divs corresponding to each of them.I have constructed the first div correctly and is working fine. But when I am trying to construct the second div, the contents of the first div are hindering in the construction of the second div. For ex: the col-* classes not working properly. In short the data of the first div, although invisible, is still there when I am on the second page.
<ul class="nav nav-pills container-fluid" style = "margin-left:10px;">
<li class="active">Download Data</li>
<li>Metadata</li>
</ul>
<div class="container-fluid tab-content fade in active" id = "homeTab">
....
</div>
<div class="container-fluid tab-content fade" id = "metaTab">
....
</div>

You are misusing tab-content class. It should be wrapped around all tabs, and tabs should have tab-pane class instead, like this:
<ul class="nav nav-pills container-fluid" style = "margin-left:10px;">
<li class="active">Download Data</li>
<li>Metadata</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="container-fluid tab-pane fade in active" id = "homeTab">
...tab 1 content...
</div>
<div role="tabpanel" class="container-fluid tab-pane fade" id = "metaTab">
...tab 2 content...
</div>
</div>
Here is more about tabs in bootstrap: http://getbootstrap.com/javascript/#tabs

You just need to include bootstrap.js
.tab-pane{
position:absolute;
top 200px;
left:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav nav-pills container-fluid" style = "margin-left:10px;">
<li>Download Data</li>
<li>Metadata</li>
</ul>
<div class="tab-pane fade in active" id = "homeTab">
.... FIRST
</div>
<div class="tab-pane fade" id = "metaTab">
.... SECOND
</div>

sticky nav, idk what's going on :\

I am having an issue with my sticky nav. The problem seems to be that my JS is not applying the class I have told it to. you can view it live here http://test.makx.ca
Here is my code.
<script>
$(window).scroll(function() {
var scroll = $(window).scrollTop();
nav = $('.nav-bar').offset();
if (nav.top <= scroll) {
$('.nav-bar').toggleClass('sticky-nav');
} else {}
});
</script>
the HTML
<div class="row nav-row">
<div id="nav-bar" class="medium-12 column nav-bar">
<ul class="links">
<li>home</li>
<li>about us</li>
<li>pricing</li>
<li>contact</li>
</ul>
<ul class="links-right">
<li class="has-form">
<div class="row collapse">
<div class="large-7 small-7 columns">
<input type="text" placeholder="enter text">
</div>
<div class="large-3 small-4 pull-2 columns">
<a href="#" class="search button expand" style="padding-top: 0.6rem;
padding-bottom: 0.6rem;">Search</a>
</div>
</div>
</li>
</ul>
</div>
</div>
the CSS
.sticky-nav {
position: fixed;
top:0;
width: 100%;
display: block;
}
any feedback would be most welcoming. This has me and a friend completely stumped.

You're using the wrong selector. .nav-bar is a class selector, but you want to select the element with the id nav-bar, not the class nav-bar. Use #nav-bar as the selector instead.
Unrelated to your question, but FYI: Your use of toggleClass is going to have some odd results; it will constantly be toggling the class on and off while the user scrolls.

Offseting the content in Angular

Is there a way to have the offcanvas offset my content without actually putting the entirety of my content inside it?
What I mean is, in order of the offcanvas to offset the main content this has to be inside the offcanvas inner-wrap div, however, with angular, this could be difficult to implement.
I'd rather not implement my IndexController inside the OffCanvasController and every other single piece of content.
Is there a way to get the Offcanvas to push the main content to the right as it would normally do, without the need to include said content inside the offcanvas?
I currently have an index.html, a header.html and an offcanvas.html, as follows:
header.html:
<div data-ng-include="'/public/system/views/offcanvas.html'"></div> <!-- This is where the offcanvas is included, before the main navigation -->
<div class="page-header" data-ng-controller="HeaderController">
<div class="desktop">
<ul class="title-area">
<li class="name">
<h1><a ui-sref="home" mean-token="'site-title'">SOL::S</a></h1>
</li>
</ul>
<section class="top-bar-section">
<ul class="left">
<li data-ng-repeat="item in menus.main" ui-route="/{{item.link}}" ng-class="{active: $uiRoute}">
<a mean-token="item.link" ui-sref='{{item.link}}'>{{item.title}}</a>
</li>
</ul>
<div class="account">
<div class="text-edit">
<div data-ng-show="global.authenticated" mean-token-editable></div>
</div>
<ul class="right" data-ng-hide="global.authenticated">
<li><a ui-sref='auth.register'>Register</a></li>
<li><a ui-sref='auth.login'>Login</a></li>
</ul>
<ul class="right" data-ng-show="global.authenticated">
<li class="has-dropdown">
{{global.user.name}}
<ul class="dropdown">
<li>Logout</li>
</ul>
</li>
</ul>
</div>
</section>
</div>
</div>
offcanvas.html
<div class="off-canvas-wrap mobile" data-ng-controller="offCanvasCtrl">
<div class="inner-wrap">
<nav class="tab-bar">
<section class="left-small">
<a class="left-off-canvas-toggle menu-icon" ><span></span></a>
</section>
<section class="middle tab-bar-section">
<h1 class="title">SOL ::</h1>
</section>
</nav>
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li>Left Sidebar</li>
<li>Left Sidebar</li>
<li>Left Sidebar</li>
</ul>
</aside>
<section class="main-section">
<div class="small-12 columns">
<h1>How to use</h1>
<p>Just use the standard layout for an offcanvas page as documented in the foundation docs</p>
<p>As long as you include mm.foundation.offcanvas it should simply work</p>
</div>
</section>
<a class="exit-off-canvas"></a>
</div>
</div>
And finally, index.html
<div class="container content" data-ng-controller="IndexController"> <!-- Main container and IndexController -->
<section> <!-- Site tag section -->
<div class="row"> <!-- Site tag row -->
<div class="small-12 columns">
<h1 mean-token="'home-default'">SOL :: Search</h1>
</div>
</div> <!-- End site tag row -->
</section> <!-- End site tag section -->
<section> <!-- Logo section -->
<div class="row"> <!-- Logo row -->
<div class="small-10 columns text-center logo-container small-offset-1"> <!-- Logo column -->
<a ui-sref="about" title="SOL"><img ng-src="{{logo}}" alt="SOL Logo"></a>
</div> <!-- End logo column -->
</div> <!-- End logo row -->
</section> <!-- End logo section -->
<section> <!-- Search input section -->
<div class="row"> <!-- Search row -->
<div class="small-8 columns small-offset-2"> <!-- Search column -->
<form>
<div class="row collapse"> <!-- Input group -->
<div class="large-9 columns">
<input type="text" placeholder="" class="form-control main-search-input">
</div>
<div class="small-3 columns">
Search
</div>
</div>
</form>
</div><!-- End input group -->
</div><!-- End search column -->
</div><!-- End search row -->
</section> <!-- End search input section -->
</div> <!-- End IndexController -->
The offcanvas.html is called in the first line of the header.html via a ng-include and the header.html itself is also called with a ng-include as an attribute of the nav element (which is in the index.html on the server side).
It all works wonderfully, except that, in order for the offcanvas to push the content to the right, I would need to include all the content inside this. I'd rather not do that, is there any other way?

Stick a div when using Foundation

I want to stick a div on top when scrolling the window.
Looks like Magellan of Foundation provides similar behavior. But I want to stick my custom elements(the div with attribute data-magellan-expedition="fixed") on top instead of Sub-Nav in Magellan's example.
<body>
<!-- Header and Nav -->
<nav id="nav" class="top-bar">
<ul class="title-area">
<!-- Title Area -->
<li class="name">
<h1>
<a href="#">
Foundation Magellan
</a>
</h1>
</li>
<li class="toggle-topbar menu-icon"><span>Sitemap</span></li>
</ul>
<section class="top-bar-section">
<!-- Left Nav Section -->
<ul class="left">
<li class="divider"></li>
<li class="active" >Item1</li>
</ul>
<!-- Right Nav Section -->
<ul class="right">
<li class="divider"></li>
<li>Login</li>
</ul>
</section>
</nav>
<!-- End Header and Nav -->
<!-- Main Feed -->
<div data-magellan-expedition="fixed" >
<div id="calendar" class="row">
<dl id="calendar-per-day" class="sub-nav">
<script>
someCodeToCreateCalendar();
</script>
</dl>
<hr>
</div>
<div class="row">
<div class="large-12 columns">
<div id="baidumap"
style="height:300px; overflow: hidden; margin: 0;"></div>
</div>
</div>
</div>
<div class="row">
<div class="large-9 columns">
<p>
very long content can be scrolled............
</p>
</div>
<div class="large-3 columns">
<div class="row">
<div class="large-11 large-centered columns">
<h4>Right side content</h4>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer id="footer" class="row">
<div class="large-12 columns">
<hr />
<div class="row">
<div class="large-5 columns">
<p>© 2013 All Rights Reserved</p>
</div>
<div class="large-7 columns">
<ul class="inline-list right">
<li>About</li>
</ul>
</div>
</div>
</div>
</footer>
<script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.0.2/js/foundation/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
There is full my code to try my thought. I want the calendar and map always stick on top when scrolling the window. But it does not work at all. Does anybody know how to do it?

Use CSS
.div-to-stick {
postion:fixed;
}
This will stick it to the top of the page on scroll.