When I started out with Divi one of my first projects was a layout design with a hero header on each main page with subsequent full page section below. Now from my experience as a photographer, one of the main rules were that you need a singular focus point to avoid distraction and clutter that might draw the viewer’s attention away from the primary content. With a beautiful design layout, the menu at the top, I felt, created “clutter” that distracted the user from the main focus point.
Divi, having a multitude of theme and layout customisation options, allows you, when the fixed menu option is enabled in theme options, to hide the main menu until the user scrolls down. This is a fantastic for capitalising on screen real estate when you have a hero header. The downside of this solution is when scrolling down the menu reclaims its portion of screen real estate which distracts from the subsequent full page sections.
Not feeling the need to reinvent the wheel, I found a couple of possible solutions.
Back to the drawing board…. I found a different solution that allowed, with a bit of extra CSS, to mimic the fixed header settings on mobile screen width breakpoints.
The catch: Solution 1 and Solution 2 wasn’t compatible so I was now stuck with two conflicting solutions and every assistance request I’ve placed in support forums or related Facebook groups was that customised scripting s required to get it working.
Solution 1 – Show/Hide Divi menu depending on scroll direction
Challenge 1: No Fixed Menu on mobile devices
Main menu shows at top of screen when page loads on mobile devices
Challenge 2: Scroll to anchor location miscalculation
Scroll to anchor, [with “Smooth Scrolling” enabled in theme options?], lands x amount of pixels, (equal to menu height set in theme customisation options), below the top of the viewport.
Challenge 3: Scroll to anchor URL anchor displayed in address bar
When clicking on an in-page anchor link the URL isn’t kept “clean” and displays the anchor as part of URL in the browser’s address bar instead of keeping clean fancy permalinks.
Solution 2 – Faux Fixed Menu for mobile devices
CSS hack that detaches the menu from a fixed position and displays it as an overlay (z-index) throughout the page
Challenge 1: Not compatible with Solution 1
Although this detached the menu, it didn’t integrate with solution 1’s ability to hide/show the menu, so the menu stayed visible at all times.
Challenge 2: Full page height wrong
When a fullwidth header is set to fullpage Divi calculates the viewport height as the module’s height plus the menu height.
This is currently under development and no public preview is available yet.
The scripts are integrated via a child theme for Divi but when it’s production ready it will be rebuild as a plugin with options.