All Collections
FAQ's and Troubleshooting
How to enable the Fixed Navigation Bar on Tablets and Mobile devices
How to enable the Fixed Navigation Bar on Tablets and Mobile devices

Learn how to enable the fixed navigation bar on small screens so the navigation will be always visible when you scroll.

Karen avatar
Written by Karen
Updated this week

Divi's Fixed Navigation Bar is only available on desktop screens by default. The navigation bar will not be fixed on tablet and phone devices where the viewport width is less than 981px. 

If you would still like the navigation to be fixed on devices with smaller viewport (screen), you can add the following CSS snippet to the Custom CSS option under Divi > Theme Options:

/* Fixed Navigation Bar on mobile devices */
@media screen and (max-width: 980px) {
    #main-header.et-fixed-header {
        position: fixed;
    }

    .logged-in #main-header.et-fixed-header {
        top: 0 !important;
transition: all .3s 0s;
    }
}

Here is the result!

Note: The same result can be achieved using the Theme Builder.

Building Fixed navigation for all devices

Step 1: Go to Divi > Theme Builder;

Step 2: Create a new Global Header;

Step 3: In the Global Header Layout, inside the Section (that is added by default), insert a Row;

Step 4: Inside the Row, insert the Menu module;

Step 5: Edit the Section's Settings and go to Advanced Tab > Scrolling Effects;

Step 6: Enable the Sticky at the Top option;

Make any other adjustments you might need.

Did this answer your question?