JSFiddle - React, Tailwind, and code Playground
by Shanna Barnard
HTML
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<div class="view-container">
<!-- ngView: --><div data-ng-view="" class="view-frame ng-scope"><!-- ngInclude: --><div data-ng-include="" src="'partials/navbar_sub.html'" class="ng-scope"><!-- ugh...code dup...need the bootstrap attribute in navbar for mainpage -->
<!-- and no scrollspy otherwise -->
<!-- merge this with other navbar, as otherwise they are the same -->
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top navbar-shrink ng-scope">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#page-top">The LilyPond Consortium</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
<a href="#page-top"></a>
</li>
<li class="hidden">
<a href="#mission"></a>
</li>
<li>
<a href="#services">Services</a>
</li>
<li>
<a href="#members">Members</a>
</li>
<li>
<a href="#projects">Projects</a>
</li>
<li>
...