Every week, we provide you with new and free Divi layout packs which you can use for your next project. For one of the layout packs, we also share a use case that’ll help you take your website to the next level.

This week, as part of our ongoing Divi design initiative, we’re going to show you how to create an expanding sticky menu on hover using Divi’s Mechanic Layout Pack. We’ll handle two different design examples that you can recreate from scratch and apply to any kind of website you’re creating! The menu will be shown on hover on desktop screen sizes and activated on click on mobile devices.

Let’s get to it!

Preview

Before we dive into the tutorial, let’s take a quick look at the outcome across different screen sizes.

Example #1

Desktop

Expanding Sticky Menu

Mobile

Expanding Sticky Menu

Example #2

Desktop

Expanding Sticky Menu

Mobile

Expanding Sticky Menu

General Steps

Disable Fixed Navigation

Go to Divi Theme Options

We’ll start off with some general steps. These steps are the same for both examples and are necessary to achieve the desired outcome.

If you’re planning on using an expanding sticky menu at the bottom of your page, you might want to leave out the primary menu bar at the top. To do that, you will need to go to Divi’s theme options.

expanding sticky menu

Disable Fixed Navigation

There, you’ll want to disable the fixed navigation bar option to make sure no space remains at the top of your page.

  • Fixed Navigation Bar: Disabled

expanding sticky menu

Hide Primary Menu Bar on Page

Open Page Settings

Move on to the page you want to add the expanding sticky menu to and open the page settings.

expanding sticky menu

Add Custom CSS

Hide the primary menu by adding the following lines of CSS code to your page.

#main-header {
display: none;
}

expanding sticky menu

Add New Section to End of Page

Whichever example you want to recreate, some of the basic steps remain the same. The first step is adding a regular section to the bottom of the page.

expanding sticky menu

Spacing

Open the section settings and remove all custom top and bottom padding.

  • Top Padding: 0px
  • Bottom Padding: 0px

expanding sticky menu

Add New Row

Column Structure

Continue by adding a new row using the following column structure:

expanding sticky menu

Sizing

Without adding any modules yet, open the row settings and allow the row to take up the entire width of the screen.

  • Use Custom Gutter Width: Yes
  • Gutter Width: 1
  • Width: 100%
  • Max Width: 100%

expanding sticky menu

Spacing

Remove all default top and bottom padding next.

  • Top Padding: 0px
  • Bottom Padding: 0px

expanding sticky menu

Main Element

We’re allowing the entire row to stick to the bottom of our page by adding two single lines of CSS code to the main element of the row.

bottom: 0px;
position: fixed;

expanding sticky menu

Z Index

And we’ll make sure the row (and the Text Module we add in the upcoming steps) remains on top of all page content by increasing the Z index in the visibility settings of the row.

  • Z Index: 99

expanding sticky menu

Recreate Example #1

Expanding Sticky Menu

Add Text Module to Column

Add Content

Now that we’ve gone through all the steps, we can start focusing on the two different design examples, starting with the first one! Add a Text Module to the column of your row. In the content box, we’re using the paragraph style to show the ‘≡ Menu’ copy. We’re, then, placing all the menu items in an unordered list. We’ll also add a link to each one of the page titles individually.

expanding sticky menu

Default Background Color

Move on to the background settings of the module and change the background color.

  • Background Color: #ffffff

expanding sticky menu

Hover Background Color

Modify this background color on hover.

  • Background Color: rgba(255,255,255,0.83)

expanding sticky menu

Gradient Background

And add a default gradient background as well.

  • Color 1: rgba(255,255,255,0)
  • Color 2: #ffffff
  • End Position: 60%

expanding sticky menu

Default Text Settings

Continue by going to the design tab and modifying the text settings.

  • Text Font: Khand
  • Text Font Weight: Bold
  • Text Color: #021827
  • Text Size: 3vh
  • Text Orientation: Center

expanding sticky menu

Hover Text Settings

Modify some of the text settings on hover.

  • Text Color: rgba(255,255,255,0)
  • Text Size: 0vh

expanding sticky menu

Link Text Settings

Then, go to the link text settings and change the link text color.

  • Link Text Color: #000000

expanding sticky menu

Default List Text Settings

Move on to the default list text settings and style it however you want to. Make sure you’re using ‘0px’ for the text size in its default state.

  • Unordered List Font: Khand
  • Unordered List Font Style: Uppercase
  • Unordered List Text Alignment: Center
  • Unordered List Text Color: rgba(255,255,255,0)
  • Unordered List Text Size: 0px
  • Unordered List Line Height: 0em
  • Unordered List Style Position: Inside

expanding sticky menu

expanding sticky menu

Hover List Text Settings

Then, modify some of the values on hover to allow the menu items to appear.

  • Unordered List Text Color: #000000
  • Unordered List Text Size: 2vh
  • Unordered Line Height: 2.1em

expanding sticky menu

Default Spacing

Go to the spacing settings next and give the Text Module a shape.

  • Left Margin: 45vw (Desktop), 39vw (Tablet), 33vw (Phone)
  • Right Margin: 45vw (Desktop), 39vw (Tablet), 33vw (Phone)
  • Top Padding: 2vw (Desktop), 4vw (Tablet), 6vw (Phone)
  • Bottom Padding: 2vw (Desktop), 4vw (Tablet), 6vw (Phone)

expanding sticky menu

Hover Spacing

Modify these same values on hover.

  • Left Margin: 14vw
  • Right Margin: 14vw
  • Top Padding: 8vw
  • Bottom Padding: 8vw

expanding sticky menu

Default Border

Move on to the border settings and make sure each one of the rounded corners has a value of ‘0px’.

expanding sticky menu

Hover Border

Enable the hover options on the rounded corners and change the top left and top right values.

  • Top Left: 50vw
  • Top Right: 50vw

expanding sticky menu

Box Shadow

Continue by giving the module some depth using a box shadow. This will make sure the menu doesn’t go unnoticed on the page.

  • Box Shadow Blur Strength: 1000ms
  • Shadow Color: rgba(0,0,0,0.68)

expanding sticky menu

Transitions

Last but not least, decrease the transition duration in the transitions settings.

  • Transition Duration: 100ms

expanding sticky menu

Recreate Example #2

Expanding Sticky Menu

Add Text Module to Column

Add Content

On to the second example! Here, we’re again going to add ‘≡ Menu’ using the paragraph text style and the menu items using an unordered list. We’ll also add a link to each one of the menu items individually.

expanding sticky menu

Default Background Color

Move on to the background settings and change the background color.

  • Background Color: #ffffff

expanding sticky menu

Hover Background Color

Modify the background color on hover.

  • Background Color: #f71535

expanding sticky menu

Default Text Settings

Then, go to the design tab and make some changes to the appearance of the paragraph copy.

  • Text Font: Khand
  • Text Color: #021827
  • Text Size: 3vh

expanding sticky menu

Hover Text Settings

Modify these settings on hover.

  • Text Color: rgba(255,255,255,0)
  • Text Size: 0vh

expanding sticky menu

Link Text Settings

Move on to the text settings and change the link text color.

  • Link Text Color: #ffffff

expanding sticky menu

Default List Text Settings

Change the design settings of the unordered list items as well.

  • Unordered List Font: Khand
  • Unordered List Font Style: Uppercase
  • Unordered List Text Alignment: Center
  • Unordered List Text Color: rgba(255,255,255,0)
  • Unordered List Text Size: 0px
  • Unordered List Line Height: 0em
  • Unordered List Style Position: Inside

expanding sticky menu

expanding sticky menu

Hover List Text Settings

And modify some of these values on hover.

  • Unordered List Text Color: #ffffff
  • Unordered List Text Size: 2vh
  • Unordered List Line Height: 2.1em

expanding sticky menu

Default Spacing

Then, go to the spacing settings and give the module some space.

  • Right Margin: 88vw (Desktop & Tablet), 71vw (Phone)
  • Top Padding: 6vw (Desktop), 10vw (Tablet), 18vw (Phone)
  • Bottom Padding: 4vw (Desktop), 10vw (Tablet), 12vw (Phone)
  • Left Padding: 1vw

expanding sticky menu

Hover Spacing

Modify the values on hover.

  • Right Margin: 59vw
  • Top Padding: 13vw
  • Bottom Padding: 8vw
  • Left Padding: 1vw
  • Right Padding: 13vw

expanding sticky menu

Border

And to create this quarter circle design, we’re going to change the top right border in the border settings.

  • Top Right: 50vw

expanding sticky menu

Box Shadow

We’ll also add a box shadow to create depth on the page.

  • Box Shadow Blur Strength: 1000px
  • Shadow Color: rgba(0,0,0,0.68)

expanding sticky menu

Transitions

And decrease the transition duration in the advanced tab to create a quick transition.

  • Transition Duration: 100ms

expanding sticky menu

Preview

Now that we’ve gone through all the steps, let’s take a final look at the outcome across different screen sizes.

Example #1

Desktop

Expanding Sticky Menu

Mobile

Expanding Sticky Menu

Example #2

Desktop

Expanding Sticky Menu

Mobile

Expanding Sticky Menu

Final Thoughts

In this post, we’ve shown you how to create an expanding sticky menu using Divi’s Mechanic Layout Pack. We’ve handled two different design examples that you can recreate and use on any kind of website you’re building! We hove you’re enjoying this ongoing Divi design initiative, where we try to put something extra into your design toolbox each and every week. If you have any questions or suggestions, make sure you leave a comment in the comment section below!

If you’re eager to learn more about Divi and get more Divi freebies, make sure you subscribe to our email newsletter and YouTube channel so you’ll always be one of the first people to know and get benefits from this free content.

The post How to Create an Expanding Sticky Menu on Hover with Divi appeared first on Elegant Themes Blog.



Source link

error: Content is protected !!