Question regarding features

Martin Weisbach

• July 30, 2026 10:08

Hello!
I have a new client (https://www.annes-haarwerkstatt.de). I would like to rebuild the existing website using Brizy as part of the onboarding process. However, I am unsure how to implement two specific features—or if it is even possible—using Brizy:
- A menu that indicates the "active state" for the corresponding section as the user scrolls through the page.
- A full-width parallax image gallery located between the "Team" and "Termin" sections.
Is it possible to implement these features? Could you provide some guidance on how to do so?
Many thanks and best regards,
Martin

0

• 

  Ariel H.

  • July 30, 2026 13:02

  Hi Martin,

  Yes, both features can be implemented in Brizy.

  The active menu state while scrolling can be achieved using CSS IDs for the relevant sections, together with some custom CSS and JavaScript. The full-width parallax image gallery can also be recreated using Brizy’s background and layout options. Have a look at https://staging.brizywp.site/wp/

  Would you like me to prepare a screencast showing how both features can be implemented?

  Best regards,
  Ariel H.

  0
• 

  Martin Weisbach

  • July 30, 2026 13:42

  Hi Ariel,

  a screencast would be fantastic!

  Thanks a lot and best regards,

  Martin

  0
• 

  Ariel H.

  • July 31, 2026 08:58

  Hi Martin,

  I’ll upload the screencast within the next hour and share it with you as soon as it’s ready.

  Best regards,
  Ariel H.

  0
• 

  Ariel H.

  • July 31, 2026 13:07

  Hi Martin,

  Here are the CSS and JavaScript snippets needed to achieve the design and functionality you requested.

  Add the following CSS under Appearance > Customize >  Additional CSS:

  html {
      /* Smooth transition when jumping to anchor links */
      scroll-behavior: smooth;
  }
  
  /* menu active state */
  .brz-menu a.scroll-active {
      /* Dark gray text for active link */
      color: #666666 !important;
      /* Sage green underline for active link */
      border-bottom: 2px solid #7ca384 !important; 
  }
  
  .brz-menu a.scroll-active .brz-span {
      /* Force inner span text to match active color */
      color: #666666 !important;
  }
  
  .brz-menu a {
      /* Invisible border to prevent text shifting on active state */
      border-bottom: 2px solid transparent;
  }
  
  /* Display Team social icons on hover */
  
  
  /* Initial state for socials */
  #team .socials {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
  }
  
  /* Hover state on the team container */
  #team:hover .socials {
    opacity: 1;
  }

  For the JavaScript, add an Embed element to the footer, then copy and paste the following code into it:

  <script>
  // Wait for HTML document to fully load before running script
  document.addEventListener('DOMContentLoaded', function () {
      // List of section IDs to track in the navigation
      const sectionIds = [
          'home',
          'about',
          'whatwedo',
          'team',
          'gallery',
          'contact'
      ];
  
      // Map section IDs to their corresponding DOM section and menu link elements
      const items = sectionIds.map(function (id) {
          return {
              section: document.getElementById(id),
              // Match links targeting `#id` or ending with `#id` (full URLs)
              link: document.querySelector(
                  '.brz-menu a[href="#' + id + '"], ' +
                  '.brz-menu a[href$="#' + id + '"]'
              )
          };
      }).filter(function (item) {
          // Keep only items where both section and link exist on the page
          return item.section && item.link;
      });
  
      // Check scroll position and highlight the current active menu item
      function updateActiveMenu() {
          // Current scroll position offset by 180px for earlier triggering
          const scrollPosition = window.scrollY + 180;
          let activeItem = items[0];
  
          // Find the lowest section on the page that has been scrolled past
          items.forEach(function (item) {
              if (item.section.offsetTop <= scrollPosition) {
                  activeItem = item;
              }
          });
  
          // Remove active class from all menu links
          items.forEach(function (item) {
              item.link.classList.remove('scroll-active');
          });
  
          // Add active class to the current section's link
          if (activeItem) {
              activeItem.link.classList.add('scroll-active');
          }
      }
  
      // Run active menu check when scrolling or resizing the window
      window.addEventListener('scroll', updateActiveMenu);
      window.addEventListener('resize', updateActiveMenu);
  
      // Initial check on page load
      updateActiveMenu();
  });
  </script>

  These scripts are designed for a one-page website similar to the example you provided.

  For more information, please refer to the following screencast:
  https://youtu.be/p0GIAveItbI

  You have administrator access to the staging site, so you can inspect how it was built. Please use your email address to reset the password and receive your login credentials:

  https://pfotchensalon.brizywp.site/wp-login.php?action=lostpassword

  You are also welcome to clone this website and use it as a reference for your project. The WPvivid Backup Plugin is installed, so you can download a backup of the website and restore it on your server.

  If you have any questions, please let us know.

  Best regards,
  Ariel H.

  0

Please sign in to leave a comment.