|
|
| Line 1: |
Line 1: |
| | <html lang='en'> | | <html lang='en'> |
| | <head> | | <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() > 100) {
| |
| − | $('.navbar').addClass('solid');
| |
| − | } else {
| |
| − | $('.navbar').removeClass('solid');
| |
| − | }
| |
| − | });
| |
| − | });
| |
| − | </script>
| |
| | | | |
| | <style> | | <style> |
| − | .navbar {
| |
| − | height: 80px;
| |
| − | background-color: transparent;
| |
| − | border: none;
| |
| − | color: white;
| |
| − | z-index: 100;
| |
| − | transition: background-color 1s ease 0s;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | .navbar-default {
| |
| − |
| |
| − | .navbar-brand {
| |
| − | margin-top: 10px;
| |
| − | color: white;
| |
| − |
| |
| − | &:hover {
| |
| − | color: #C57ED3;
| |
| − | border: 1px solid #C57ED3;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | .navbar-nav {
| |
| − |
| |
| − | > li {
| |
| − |
| |
| − | > a {
| |
| − | color: white;
| |
| − | margin: 10px 5px 5px 5px;
| |
| − |
| |
| − | }
| |
| − | > a:hover, > a:active, > a:focus {
| |
| − | color: #C57ED3;
| |
| − | border: 1px solid #C57ED3;
| |
| − | }
| |
| − | > a:visited {
| |
| − | color: #C57ED3;
| |
| − | text-decoration: none;
| |
| − | }
| |
| − |
| |
| − | } //end li
| |
| − |
| |
| − | > .active {
| |
| − |
| |
| − | > a, > a:hover, > a:focus {
| |
| − | background-color: transparent;
| |
| − | color: #C57ED3;
| |
| − | }
| |
| − |
| |
| − | }
| |
| − |
| |
| − | } //end .navbar-nav
| |
| − |
| |
| − | //Collapsed styles
| |
| − | .navbar-toggle {
| |
| − | border-color: #C57ED3;
| |
| − |
| |
| − | &:hover, &:focus {
| |
| − | background-color: #490D40;
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | .icon-bar {
| |
| − | color: #C57ED3;
| |
| − | background-color: #C57ED3;
| |
| − |
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | .navbar-collapse.collapse.in ul {
| |
| − | background-color: #490D40;
| |
| − | }
| |
| − |
| |
| − | } //end .navbar-default
| |
| − |
| |
| − | .navbar-normal{
| |
| − | text-color: green;
| |
| − | background-color: white;
| |
| − | text-size: 15 px;
| |
| − | }
| |
| − | /* Solid class attached on scroll past first sectiont*/
| |
| − |
| |
| − | .navbar.solid {
| |
| − | background-color: #21610B;
| |
| − | <!-- #490D40-->
| |
| − | transition: background-color 1s ease 0s;
| |
| − | box-shadow: 0 0 4px grey;
| |
| − |
| |
| − | .navbar-brand {
| |
| − | color: #C57ED3;
| |
| − | transition: color 1s ease 0s;
| |
| − | }
| |
| − |
| |
| − | .navbar-nav {
| |
| − |
| |
| − | > li {
| |
| − |
| |
| − | > a {
| |
| − | color: #C57ED3;
| |
| − | transition: color 1s ease 0s;
| |
| − | }
| |
| − |
| |
| − | } //end li
| |
| − |
| |
| − | } //end .navbar-nav
| |
| − |
| |
| − | }
| |
| − |
| |
| | .dropdown { | | .dropdown { |
| | position: relative; | | position: relative; |
