sticky menu implementation
davvalent commited on 2024-05-18 04:33:13
Showing 4 changed files, with 67 additions and 3 deletions.
- wp-content/themes/rookie/framework.css fcc0458..f57b4a6
- wp-content/themes/rookie/inc/template-tags.php 754cf66..b45a7bf
- wp-content/themes/rookie/js/scripts.js 631bc9d..f01377b
- wp-content/themes/rookie/style.css 308608c..f18c2a0
| ... | ... |
@@ -623,9 +623,12 @@ select {
|
| 623 | 623 |
width: auto; |
| 624 | 624 |
} |
| 625 | 625 |
|
| 626 |
-/** Modification */ |
|
| 626 |
+/** |
|
| 627 |
+ * MODIFS |
|
| 628 |
+ * Modification |
|
| 629 |
+ */ |
|
| 627 | 630 |
.site-branding {
|
| 628 |
- margin: 1.75em auto 0; |
|
| 631 |
+ margin: 0 auto 0; |
|
| 629 | 632 |
padding: 1.75em 1,25%; /* Initial = padding: 1.75em 0 */ |
| 630 | 633 |
} |
| 631 | 634 |
|
| ... | ... |
@@ -2201,7 +2204,7 @@ object {
|
| 2201 | 2204 |
border-bottom: none; |
| 2202 | 2205 |
} |
| 2203 | 2206 |
|
| 2204 |
- #buddypress div.item-list-tabs#object-nav ul li {;
|
|
| 2207 |
+ #buddypress div.item-list-tabs#object-nav ul li {
|
|
| 2205 | 2208 |
margin-bottom: 0; |
| 2206 | 2209 |
} |
| 2207 | 2210 |
|
| ... | ... |
@@ -67,6 +67,7 @@ if ( ! function_exists( 'rookie_header_menu' ) ) : |
| 67 | 67 |
function rookie_header_menu( $options = array() ) {
|
| 68 | 68 |
?> |
| 69 | 69 |
<div class="site-menu"> |
| 70 |
+ <div id="sliding-bar" class="sliding-bar"></div> |
|
| 70 | 71 |
<nav id="site-navigation" class="main-navigation" role="navigation"> |
| 71 | 72 |
<button class="menu-toggle" aria-controls="menu" aria-expanded="false"><span class="dashicons dashicons-menu"></span></button> |
| 72 | 73 |
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?> |
| ... | ... |
@@ -6,3 +6,28 @@ |
| 6 | 6 |
( function( $ ) {
|
| 7 | 7 |
$('.comment-metadata time').timeago();
|
| 8 | 8 |
} )( jQuery ); |
| 9 |
+ |
|
| 10 |
+// sticky menu |
|
| 11 |
+// When the user scrolls the page, execute myFunction |
|
| 12 |
+window.onscroll = function() {myFunction()};
|
|
| 13 |
+ |
|
| 14 |
+// Get the navbar |
|
| 15 |
+let navbar = document.getElementById("site-navigation"),
|
|
| 16 |
+ header = document.getElementById("masthead"),
|
|
| 17 |
+ width = document.getElementById("sliding-bar");
|
|
| 18 |
+ |
|
| 19 |
+// Get the offset position of the navbar |
|
| 20 |
+let sticky = 170; |
|
| 21 |
+ |
|
| 22 |
+// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position |
|
| 23 |
+function myFunction() {
|
|
| 24 |
+ if (window.scrollY >= sticky) {
|
|
| 25 |
+ navbar.classList.add("sticky-nav-bar");
|
|
| 26 |
+ header.classList.add("sticky-container");
|
|
| 27 |
+ width.classList.add("width");
|
|
| 28 |
+ } else {
|
|
| 29 |
+ navbar.classList.remove("sticky-nav-bar");
|
|
| 30 |
+ header.classList.remove("sticky-container");
|
|
| 31 |
+ width.classList.remove("width");
|
|
| 32 |
+ } |
|
| 33 |
+} |
|
| 9 | 34 |
\ No newline at end of file |
| ... | ... |
@@ -843,6 +843,41 @@ a:hover .page-title:hover {
|
| 843 | 843 |
background: #00a69c; |
| 844 | 844 |
} |
| 845 | 845 |
|
| 846 |
+/* STICKY MENU */ |
|
| 847 |
+ |
|
| 848 |
+.main-navigation {
|
|
| 849 |
+ z-index: 3; |
|
| 850 |
+ position: relative; |
|
| 851 |
+} |
|
| 852 |
+ |
|
| 853 |
+.sticky-nav-bar {
|
|
| 854 |
+ position: fixed; |
|
| 855 |
+ top: 0; |
|
| 856 |
+ z-index: 15000; |
|
| 857 |
+} |
|
| 858 |
+ |
|
| 859 |
+/* 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) */ |
|
| 860 |
+header.sticky-container + div {
|
|
| 861 |
+ padding-top: 45px; |
|
| 862 |
+} |
|
| 863 |
+ |
|
| 864 |
+.sliding-bar {
|
|
| 865 |
+ height: 52px; |
|
| 866 |
+ width: 0%; |
|
| 867 |
+ background-color: #c92a2e; |
|
| 868 |
+ transition: width 1s cubic-bezier(.53,.57,.98,.34); |
|
| 869 |
+ position: absolute; |
|
| 870 |
+ z-index: 1; |
|
| 871 |
+ box-shadow: 0 5px 3px rgba(0, 0, 0, 0.2); |
|
| 872 |
+} |
|
| 873 |
+ |
|
| 874 |
+.width {
|
|
| 875 |
+ width: 100%; |
|
| 876 |
+ position: fixed; |
|
| 877 |
+ top: 0; |
|
| 878 |
+ z-index: 15000; |
|
| 879 |
+} |
|
| 880 |
+ |
|
| 846 | 881 |
/* Media Queries */ |
| 847 | 882 |
@media screen and (max-width: 600px) {
|
| 848 | 883 |
.main-navigation .nav-menu > li:hover > a, |
| 849 | 884 |