Build Beautiful WordPress Websites Using Divi and Divi Builder

How To Design A Sticky Restaurant Menu Using Divi

Rifat Divi Tutorials May 7, 2021

Food menus are a very important part of a restaurant website. Because it provides a customer an overall idea about the food pricing. Now, if you want to make a creative restaurant menu for your website, you should definitely look inside Divi.

Today, we will be leading you to an eye-catching restaurant menu design that has a gluey effect - by using Divi's built-in sticky option. Our design will create separate the entire menu into different categories and allows visitors o see which category they're at! So, let's do it.

Glimpse Of Our Final Design

Let's take a quick look at the final result of our today's design.

Desktop View

Mobile View

Element Structure Creating

Adding New Section

Background Color

Add a new page from your dashboard and open it with Divi builder. Go with "Build From Scratch." Now, open section settings and add a background color.

Create Amazing Websites

With the best free page builder Elementor

Start Now
  • Background Color: rgba(255,252,244,0.6)

Background Image

Now, use a pattern image as background. There are a lot of pattern images available at google, so pick one of your choices.

  • Background Image Size: Actual Size
  • Background Image Position: Top Center
  • Background Image Repeat: Repeat X (horizontal)

Spacing

Alter the spacing values.

  • Top Padding: 150px
  • Bottom Padding: 150px

New Row Adding

Column Structure

Add a new row below the image using the following column structure. Pick "Regular" from the "New Section" tab.

Now choose the following column structure.

Sizing

Now open the row settings and change the values as given below.

  • Use Custom Gutter Width: Yes
  • Gutter Width: 1
  • Width: Desktop & Tablet: 80%, Phone: 95%
  • Max Width: 1580px
  • Row Alignment: Center

Add Text Module 1 To Column 1

Add H3 Content

Well, now we will add modules to our structure. Let's start with a text module in column 1. Add some H3 content of your wish.

H3 Text Settings

Go to the design tab of the module and change the following settings.

  • Heading 3 Font: Karla
  • Heading 3 Font Weight: Bold
  • Heading 3 Text Size: Desktop & Tablet: 45px, Phone: 35px
  • Heading 3 Letter Spacing: -2px
  • Heading 3 Line Height: 1.2em

Spacing

Let's add some top and bottom padding.

  • Top Padding: 25px
  • Bottom Padding: 25px

Add Text Module 2 To Column 1

Add Content

Add a text module beneath the previous module and add some words from your choice.

Text Setting

Change the modules settings.

  • Text Font: Crimson Pro
  • Text Color: #3a3a3a
  • Text Size: 32px

Spacing

Finish the module settings by changing the spacing values.

  • Top Margin: 20px
  • Bottom Margin: 50px
  • Left Padding: 5%
  • Right Padding: 5%

Add Image Module To Column 1

Image Upload

The final element we need in column 1 is an image. Add an image module, and then add an image of your choice.

Sizing

Add a maximum width from the sizing settings.

Spacing

Now complete the module settings by implementing the following changes to spacing.

  • Bottom Margin: Tablet: 80px, Phone: 50px
  • Left Padding: 5%
  • Right Padding: 5%

Add Blurb Module To Column 2

Content Adding

Add some content of your choice on a new blurb module on column 2. This module is a text based module that delivers more info about an individual topic.

Background Color

Add a white background color from the content tab.

  • Background Color: #ffffff

Title Text Settings

Now move to the design section and change the following values.

  • Title Font: Karla
  • Title Font Weight: Bold
  • Title Text Color: #3a3a3a
  • Title Text Size: Desktop: 40px, Tablet: 35px, & Phone: 30px
  • Title Letter Spacing: -2px
  • Title Line Height: 1.2em

Body Text Settings

Edit the body text settings like mentioned below.

  • Title Font: Karla
  • Title Text Color: #3a3a3a
  • Title Text Size: Desktop: 18px, Tablet: 25px, & Phone: 20px
  • Title Letter Spacing: -0.5px
  • Title Line Height: 2em

Sizing

Now modify the sizing.

  • Content Width: 100%

Spacing

Move to the spacing settings and alter the values accordingly.

  • Bottom Margin: 30px
  • Top Padding: 40px
  • Bottom Padding: 40px
  • Left Padding: 8%
  • Right Padding: Desktop: 25%, Tablet & Phone: 8%

Border

Its time to apply border settings.

  • Left Border Width: 3px
  • Left Border Color: #000000

Box Shadow

We’re using a box shadow as well.

  • Box Shadow Blur Strength: 20px
  • Shadow Color: rgba(0,0,0,0.05)

Blurb Title CSS

To finish the module settings, we need to add the following line of CSS code to the blurb title CSS box in the advanced tab.

margin-bottom: 20px;

Clone Blurb Module

Now your restaurant may have a variety of items for breakfast. You don't need to create every section from scratch because Divi allows you to copy your module as many times as you need. So, clone the blurb module according to your item.

And, then change the content inside the items.

Apply Sticky Effects

Text Module 1 In Column 1

As we have all the elements structured, no we will focus on adding sticky effects. For that, open the first text module in column 1.

Make Module Sticky

Switch to the advanced tab and make the following sticky settings:

  • Sticky Position: Stick to Top
  • Bottom Sticky Limit: Row
  • Offset Surrounding Sticky Elements: Yes
  • Transition Default and Sticky Styles: Yes

Sticky Style For Module

Background Color

As we now have a sticky module, we can apply sticky styles to it. First of all, select black as sticky background color.

  • Sticky Background Color: #000000

Text Color

Then, alter the sticky H3 text color to white.

  • Sticky Heading 3 Text Color: #ffffff

Spacing

And conclude the sticky styles by adding the following responsive sticky padding values:

  • Sticky Left Padding: 5%
  • Sticky Right Padding: 5%

Clone The Entire Row For Reuse

After you are done with the sticky effects of the breakfast section, you might want to add the lunch and diner section. So, duplicate the whole row for re-use.

Change All The Content For Second Row

Make sure you have altered the content for seconds row.

Final Result

So our final design looks like this.

Desktop View

Mobile View

Conclusion

Today in this post, we tried to show you how creative you can customize your next website menu with Divi's sticky option. This is a great interactive way to display foods to customers. If you have any suggestions or tutorial requests, please share your thoughts in the comment box. If you found this article useful, a share will be lovely.