DIVI Builder #1: Sticky Menu Bar

Here's how to create a sticky top menu bar for your WordPress website using DIVI Builder. You'll have to also set your menu in WordPress. Follow along:

Create A New Menu Bar

1. Create a new fullwidth section. Fullwidth (section) > Fullwidth menu (module).

Fullwidth Menu Settings

1. Content: Primary Menu.

2. Add Logo if needed.

3. Add links if needed:

4. Choose and change any settings as wanted and click Save.

Put CSS ID For Every Section Title (Only the ones you want to have on the menu bar)

1. Section settings > Advanced > CSS ID & Classes > CSS ID.

Set Primary Menu

1. Go to Appearance > Menus > Set menu name to "Primary Menu".

2. Custom Links > Add each CSS ID declared earlier one by one.

3. Click Save Menu.

Deleting Divi Default Menu

You'll realize there's 2 menu bars by now. Delete Divi default menu by doing so:

1. Go to Divi > Theme Options > Scroll down till Custom CSS part and write the code as below:

2. Click Save Changes.

Sticky Top Menu Bar

1. Click on the section settings for the menu bar created earlier.

2. Section settings > Advanced > Scroll Effects.

3. Choose either top, bottom, or both for the Sticky Position.

4. Click Save.

Now, when you scroll down the page, the menu bar will still be visible and stick to the position you choose.

Done.