Difference between revisions of "Team:British Columbia/Human Practices"

m
m
Line 49: Line 49:
 
}
 
}
  
−
.affix {
+
.anchor {
 +
  padding-top: 40px;
 +
}
 +
 
 +
.anchor p {
 +
  padding-left: 10px;
 +
  text-align: left;
 +
}
 +
 
 +
#side-menu .affix {
 
   top: 100px;
 
   top: 100px;
 
}
 
}
Line 66: Line 75:
  
 
$(document).ready(function() {
 
$(document).ready(function() {
−
$('#nav-wrapper').height($(".sidebar-nav").height());
+
 
−
   
+
 
$('.sidebar-nav').affix({
 
$('.sidebar-nav').affix({
−
   offset: { top: $('.sidebar-nav').offset().top }
+
   offset: { top: $('.nav-green').offset().top }
 
});
 
});
  
Line 111: Line 119:
 
   <div class="row">
 
   <div class="row">
 
     <nav class="col-sm-3" id="side-menu">
 
     <nav class="col-sm-3" id="side-menu">
−
       <ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
+
       <ul class="nav nav-pills nav-stacked">
−
         <li class="active"><a href="#who">Who We Are</a></li>
+
         <li class="active"><a href="#who-we-are">Who We Are</a></li>
 
         <li><a href="#background">Background</a></li>
 
         <li><a href="#background">Background</a></li>
 
         <li><a href="#sci-comm">Science Communication</a></li>
 
         <li><a href="#sci-comm">Science Communication</a></li>
Line 118: Line 126:
 
     </nav>
 
     </nav>
 
     <div class="col-sm-9">
 
     <div class="col-sm-9">
−
       <div id="who">
+
       <div id="who-we-are">
 
         <h1>Section 1</h1>
 
         <h1>Section 1</h1>
 
         <p>Try to scroll this section and look at the navigation list while scrolling!</p>
 
         <p>Try to scroll this section and look at the navigation list while scrolling!</p>

Revision as of 21:38, 16 October 2016

Main CSS Navbar CSS

Bootstrap Example

Human Practices

Section 1

Try to scroll this section and look at the navigation list while scrolling!

Section 2

Try to scroll this section and look at the navigation list while scrolling!

Section 3

Try to scroll this section and look at the navigation list while scrolling!