Difference between revisions of "Template:William and Mary/NAV BAR"

Line 1: Line 1:
−
<html lang='en'>    
+
<html lang='en'>
 +
<head>
 +
<script>
 +
$(document).ready(function() {
 +
        // Transition effect for navbar
 +
        $(window).scroll(function() {
 +
          // checks if window is scrolled more than 500px, adds/removes solid class
 +
          if($(this).scrollTop() > 500) {
 +
              $('.navbar').addClass('solid');
 +
          } else {
 +
              $('.navbar').removeClass('solid');
 +
          }
 +
        });
 +
});
 +
</script>
 +
 
 +
<style>
 +
.navbar {
 +
  height: 80px;
 +
  background-color: transparent;
 +
  border: none;
 +
  color: white;
 +
  z-index: 100;
 +
  transition: background-color 1s ease 0s;
 +
}
 +
</style>
 +
 
 +
</head>
 +
 
 +
<body> 
 
   <nav class="navbar navbar-default navbar-transparent navbar-fixed-top" role="navigation">
 
   <nav class="navbar navbar-default navbar-transparent navbar-fixed-top" role="navigation">
 
<!--"navbar-burger" will create an invisible navbar like the one in our 2015 page-->
 
<!--"navbar-burger" will create an invisible navbar like the one in our 2015 page-->
Line 14: Line 43:
 
</a>
 
</a>
 
</div>
 
</div>
−
<div class="collapse navbar-collapse">
+
<div id="navbar" class="collapse navbar-collapse">
 
<ul class="nav navbar-nav navbar-right navbar-uppercase">
 
<ul class="nav navbar-nav navbar-right navbar-uppercase">
 
<!--li class="social-links">
 
<!--li class="social-links">
Line 73: Line 102:
 
</div>
 
</div>
 
     </nav>
 
     </nav>
 +
</body>
 
</html>
 
</html>

Revision as of 16:31, 9 July 2018