Divi fixed navigation

The Divi theme is a popular WordPress theme that allows you to create beautiful and customizable websites. One common customization is to create a fixed navigation menu, where the menu stays visible at the top of the page even when scrolling.

To achieve a fixed navigation in Divi, you can use some CSS and JavaScript. Here’s an example code snippet that you can add to your child theme’s CSS file or in the Divi theme options:

/* Add a fixed position to the navigation */
.et_header_style_centered #main-header.et-fixed-header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
}

/* Adjust the spacing of the page content when the navigation is fixed */
.et_header_style_centered #page-container {
    padding-top: 80px; /* Adjust this value to match the height of your navigation */
}

This CSS code targets the Divi theme’s centered header style and adds a fixed position to the navigation when the header becomes fixed. It also adjusts the padding of the page container to prevent content from being hidden behind the fixed navigation.

To make the fixed navigation work smoothly, you’ll also need to add some JavaScript code. Here’s an example code snippet that you can add to your child theme’s JavaScript file or in the Divi theme options:

(function($) {
    $(document).ready(function() {
        var headerHeight = $('#main-header').outerHeight();

        $(window).scroll(function() {
            if ($(this).scrollTop() > headerHeight) {
                $('#main-header').addClass('et-fixed-header');
            } else {
                $('#main-header').removeClass('et-fixed-header');
            }
        });
    });
})(jQuery);

This JavaScript code uses jQuery to add or remove a CSS class (et-fixed-header) to the navigation based on the scroll position of the page. When the scroll position is greater than the height of the header, the class is added, making the navigation fixed. Otherwise, the class is removed.

By combining the CSS and JavaScript code snippets, you can achieve a fixed navigation in Divi that stays visible at the top of the page while scrolling.

Examples

Example 1: Adding a fixed navigation to the Divi theme

This use case demonstrates how to add a fixed navigation menu to the Divi theme using custom code. The code example below adds a fixed navigation menu to the top of the page, ensuring that it remains visible even when scrolling.

function wpsnippets_add_fixed_navigation() {
    echo '<div id="fixed-navigation" class="et-fixed-header"></div>';
}
add_action( 'wp_footer', 'wpsnippets_add_fixed_navigation' );

The code above creates a custom function wpsnippets_add_fixed_navigation() that echoes the HTML markup for the fixed navigation menu. The function is then hooked to the wp_footer action, ensuring that the navigation is added to the footer of the page. The fixed navigation menu is styled using the et-fixed-header class.

Example 2: Styling the fixed navigation menu

This use case demonstrates how to style the fixed navigation menu added in the previous example. The code example below adds custom CSS to modify the appearance of the fixed navigation menu.

function wpsnippets_custom_fixed_navigation_styles() {
    echo '<style>
        #fixed-navigation {
            background-color: #000;
            color: #fff;
            padding: 10px;
        }
    </style>';
}
add_action( 'wp_head', 'wpsnippets_custom_fixed_navigation_styles' );

The code above creates a custom function wpsnippets_custom_fixed_navigation_styles() that echoes the CSS styles for the fixed navigation menu. The function is then hooked to the wp_head action, ensuring that the styles are added to the head of the page. In this example, the background color is set to black, text color is set to white, and padding is added to the navigation menu.

Example 3: Adding a logo to the fixed navigation menu

This use case demonstrates how to add a logo to the fixed navigation menu in the Divi theme. The code example below adds a custom logo image to the fixed navigation menu.

function wpsnippets_add_fixed_navigation_logo() {
    echo '<div id="fixed-navigation-logo">
        <img src="path/to/logo.png" alt="Logo">
    </div>';
}
add_action( 'wp_footer', 'wpsnippets_add_fixed_navigation_logo' );

The code above creates a custom function wpsnippets_add_fixed_navigation_logo() that echoes the HTML markup for the logo image. The function is then hooked to the wp_footer action, ensuring that the logo is added to the footer of the page. The path to the logo image should be updated to the actual path of the logo file.