Skip to content
Snippets Groups Projects
Unverified Commit 714bd6cb authored by weaver299's avatar weaver299 Committed by GitHub
Browse files

Merge pull request #335 from ASCWebServices/canini-2 

adding js and styles for sticky nav
parents 450ffaa2 dda73734
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 @ 714bd6cb
......@@ -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 @ 714bd6cb
......@@ -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 @ 714bd6cb
......@@ -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