Changing menu colour on scroll

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.