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.

The first solution was a fantastic starter point, a javascript combined with CSS stylesheet hiding the menu while scrolling down but displaying it when the user reaches the bottom of the page or when the user is scrolling upwards. The Divi fixed menu option however does not work on mobile devices so when the width breakpoint for these are reached the main menu is always visible.

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.

Found a javascript workaround (return false;) but implementing that leaves the “scroll down” option available in the fullwidth header module not working

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.

Description here….

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.

Update [July’18]: I’ve put this on ice as I mostly use other builder and theme combinations these days.