Navigation Color on Scroll

Description

• change navigation color on scroll over specific section
• view demo – password: abc
• buy me a coffee

#1. Install Code

#1.1. First, use this code to Code Injection > Footer

<!-- 10.26c07v2 Navigation Color on Scroll -->
<script>
window.HeaderNavColorConfig = {
  headerId: 'header',
  linkTarget: '.header-display-desktop .header-nav-item > a, .header-display-desktop .header-nav-folder-title',
  burgerTarget: '.header-burger .top-bun, .header-burger .patty, .header-burger .bottom-bun',
  themeColors: {
    'white':          'red', // LIGHTEST 1
    'white-bold':     'green', // LIGHTEST 2
    'light':          'violet', // LIGHT 1
    'light-bold':     'brown', // LIGHT 2
    'bright-inverse': 'yellow', // BRIGHT 1
    'bright':         'orange', // BRIGHT 2
    'dark':           'black', // DARK 1
    'dark-bold':      'white', // DARK 2
    'black':          'navy', // DARKEST 1
    'black-bold':     'blue'  // DARKEST 2
  }
};
</script>
<script src="https://code.beaverhero.com/header/1026c07v2navigationcolorscroll.js"></script>

#1.2. Update Color here (line 07 – line 18)

themeColors: {
  'white':          'red', // LIGHTEST 1
  'white-bold':     'green', // LIGHTEST 2
  'light':          'violet', // LIGHT 1
  'light-bold':     'brown', // LIGHT 2
  'bright-inverse': 'yellow', // BRIGHT 1
  'bright':         'orange', // BRIGHT 2
  'dark':           'black', // DARK 1
  'dark-bold':      'white', // DARK 2
  'black':          'navy', // DARKEST 1
  'black-bold':     'blue'  // DARKEST 2
}

#2. Customize

nothing now