The following code applies to the Divi WordPress theme by Elegant Themes.
The effect is to have a transparent menu over a full screen slider and then turn the menu semi-opaque when the use scrolls the page.
See an example here: http://southcoastjazz.co.uk/
This is a modification of Geno Quiroz’s tutorial (http://quiroz.co/ghost-home-page-and-change-menu-background/) as well as Vlad Patrascu’s tutorial (http://wpdots.com/cover-slider/)
[1] Add this to: ‘Divi Theme Options’ -> ‘Integration’ -> ‘Add code to the < head > of your blog’
<script type="text/javascript"> (function($) {
var cover_section = '#cover-section', top_header = '#top-header, #et-secondary-nav', header = '#main-header';
$(window).bind('scroll', function() {
if ($(window).scrollTop() > 0) { $(header).addClass('opaque-header'); $(header).removeClass('transparent-header'); $(top_header).addClass('opaque-header'); $(top_header).removeClass('transparent-header'); } else { $(header).removeClass('opaque-header'); $(header).addClass('transparent-header'); $(top_header).removeClass('opaque-header'); $(top_header).addClass('transparent-header'); } });
$(document).ready(function() { top_header = '#top-header, #et-secondary-nav'; header = '#main-header'; $(header).addClass('transparent-header'); $(top_header).addClass('transparent-header'); if ($(cover_section).length) $('body').addClass('cover-active'); });
$(window).load(function() { if ($(cover_section).length) set_viewport_height($(cover_section)); });
$(window).resize(function() { if ($(cover_section).length) set_viewport_height($(cover_section)); });
function set_viewport_height(element) { var viewport_height = $(window).height();
if ($('#wpadminbar').length) var viewport_height = viewport_height - $('#wpadminbar').innerHeight();
$(element).height(viewport_height); };
})(jQuery); </script> <script type="text/javascript"> (function($) {
$(window).load(function() { $('#divi-loading').fadeOut(500); });
})(jQuery); </script>
[2] Add these to style.css (or Custom CSS in your Divi Epanel)
.opaque-header { background-color: rgba(31,31,31,0.8) !important; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.0); -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.0); -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.0); }
.transparent-header { background-color: rgba(255, 255, 255, 0.0) !important; box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important; }
/* Thanks to Vlad Patrascu for the remaining CSS code */
/* Set all this elements to 100% height, very important! */ /* Set all this elements to 100% height, very important! */ .cover-active, .cover-active #page-container, .cover-active #et-main-area, .cover-active #main-content, .cover-active article.page, .cover-active .entry-content, .cover-active #cover-section .et_pb_slider, .cover-active #cover-section .et_pb_slides, .cover-active #cover-section .et_pb_slide, .cover-active #cover-section .et_pb_container { min-height: 100%; height: 100%; padding: 0!important; } /* Set position to initial when boxed layout is set, fixes header position */ .cover-active.et_boxed_layout #page-container { position: initial!important; } /* Prepare slide container for slide description vertical align */ .cover-active #cover-section .et_pb_container { display: table; } /* Align the description on middle vertically (correctly) */ .cover-active #cover-section .et_pb_slide_description { padding: 0; display: table-cell; vertical-align: middle; } /* Move dot controllers, in case they are used */ .cover-active #cover-section .et-pb-controllers { bottom: 100px; }
[3] Full Width Section Module settings
Css ID: cover-section Add a full width slider.