Question posted in
The full documentation can be found here.

Divi theme – Hide navigation menu on page load using jQuery

I’m using the theme Divi from Elegant Themes and I am trying to hide the main navigation menu when the page loads. I then would like for the menu to load as I scroll as seen here

I’ve successfully been able to have the menu appear and reappear as desired after I scroll down then back up to the top of the page. I have this as my current jQuery function:

<script type="text/javascript">
    jQuery(document).ready(function($) {
        var header = $('#main-header');
        $(window).scroll(function () {              
            if ($(document).scrollTop() == 0) {
                header.removeClass('et-fixed-header');
            } else {
                header.addClass('et-fixed-header');
            }
        });
    });
</script>

This is the CSS for that section:

#main-header { -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out; }
.home #main-header { opacity: 0; top: -40px !important;}
.home #main-header.et-fixed-header { opacity: 1; top: 0 !important; }
.home.et_fixed_nav #page-container { padding-top: 0!important; }
.et_fixed_nav #page-container { padding-top: 80px !important; }

I have everything labeled in the HTML appropriately, but I can’t figure out how to make the menu not show initially. I’ve tried to use this, but I’m guessing I’m doing something wrong:

<script type="text/javascript">
    jQuery(document).ready(function($) {
        var header = $('#main-header');
        $(document).load(function () {
            header.removeClass('et-fixed-header');
        $(window).scroll(function () {              
            if ($(document).scrollTop() == 0) {
                header.removeClass('et-fixed-header');
            } else {
                header.addClass('et-fixed-header');
            }
        });
    });
</script>

I’m new to jQuery and a novice at WordPress development.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    This functionality is now an available option with Divi version 2.4 and above. It can be achieved through various options in the WordPress Customizer or Divi page builder.

    Here is a blog post that details available options: https://www.elegantthemes.com/blog/resources/exploring-divi-2-4-all-new-header-styles-and-design-settings


  2. 0

    If you just use opacity to hide an element it keeps it basic structure, I would suggest to try the following css (to be applied via jquery):

    #et-main-area {
  top: -40px;
  position: absolute;
  width: 100%;
}

#main-header {
  opacity: 0;
}

    The -40px you already had in your code but you already added it to the header, but you need to move the rest of the site… I am not sure if this will suit your need to then add the menu later on…

    A good idea might be to position the menu in a div outside of the normal document (positioned absolute) flow and positioned at the top, but then again I am not that great at front-end stuff. 

    $('#main-header').css("opacity", "0"); 
$('#et-main-area').css({  "top": "-40px", 
                           "position": "absolute", 
                           "width": "100%" 
                        });
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search