.sticky%nav.top-bar(data-topbarrole="navigation"data-options="sticky_on: [small, medium, large]")
%ul.plm.title-area%li.name%img.logo(src="dyson_sphere/launch-logo.png")
%h1%a
Launch
%strong Academy
%li.toggle-topbar.menu-icon%a(href="#")
%span%section.top-bar-section%ul.left%li%a.menu-item Admin
%li.menu-item%a.menu-item Sign Out
%ul.right%li%a Learn on Campus
%li%a Learn Online
%li%a.btn-pink.cta Apply
By default, fixed headers will be `$la-blue` no matter where you are on the page.
To make your header transparent when at the top of the page, on a particular page,
add the class `.has-transparent-header` to some later element on the page. (I recommend
the first element of the page, such as the hero image or video.)
.contain-to-grid.full-top-bar%nav.top-bar(data-topbarrole="navigation")
%ul.title-area%li.name%img.logo(src="dyson_sphere/launch-logo.png")
%h1%a
Launch
%strong Academy
%li.toggle-topbar.menu-icon%a(href="#")
%span%section.top-bar-section%ul.left%li.has-form.row.collapse.search%form%input.left(id="query"name="query"placeholder="Search"type="text")
%button.search-button(name="button"type="submit")
%i.fa.fa-search
Footer
Here's the code for making the classic Launch footer.
Note: The icky-looking visual bugs you see here (the photos
not existing and looking weird, the content being pressed up right
against the edges, etc.) won't actually be present when you use this
as an actual footer in your site.
To keep your footer at the bottom of the page no matter what,
add a div with the class of `container` right inside your `body` tag,
and wrap all the rest of your content EXCEPT the footer inside this div.