Header Nav Color on Scroll

Description

change header nav color, burger icon color (desktop, mobile) on scroll over section with specific theme color
view demo – password: abc
buy me a coffee

#1. Install Code

#1.1. Use this code to Code Injection > Footer

If you use Personal/Basic Plan and your plan doesn’t support Injection, see #3.1

<!-- 07.26c07v4 Header Nav Color on Scroll -->
<script>
window.HeaderNavColorConfig = {
  headerId: 'header',
  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/0726c07v4headernavcoloronscroll.js"></script>

#1.2. You can update color here

You can use color name or hex color

#2. Customize

nothing now

#3. Other

#3.1. If you use Personal/Basic Plan and your plan doesn’t support Injection, you can edit Site Footer

Add a Markdown Block

Add this code into Markdown Block

<script>
window.HeaderNavColorConfig = {
  headerId: 'header',
  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/0726c07v4headernavcoloronscroll.js"></script>