misc scrollspy fixes and styling fixes

assets/js/custom.js

@@ -2,31 +2,31 @@ jQuery(function ($) {
 
     // Getting links from a page and turning them into a scroll-spy bespoke menu
 
-    // FIXME when page loads with #... in url, the scroll spy gets messed up. 
 
-    let links;
-
-    links = document.querySelectorAll("#one, #two, #three, #four, #fivenav_menu-7")
+    let sections;
+    sections = document.querySelectorAll(".add-to-sidebar")
 
     let url = window.location.href;
 
+    // Create the correct menu
     let innerContent = "";
-
-    links.forEach(link => {
-        let fullUrl = url + "#" + link.id;
-        innerContent += "<li><a href=\"" + fullUrl + " \" class=''>" + link.attributes.name.value + "</a></li>"
+    sections.forEach(link => {
+        let itemTitle = link.querySelector("h2:first-of-type");
+        if (itemTitle) {
+          link.setAttribute("id", itemTitle.id)
+          let fullUrl = url.split("#")[0] + "#" + itemTitle.id;
+          innerContent += "<li><a href=\"" + fullUrl + " \" class=''>" + itemTitle.innerText + "</a></li>"
+        }
     });
 
-    console.log(innerContent)
-
+    // Update existing menu with the created one 
     let menu;
     menu = document.getElementById("menu-scroll-spy");
-
     menu.innerHTML = innerContent
 
 
     // Activate Scrollspy
-    $('.entry-content').scrollspy({
+    $('body').scrollspy({
       target: '#nav_menu-4'
     });
 
@@ -38,8 +38,6 @@ jQuery(function ($) {
     $('[data-spy="scroll"]').each(function () {
       $(this).scrollspy("refresh");
     });
-  
-
     });
 
 
@@ -47,7 +45,6 @@ jQuery(function ($) {
   document.addEventListener("DOMContentLoaded", function(event) {
     var elements = document.querySelectorAll('.view-team-member-button');
   
-  
       elements.forEach(function(element) {
       element.addEventListener('click', function() {
   

assets/scss/_bootscore-custom.scss

@@ -21,11 +21,31 @@
     }
 }
 
+
 /* Is required to show the svg logo */
 .navbar-brand {
     width: 150px;
 }
 
+.offcanvas-body #bootscore-navbar {
+    li {
+        border-top: 1px dotted #fff;
+        padding: 0.5rem 0;
+        &:last-of-type {
+            border-bottom: 1px dotted #fff;
+        }
+    }
+}
+
+
+@include media-breakpoint-up(lg) { 
+    .offcanvas-body #bootscore-navbar {
+        li, 
+        li:last-of-type {
+            border-color: transparent;
+        }
+    }
+}
 
 /* CUSTOM BLOCK MOBILE SUPPORT */
 @include media-breakpoint-up(md) {
@@ -181,6 +201,7 @@
 #sidebar {
     // padding-left: 8rem;
     // padding-right: 2rem;
+    top: 30px;
     font-size: 24px;
     position: sticky;
     a:not(.active) {
@@ -188,7 +209,6 @@
     }
     li {
         border-top: 1px dotted #000;
-        // border-bottom:
         padding: 0.5rem 0;
         &:last-of-type {
             border-bottom: 1px dotted #000;
@@ -392,3 +412,11 @@ body:not(.wp-admin) .wp-block-group.team {
     }
 }
 
+.add-to-sidebar {
+    position: relative;
+    height: 100%;
+}
+
+body:not(.wp-admin) {
+    --wp--style--global--content-size: 100%;
+}

assets/scss/_bootscore-variables.scss

@@ -65,3 +65,9 @@ $container-max-widths: (
   xl: 1140px,
   xxl: 1400px
 );
+
+
+
+$offcanvas-bg-color: 				$primary;
+$offcanvas-color:                   #fff;
+

functions.php

@@ -230,3 +230,4 @@ function my_fancy_filter_function() {
   return "featured-full-width-img bg-dark text-light mb-5";
 }
 add_filter('bootscore/class/featured-full-width-img', 'my_fancy_filter_function', 10, 2);
+