Add overlay nav layout option

INSTALLATION.md

@@ -908,6 +908,42 @@ You want the navigation next to your top-aligned header, without changing the HT
 }
 ```
 
+#### Fixed Overlay Navigation
+
+You want the navigation fixed on top and above the header image? Just go to **Appearance > Customize > Layout** and change the Header Style to "Fixed". You may want to adjust the header image, title, tagline, or logo (if any) as well. Additional customizations require some CSS. Note that the follow snippets are *examples*; do not mindlessly copy and paste them.
+
+```css
+/* Semi-transparent navigation bar. */
+.header-style-overlay .main-navigation {
+  --navigation-background-sticky-start-opacity: .72;
+  --navigation-background-sticky-end-opacity: .9;
+  backdrop-filter: blur(4px); /* Blurs everything behind the bar; can decrease render performance. */
+  -webkit-backdrop-filter: blur(4px); /* ... same but works in Safari. */
+}
+
+/* Remove shadow when site is scrolled to the top. */
+.header-style-overlay .scrolled-to-top {
+  --navigation-drop-shadow: none;
+}
+
+/* Increase the height on mobile and up. */
+:root {
+  --navigation-height: 48px;
+}
+
+/* Increase the height on desktop and up. */
+@media only screen and (min-width: 1024px) {
+  :root {
+    --navigation-height: 60px;
+  }
+}
+
+/* Avoid increasing the height of submenus. */
+.sub-menu {
+  --navigation-height: 40px;
+}
+```
+
 #### Card Size & Grid Spacing
 
 You can change the minimum width of cards under **Appearance > Customize > Layout**, usually in combination with an increased site width. The cards will scale up if there is enough space available. If you want to change the spacing between the cards, however, you need to overwrite one or two custom properties.

includes/functions/_customizer-settings.php

@@ -2487,6 +2487,7 @@ function fictioneer_add_layout_customizer_settings( $manager ) {
         'default' => _x( 'Default', 'Customizer header style option.', 'fictioneer' ),
         'top' => _x( 'Top', 'Customizer header style option.', 'fictioneer' ),
         'split' => _x( 'Split', 'Customizer header style option.', 'fictioneer' ),
+        'overlay' => _x( 'Overlay', 'Customizer header style option.', 'fictioneer' ),
         'none' => _x( 'None', 'Customizer header style option.', 'fictioneer' )
       ),
     )

includes/functions/hooks/_general_hooks.php

@@ -321,12 +321,14 @@ add_action( 'fictioneer_site', 'fictioneer_top_header', 9 );
  */
 
 function fictioneer_inner_header( $args ) {
+  $theme_mod = get_theme_mod( 'header_style', 'default' );
+
   // Abort if...
-  if ( ! in_array( get_theme_mod( 'header_style', 'default' ), ['default', 'split'] ) ) {
+  if ( ! in_array( $theme_mod, ['default', 'split', 'overlay'] ) ) {
     return;
   }
 
-  switch ( get_theme_mod( 'header_style', 'default' ) ) {
+  switch ( $theme_mod ) {
     default:
       get_template_part( 'partials/_header-inner', null, $args );
   }

partials/_header-inner.php

@@ -21,7 +21,8 @@
 defined( 'ABSPATH' ) OR exit;
 
 // Setup
-$tag = get_theme_mod( 'header_style', 'default' ) === 'default' ? 'header' : 'div';
+$header_style = get_theme_mod( 'header_style', 'default' );
+$tag = in_array( $header_style, ['default', 'overlay'] ) ? 'header' : 'div';
 
 ?>
 
@@ -29,7 +30,7 @@ $tag = get_theme_mod( 'header_style', 'default' ) === 'default' ? 'header' : 'di
 
   <?php do_action( 'fictioneer_inner_header', $args ); ?>
 
-  <?php if ( get_theme_mod( 'header_style', 'default' ) === 'default' ) : ?>
+  <?php if ( in_array( $header_style, ['default', 'overlay'] ) ) : ?>
     <div class="header__content">
 
       <?php if ( has_custom_logo() ) : ?>

src/scss/_navigation.scss

@@ -70,6 +70,19 @@
   }
 }
 
+// Overlay nav
+.header-style-overlay {
+  --navigation-background-sticky-start-opacity: 1;
+
+  .main-navigation {
+    margin: 0 0 calc(-1 * var(--navigation-height));
+
+    &__background {
+      transition: opacity .3s;
+    }
+  }
+}
+
 :root:not(.no-nav-sticky) .site .main-navigation.is-sticky {
   position: sticky;
 }