Skip to content
Snippets Groups Projects
Commit dda73734 authored by Brian Canini's avatar Brian Canini
Browse files

adding js and styles for sticky nav

parent 450ffaa2
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
web/themes/asc_bootstrap/assets/sass/components/_menu.scss
+ 20
− 1
View file @ dda73734
......@@ -4,7 +4,8 @@
#main-nav {
background-color: #373535;
position: relative;
position: -webkit-sticky;
position: sticky;
z-index: 50;
}
......@@ -173,6 +174,24 @@
// --------------------------------------------------
//## Sticky Nav.
/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
position: fixed;
top: 0;
width: 100%;
}
/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
padding-top: 60px;
}
// --------------------------------------------------
//## Mobile styles.
......
web/themes/asc_bootstrap/css/style.css
+ 62
− 47
View file @ dda73734
......@@ -11560,27 +11560,28 @@ article .field--name-body {
/* line 5, ../assets/sass/components/_menu.scss */
#main-nav {
background-color: #373535;
position: relative;
position: -webkit-sticky;
position: sticky;
z-index: 50;
}
/* line 11, ../assets/sass/components/_menu.scss */
/* line 12, ../assets/sass/components/_menu.scss */
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
background: transparent;
color: #333333;
}
/* line 16, ../assets/sass/components/_menu.scss */
/* line 17, ../assets/sass/components/_menu.scss */
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
background-color: transparent;
}
/* line 20, ../assets/sass/components/_menu.scss */
/* line 21, ../assets/sass/components/_menu.scss */
.dropdown-submenu.pull-left {
float: none;
}
/* line 24, ../assets/sass/components/_menu.scss */
/* line 25, ../assets/sass/components/_menu.scss */
.dropdown-submenu.pull-left > .dropdown-menu {
left: -100%;
margin-left: 10px;
......@@ -11590,51 +11591,51 @@ article .field--name-body {
border-radius: 6px 0 6px 6px;
}
/* line 30, ../assets/sass/components/_menu.scss */
/* line 31, ../assets/sass/components/_menu.scss */
.navbar-nav li:last-child > .dropdown-menu .dropdown-submenu > a:after {
float: left;
content: "\e079";
}
/* line 34, ../assets/sass/components/_menu.scss */
/* line 35, ../assets/sass/components/_menu.scss */
.navbar-nav li:last-child > .dropdown-menu .dropdown-submenu > .dropdown-menu {
left: -100%;
}
/* line 40, ../assets/sass/components/_menu.scss */
/* line 41, ../assets/sass/components/_menu.scss */
#superfish-main.sf-style-white {
margin-bottom: 0;
}
/* line 43, ../assets/sass/components/_menu.scss */
/* line 44, ../assets/sass/components/_menu.scss */
#superfish-main.sf-style-white a {
text-transform: uppercase;
color: #ffffff;
text-decoration: none;
font-weight: 400;
}
/* line 49, ../assets/sass/components/_menu.scss */
/* line 50, ../assets/sass/components/_menu.scss */
#superfish-main.sf-style-white a:hover {
background: rgba(216, 216, 216, 0.25);
}
/* line 54, ../assets/sass/components/_menu.scss */
/* line 55, ../assets/sass/components/_menu.scss */
#superfish-main.sf-style-white li {
background: transparent;
}
/* line 57, ../assets/sass/components/_menu.scss */
/* line 58, ../assets/sass/components/_menu.scss */
#superfish-main.sf-style-white li ul {
background: #E0E0E0;
}
/* line 60, ../assets/sass/components/_menu.scss */
/* line 61, ../assets/sass/components/_menu.scss */
#superfish-main.sf-style-white li ul a {
color: #4A4A4A;
text-transform: capitalize;
}
/* line 64, ../assets/sass/components/_menu.scss */
/* line 65, ../assets/sass/components/_menu.scss */
#superfish-main.sf-style-white li ul a:hover {
background: #BB0000;
color: #ffffff;
}
/* line 72, ../assets/sass/components/_menu.scss */
/* line 73, ../assets/sass/components/_menu.scss */
#superfish-main.sf-style-white .sfHover a.sf-depth-1:after {
content: '';
position: absolute;
......@@ -11646,20 +11647,20 @@ article .field--name-body {
border-right: 8px solid transparent;
z-index: 400;
}
/* line 85, ../assets/sass/components/_menu.scss */
/* line 86, ../assets/sass/components/_menu.scss */
#superfish-main.sf-style-white a.sf-depth-1 svg, #superfish-main.sf-style-white a.sf-depth-1 i {
display: none;
}
/* line 90, ../assets/sass/components/_menu.scss */
/* line 91, ../assets/sass/components/_menu.scss */
#superfish-main.sf-style-white a.sf-with-ul {
padding: 0.75em 1em;
}
/* line 94, ../assets/sass/components/_menu.scss */
/* line 95, ../assets/sass/components/_menu.scss */
#superfish-main.sf-style-white svg, #superfish-main.sf-style-white i {
float: right;
}
/* line 99, ../assets/sass/components/_menu.scss */
/* line 100, ../assets/sass/components/_menu.scss */
.search-box {
background: #E8E8E4;
position: absolute;
......@@ -11672,7 +11673,7 @@ article .field--name-body {
border-top: 4px solid #D80B15;
display: none;
}
/* line 111, ../assets/sass/components/_menu.scss */
/* line 112, ../assets/sass/components/_menu.scss */
.search-box:before {
content: "";
position: absolute;
......@@ -11683,7 +11684,7 @@ article .field--name-body {
border-top: 14px solid transparent;
border-bottom: 14px solid #D80B15;
}
/* line 122, ../assets/sass/components/_menu.scss */
/* line 123, ../assets/sass/components/_menu.scss */
.search-box input[type="text"] {
width: 200px;
padding: 5px 10px;
......@@ -11691,7 +11692,7 @@ article .field--name-body {
border: 1px solid #D80B15;
outline: none;
}
/* line 130, ../assets/sass/components/_menu.scss */
/* line 131, ../assets/sass/components/_menu.scss */
.search-box input[type="button"] {
width: 80px;
padding: 5px 0;
......@@ -11703,22 +11704,22 @@ article .field--name-body {
cursor: pointer;
}
/* line 142, ../assets/sass/components/_menu.scss */
/* line 143, ../assets/sass/components/_menu.scss */
#superfish-main {
width: 95%;
}
/* line 146, ../assets/sass/components/_menu.scss */
/* line 147, ../assets/sass/components/_menu.scss */
#superfish-main.sf-style-white a:focus {
color: #373535;
}
/* line 149, ../assets/sass/components/_menu.scss */
/* line 150, ../assets/sass/components/_menu.scss */
#superfish-main.sf-style-white a:hover {
color: #ffffff;
}
/* line 159, ../assets/sass/components/_menu.scss */
/* line 160, ../assets/sass/components/_menu.scss */
#main-nav-menubar-instructions {
background-color: rgba(0, 0, 0, 0.9);
position: absolute;
......@@ -11729,118 +11730,132 @@ article .field--name-body {
display: none;
width: 450px;
}
/* line 169, ../assets/sass/components/_menu.scss */
/* line 170, ../assets/sass/components/_menu.scss */
#main-nav-menubar-instructions p {
color: #ffffff;
}
/* The sticky class is added to the navbar with JS when it reaches its scroll position */
/* line 182, ../assets/sass/components/_menu.scss */
.sticky {
position: fixed;
top: 0;
width: 100%;
}
/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
/* line 189, ../assets/sass/components/_menu.scss */
.sticky + .content {
padding-top: 60px;
}
@media (max-width: 768px) {
/* line 182, ../assets/sass/components/_menu.scss */
/* line 201, ../assets/sass/components/_menu.scss */
#main-nav .container {
padding-left: 0;
padding-right: 0;
}
/* line 186, ../assets/sass/components/_menu.scss */
/* line 205, ../assets/sass/components/_menu.scss */
#main-nav .container:after {
content: "";
display: none;
}
/* line 190, ../assets/sass/components/_menu.scss */
/* line 209, ../assets/sass/components/_menu.scss */
#main-nav .container .clearfix:after {
content: "";
display: none;
}
/* line 196, ../assets/sass/components/_menu.scss */
/* line 215, ../assets/sass/components/_menu.scss */
div.sf-accordion-toggle.sf-style-white > a:after {
content: "";
display: none;
}
/* line 200, ../assets/sass/components/_menu.scss */
/* line 219, ../assets/sass/components/_menu.scss */
ul.sf-menu.sf-accordion.sf-accordion-with-buttons li.sf-expanded > .sf-accordion-button:after {
content: "";
display: none;
}
/* line 205, ../assets/sass/components/_menu.scss */
/* line 224, ../assets/sass/components/_menu.scss */
#block-dummyheader img {
width: 100%;
}
/* line 209, ../assets/sass/components/_menu.scss */
/* line 228, ../assets/sass/components/_menu.scss */
div.sf-accordion-toggle.sf-style-white a {
background: transparent;
border: none;
font-size: 30px;
}
/* line 214, ../assets/sass/components/_menu.scss */
/* line 233, ../assets/sass/components/_menu.scss */
div.sf-accordion-toggle.sf-style-white a span {
display: none;
}
/* line 219, ../assets/sass/components/_menu.scss */
/* line 238, ../assets/sass/components/_menu.scss */
div.sf-accordion-toggle.sf-style-white a.sf-expanded {
background: transparent;
}
/* line 223, ../assets/sass/components/_menu.scss */
/* line 242, ../assets/sass/components/_menu.scss */
ul.sf-menu.sf-accordion.sf-accordion-with-buttons .sf-accordion-button:after {
content: "";
margin: 0;
}
/* line 228, ../assets/sass/components/_menu.scss */
/* line 247, ../assets/sass/components/_menu.scss */
ul.sf-menu.sf-style-white.sf-accordion li.sf-expanded {
background: #F5F5F5;
}
/* line 232, ../assets/sass/components/_menu.scss */
/* line 251, ../assets/sass/components/_menu.scss */
ul.sf-menu.sf-style-white li, ul.sf-menu.sf-style-white.sf-navbar {
border: solid 1px #979797;
}
/* line 236, ../assets/sass/components/_menu.scss */
/* line 255, ../assets/sass/components/_menu.scss */
ul.sf-menu.sf-style-white.sf-accordion li li a, ul.sf-menu.sf-style-white.sf-accordion li li span.nolink {
background: #E0E0E0;
}
/* line 240, ../assets/sass/components/_menu.scss */
/* line 259, ../assets/sass/components/_menu.scss */
ul.sf-menu.sf-style-white a, ul.sf-menu.sf-style-white a:visited, ul.sf-menu.sf-style-white span.nolink {
color: #373735;
}
/* line 245, ../assets/sass/components/_menu.scss */
/* line 264, ../assets/sass/components/_menu.scss */
.sf-menu .sf-depth-1 a {
text-transform: uppercase;
font-weight: 600;
font-size: 18px;
}
/* line 251, ../assets/sass/components/_menu.scss */
/* line 270, ../assets/sass/components/_menu.scss */
.sf-menu .sf-depth-2 a {
text-transform: capitalize;
font-weight: 400;
}
/* line 256, ../assets/sass/components/_menu.scss */
/* line 275, ../assets/sass/components/_menu.scss */
.sf-menu .hidetxt {
position: absolute;
left: -99999999px;
width: 0;
height: 0;
}
/* line 263, ../assets/sass/components/_menu.scss */
/* line 282, ../assets/sass/components/_menu.scss */
.sf-menu .sf-accordion-button {
padding: 5px 15px 0;
border-left: solid 1px #979797 !important;
background: #E0E0E0 !important;
}
/* line 268, ../assets/sass/components/_menu.scss */
/* line 287, ../assets/sass/components/_menu.scss */
.sf-menu .sf-accordion-button svg, .sf-menu .sf-accordion-button i {
font-size: 18px;
color: #BB0000;
}
/* line 275, ../assets/sass/components/_menu.scss */
/* line 294, ../assets/sass/components/_menu.scss */
div.sf-accordion-toggle.sf-style-white a {
padding: .05em .5em;
}
......
web/themes/asc_bootstrap/js/scripts.js
+ 18
− 0
View file @ dda73734
......@@ -228,3 +228,21 @@ jQuery(document).ready(function(){
// var test = new a11yNavbar('main-nav', options);
// });
// When the user scrolls the page, execute myFunction
window.onscroll = function() {myFunction()};
// Get the navbar
var navbar = document.getElementById("main-nav");
// Get the offset position of the navbar
var sticky = navbar.offsetTop;
// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment