Build a Hamburger Menu with Slider Revolution

Table of Contents

• Introduction: What is a “Hamburger Menu”?
• Getting Started: Setup a Module
• Step 1: Make the Header & Burger
• Step 2: Make the Menus
• Step 3: Animate the Vertical Menu
• Step 4: Connect the Burger Button
• Conclusion: And Your Done!

Note: If you prefer watching rather than reading, check out the video version of our Hamburger menu quick start guide.

Introduction: What is a “Hamburger Menu”?

A “hamburger menu” is a type of navigation typically used on smaller screen sizes where there isn’t a lot of room to move. Instead of having navigation permanently showing and taking up space, a menu is hidden away until its needed.

Site visitors can then elect to show said menu when they want to use it, which is done by clicking or tapping on a little three line icon that looks a bit like a hamburger, hence the name “hamburger menu”.

Below is the hamburger menu we’re going to build, seen in its closed state in Slider Revolution’s mobile size preview:

Note the three lined icon at the right side of the menu – that is the “hamburger” icon described a moment ago.

When that little icon is tapped or clicked it expands the previously hidden menu:

From here the “X” icon can be tapped to close the menu, once again tucking it out of the way in limited space viewports.

We’ll be making the hamburger menu available at all the smaller sizes, i.e. notebook, tablet and mobile. However at desktop size where there is more room we’ll instead use a regular horizontal menu:

Getting Started: Setup a New Module

Our starting place is in the Slider Revolution admin area, reachable by clicking the “Slider Revolution” menu item in the WordPress left admin sidebar. We’ll be creating a new module from scratch so click the “New Blank Module” button to begin:

Use the Quick Start Guide

We’ll take advantage of the quick start wizard, so when it appears click the “Start Guide” button:

In the three screens that subsequently appear choose the following options.

• Question: What type of module would you like to create?
  Select: “Scene”

• Question: What size should the module have?
  Select: “Full-Width”

• Question: How would you like your content to resize?
  Select: “Classic, Linear Resizing”

Now click the “Go to Editor” button at the bottom right to proceed.

Set Module Title

Before we start building the menu it’s good practice to give your module a name and alias. Setting a name you’ll remember ensures the module will be easy to find when you go to insert it into a page or post.

Go to the “Module General Options” tab in the right sidebar, and the sub-section “Title”. Fill in the “Title” and “Alias” fields, as seen below:

Now we’re ready to start building our menu.

Step 1: Make the Header & Burger

• Step 1.1: Add a New Group
• Step 1.2: Align & Size the Header Group
• Step 1.3: Add Color to the Header
• Step 1.4: Activate Notebook, Tablet & Mobile Views
• Step 1.5: Inspect Smaller View Modes
• Step 1.6: Add Site Title to Header
• Step 1.7: Change Site Title Content
• Step 1.8: Style Site Title
• Step 1.9: Align the Site Title
• Step 1.10: Add the Burger Button
• Step 1.11: Align the Burger Button
• Step 1.12: Override Offset Settings in Smaller Views
• Step 1.13: Hide Burger Button on Desktop Mode

Step 1.1: Add a New Group

Start by adding a group layer, which will act as our header. We’ll be nesting a couple of items inside it, so the group will help us keep everything organized.

Go to “Add Layer” in the top menu and choose “Group” from the dropdown list.

In the timeline at the bottom of the screen locate the new group layer you just added, double click on its name to enable you to change it, and rename the group to “Header”:

Step 1.2: Align & Size the Header Group

With the “Header” layer selected, go to the “Layer Options” tab in the right sidebar, and then into the sub-section “Size & Pos”. In here you can align the header with the top of the site by clicking the top align button:

Now we want to make the menu stretch the full width of our site’s content area. To do this, still in the same settings section in the sidebar, locate the “Size Presets” field and select “Full Width” from its dropdown menu:

To complete the sizing and aligning we need to give our group a fixed height. Once more in the same settings area find the field labeled “H“. (The “H” is short for “Height”). Enter the value 65px and hit your ENTER key to apply.

With these settings in place your header group should now look like this:

Step 1.3: Add Color to the Header

Now that the header is sized and aligned let’s add a little color, given it currently has a transparent background.

Switch into the “Style” sub-section, locate the “Background” settings area, and click the swatch next to the label “BG Color”:

This will open up a color selection dialogue box where you can choose a background color for the header. To make things quick and easy we’re going to use the mid-blue preset color you can see in the image below, in the top right corner of the collection of swatches:

Click that blue color to select it, then click the large “✔” button to commit the change.

Your header should now look like this:

Step 1.4: Activate Notebook, Tablet & Mobile Views

So far we’ve been working in “Desktop” view mode. We now need to also activate “Notebook”, “Table” and “Mobile” mode so we can make sure our hamburger menu works at all sizes as we build it.

In the top toolbar on the right side, hover over the little computer monitor icon and you will see a dropdown appear listing all four view modes. Switch the toggles for all the modes to “ON”, like so:

With these views activated you can now switch into each mode and inspect your progress so far. Do this in the same dropdown list by clicking directly on the mode’s name or icon:

Step 1.5: Inspect Smaller View Modes

Go through and take a look at each of these newly activated modes now. In each one you’ll see that the header retains its height & alignment, and automatically adjusts its width to fill the available space at each size:

The reason the newly activated views already have correctly laid out versions of the header is that Slider Revolution layers automatically get their settings inherited by smaller view modes. We started at the largest size – desktop – and as such the notebook, tablet and mobile modes inherited all the settings we have added so far.

This is why, as a general rule in Slider Revolution, you should create your layers at their largest size first then adjust the smaller sizes as required from there.

Step 1.6: Add Site Title to Header

Pretty much every website has a title or a business name in the header, so we’ll add one of our own now. Go to “Add Layer” in the top menu and choose “Text”.

On the canvas, click and drag the newly added text into the header area. We want it to become nested inside the header group, so if that doesn’t happen automatically when you move it, go to the timeline and drag its layer there to nest it inside the header. Rename the layer to “Site-Title”:

Step 1.7: Change Site Title Content

At the moment the text layer’s content is set to the default “New Layer”, which we want to replace. With the layer selected go to the “Content” sub-section of the layer’s options and change the “Idle” field to read “Site Title”. You should see the layer text content update on the canvas as a result:

Step 1.8: Style Site Title

Switch into the “Style” settings sub-section so we can tweak the appearance of our text a little bit. We’re only going to change a couple of settings.

Locate the “Font & Icon” panel at the top of this settings area. The first field, labeled with a bold “T” icon, represents the font size. Increase that font size to 25px. The setting immediately below that, labeled with a bold “A” icon, represents the font weight. In the dropdown list for that setting select “700 bold” to change the site title to a bold weight:

Step 1.9: Align the Site Title

The styling for the site title is done, so now we need to take care of its alignment. In the desktop mode we’re going to want the title to be left aligned, but in the notebook, tablet and mobile modes we’ll want to center align it instead.

To make this happen we will first left align the title in the desktop view mode, and then center align the title in the notebook view mode. The tablet and mobile views will then automatically inherit that center alignment setting.

Step 1.9a: Desktop Site Title Alignment

Start in desktop mode, select the site title, and in the “Size & Pos” settings we’ve used a few times so far, click the left align button:

By default this will push the layer flush against the left side of the header group. We want it to be offset a little bit to ensure it doesn’t look cramped, so in the same settings area locate the field labeled “X“. This field controls how far a layer is offset from whichever horizontal edge it is aligned to. In this case our site title is aligned to the left edge, so adding a positive value in this field will push it to the right.

Add 30px in the field and hit your ENTER key, then you’ll see a nice balanced amount of space appear on the left side of the site title:

You should also click the middle align button to ensure the site title is vertically centered as well:

Step 1.9b: Notebook & Smaller Site Title Alignment

Switch into notebook view mode and you’ll see the site title is still left aligned, because the settings we just added were inherited from desktop mode. To center align the text here just select the layer and click the center align button in the same area we’ve been using to make our alignments so far:

If you go through and preview the tablet and phone modes now you’ll see they also have a center aligned title, having inherited the setting from notebook mode.

Step 1.10: Add the Burger Button

The last addition we need to make to complete our header area is the burger button we’ll use to open and close our mobile-friendly menu.

Go to “Add Layer” and choose “Button”, then you’ll see a popup sidebar appear with a collection of premade buttons therein. Scroll down in that sidebar a little ways and you’ll reach a section with six ready-to-use burger buttons. These have all the moving parts they require, such as transitioning from burger to “X” symbol when clicked, so you can use them as-is with no extra setup needed.

We’re going to choose the first of the six burger buttons as it works best with the colors we’re using. Click that button in the sidebar and it will automatically be added to your canvas:

Now drag that button inside the header group, just as we did earlier with the site title, checking the timeline to ensure it gets nested inside the header group. Rename it to “Burger-button”:

Step 1.11: Align the Burger Button

We need to align and offset the burger icon in the same way as we did the site title, only this time positioning it on the right end of the header.

Select the burger layer and click the right align and middle align buttons, then set the “X” offset to 15px. Note that because the layer is right aligned this time, the positive value in the “X” field will push it to the left.

Your burger icon should now look like this:

Step 1.12: Override Offset Settings in Smaller Views

If you click inside the “X” offset field of the currently active view you’ll be given an at-a-glance look at the values that field is using in the three other views. In this case you’ll notice that the values are not all the same, and decrease in size as they go:

The reason for this is Slider Revolution has slightly decreased the amount of horizontal spacing this item takes up as the amount of screen real estate decreases on smaller sizes. In most scenarios this is very helpful, but in this case we have a good amount of spare space even in our smaller views, so we can afford for our burger button to have its 15px of offset space across the board.

Go through and change this “X” offset value to 15px at all view modes to give it a consistent amount of right side space throughout.

Step 1.13: Hide Burger Button on Desktop Mode

When a visitor is viewing the site in desktop mode they’ll have a regular horizontal menu, and as such will have no need for the burger button. For that reason we’ll need to hide the burger button in desktop mode.

With the burger button layer selected, go into the “Visibility” sub-section of the layer options. There you’ll see a toggle switch for each of the four view modes. The first switch, represented by the little monitor icon, represents desktop mode. Toggle this switch to hide the burger button in desktop mode:

That completes the process of making our header and burger button. We’re now ready to move on to creating the vertical menu for our mobile device modes as well as the horizontal menu for our desktop mode.

Step 2: Make the Menus

• Step 2.1: Make the Vertical Menu
• Step 2.2: Add Menu Items
• Step 2.3: Brief Interlude – Add Border to Vertical Menu
• Step 2.4: Back to Making the Menu Items
• Step 2.5: Add Hover Effect
• Step 2.6: Add Link Action
• Step 2.7: Duplicate Menu Links
• Step 2.8: Hide Vertical Menu on Desktop Mode
• Step 2.9: Create Horizontal Menu
• Step 2.10: Rearrange Horizontal Menu Items
• Step 2.11: Resize the Horizontal Menu Group

Step 2.1: Make the Vertical Menu

Once again we’re going to start in desktop mode, and add another group to the canvas. Name that group “Vertical Menu”.

Because this group is going to form our vertical drop down menu we need to position it directly under the header. We know that our header has a height of 65px, so that means our vertical menu group needs to have a vertical position also of 65px.

With the newly added group selected go to the “Size & Pos” settings we’ve been using so far and click the top align button, then set the “Y” offset value to 65px. (In the same way “X” represents the horizontal axis, “Y” represents the vertical axis).

While there you can also set the “Size Preset” dropdown to “Full Width” just as we did earlier with our header group.

Now go into the “Style” settings area and set the background color to the same blue we used for the header. When you’re done your vertical menu group should look like this:

Note that the vertical menu group’s background color will temporarily appear darker than the header until we add some content inside it.

Step 2.2: Add Menu Items

We now need to add some navigation links to form up our menu. Add a new text layer, nest it inside the vertical menu group, and name it “Home”.

Step 2.3: Brief Interlude – Add Border to Vertical Menu

Before we carry on creating our “Home” menu item, now that we’ve added some content inside the vertical menu group you’ll notice the background color has taken on the same blue we gave the header earlier. You’ll also notice that as a result there is no visual distinction between the header and the menu area:

Let’s change this by adding a subtle line in between the two sections.

Select the vertical menu group, go into it’s “Style” settings, and look below the “Background” settings to find the “Border” settings. We’re going to add a 1px top border to the group.

To do this, set the “Border Style” dropdown to “Solid”. Then in the first of the fields below that, (which represents the layer’s top border), enter a value of 1px:

We now have a 1px top border but it will be invisible until we give it a color. Click the swatch next to the label “Border Color” to open up the color selection panel. In there set the color to white, and reduce the opacity to 25% so we get a nice subtle border color that lets some of the blue background show through:

When you’re done you’ll have a soft line between the header and the vertical menu group, like this:

Step 2.4: Back to Making the Menu Items

Now our brief interlude is over, let’s get back to making our menu items.

Select the “Home” text item you added earlier and change its content to read “Home” as well, then go into it’s style settings and change it to use a bold weight.

Next go into the layer’s size and position settings, left and top align it, and set both its “X” and “Y” offset values to 30px so it has spacing above and to its left.

Your styled link should now look like this:

Step 2.5: Add Hover Effect

We want to give a little interaction feedback when a person hovers over these links, (remember not all small screen devices are touch devices), so now we’re going to add some hover styling.

With the link item selected go into the “Hover” sub-section of the layer options, and change the “Animation” option to “Enabled”:

This will make two new sections appear in the sidebar. Scroll down to the second of these, titled “Style”, and click the swatch next to the “Text Color” setting:

In the color selection box that appears change the color to the yellow preset.

This will cause the text link to animate to a yellow color when hovered over, and back to a white color when the mouse is moved away.

Step 2.6: Add Link Action

Now we just need to make sure our link actually does something when it’s clicked on. With the text layer still selected click the “Actions” sub-section of the layer options. This will make the “Actions” dialogue box appear:

There are quite a few actions you can add to your text link, but in this case we’re going to add a basic placeholder link that can be replaced with a real URL later. In the list on the right half of the dialogue box, locate and click the item labeled “Simple Link”.

A new item will appear in pink on the left side of the dialogue box, along with its associated settings on the right side:

In the “Link URL” of that new item enter a “#” symbol. This will act as a stand-in you can later replace with a URL, such as that of your site’s homepage.

With that, our first link item is complete

Step 2.7: Duplicate Menu Links

We can now duplicate our first link to create as many navigation items as we need. For our purposes we’ll create another two: an “About” link and a “Contact” link.

Right click the “Home” link on the canvas and choose “Duplicate”. In the timeline, rename the duplicate layer to “About”, then change its content to read “About” as well.

To move the newly created link into position make sure it is selected, then hold down your SHIFT key and press your down arrow key 5 times – this will move the item down by 50px.

Repeat the process once more and create a third link, this time setting its name and content to read “Contact”.

At this point you’ll notice the vertical menu group needs to have just a little more height for the spacing under your last menu to look equal to the space between the menu items. Select the vertical menu group and increase its height from 180px to 190px.

Your vertical menu is now complete, and should look like this:

Step 2.8: Hide Vertical Menu on Desktop Mode

We won’t be needing our vertical menu on desktop mode, so select the vertical menu group, go into the “Visibility” sub-section of the layer options, and toggle its visibility off in desktop mode:

Step 2.9: Create Horizontal Menu

We’re going to create our horizontal menu by simply duplicating and modifying our vertical menu.

With the vertical menu group still selected from the last step, right click it and choose “Duplicate”. Rename the duplicated group to “Horizontal-Menu”.

With the “Visibility” settings still open, toggle the desktop switch back on, and toggle the three other switches off. This will ensure our horizontal menu is only visible in desktop mode.

Step 2.10: Rearrange Horizontal Menu Items

We now need to line up our menu items horizontally instead of their current vertical arrangement. To do this, select each menu item one at a time, hold down the SHIFT button, and use your up and right arrow keys to move the item.

You want each one to be horizontally aligned with the “Home” item, and with an amount of space between them roughly equivalent to the amount of space to the left side of the “Home” item. When you’ve done that your menu should look like this:

Step 2.11: Resize the Horizontal Menu Group

We want our horizontal menu to fit inside our header, and for that we need to decrease both its height and width.

Select the horizontal menu group and set its height to 65px, to match the height of the header group. At this point you’ll notice that the menu items are no longer vertically centered, so select each one and click its middle align button in the “Size & Pos” settings area to correct its alignment.

Now, to decrease the width of the horizontal menu group, click and drag its right edge towards the left. You want the space on the right side of the last menu item to be about the same as between the menu items.

When you’ve finished the above your menu should look like this:

Next, position the horizontal menu over the top of the header area, which can by done by simply selecting it and clicking its right and top align buttons:

For good measure, you can also change the background color of the horizontal menu back to being transparent. The header sitting behind it already has the same blue color, so it’s no longer necessary for the horizontal menu to have a background color of its own.

Your horizontal menu is now complete, and you’re ready to move onto step 3, adding animation.

Step 3: Animate the Vertical Menu

Now we’re going to add opening and closing animations to our vertical menu. We’re only showing the vertical menu in notebook mode and smaller, so go ahead and switch into notebook mode now.

Note that everything you do in this step will automatically replicate itself into the tablet and mobile modes, so you can stay in notebook mode throughout this entire step.

• Step 3.1: Add the Opening Animation
• Step 3.2: Change Animation Duration
• Step 3.3: Add the Closing Animation

Step 3.1: Add the Opening Animation

Select the vertical menu group, then go into the “Animation” sub-section of the layer options.

We’re going to apply a premade animation to create the opening effect, meaning this part of the process is going to be very quick and straightforward.

Click the small downwards pointing arrow to the right of the button labeled “IN”. This will expand a list of categories of premade animations. Click the category labeled “Masked Transitions”, then locate the animation named “Slide From Top”.

Clicking that item will apply a collection of animation settings to your layer. You won’t immediately see the changes, but if you now click the “►” play button at the top of your timeline you’ll see the opening animation, sliding the vertical menu down vertically and fading it in.

Step 3.2: Change Animation Duration

At the moment the animation takes just a little too long to play in order to be suitable for a navigation menu – we want the animation to be long enough that it doesn’t feel rushed, but short enough that people don’t feel they’re waiting too long to get what they’re after.

Locate the “Duration” field in the “Basics” section of the “IN” animation, i.e. the first animation strip at the very start of the layer’s timeline. You’ll see it currently has a value of 1200. Change that value to 800:

Play the opening animation again and you’ll see it runs just a little bit faster.

Step 3.3: Add the Closing Animation

We’ve just setup the vertical menu group’s IN animation to act as our opening animation, and conversely we’ll now use its OUT animation to act as the closing animation.

Select the vertical menu group’s OUT animation by clicking on the animation strip at the very end of its layer on the timeline. You’ll know you’ve selected it correctly when it turns blue:

To create our closing animation all we have to do is make our opening animation run backwards. To do this, look in the OUT animation’s “Basics” section and locate the toggle labeled “Reverse ‘IN'”. Turn that switch on and it will make the IN animation run backwards at the end of the timeline.

While you’re in this section, change the OUT animation’s duration to 800, to match the IN animation:

You’re now ready for the last step – connecting the burger button to the vertical menu and triggering its opening and closing animations.

Step 4: Connect the Burger Button

We only have one last step to complete, and that is connecting the burger button to the vertical menu so that when someone taps / clicks the burger the menu’s opening or closing animations are played.

As with the prior step, this entire step can be done in notebook mode and everything will be automatically replicated to tablet and mobile mode.

• Step 4.1: Add Action to Burger Button
• Step 4.2: Change Action Type
• Step 4.3: Target Vertical Menu Group
• Step 4.4: Small Tweak to Menu Items

Step 4.1: Add Action to Burger Button

Start by selecting the burger button. If you have trouble selecting it from the canvas due to other nearby items getting in the way, you can instead select its layer directly from the timeline.

Like we did earlier with our link items, click the “Actions” sub-section under the layer options to bring up the actions dialogue box. Here we’re going to click the button at the bottom left of the box to add a new action to our burger button:

By default the new action will be a click interaction with a simple link action type, just like we added to our menu items earlier.

Step 4.2: Change Action Type

We want to keep the click interaction, but we need to change the action type. Click the three dots to the right of the “Action Type” field to bring up the other options, then scroll down, locate and select the option labeled “Toggle 1st/Last Frame”:

What this action does is target a specified layer, then tells it to jump to either its 1st or last frame and play the animation it finds there. That means at the 1st frame it plays the IN animation, and at the last frame it plays the OUT animation.

On our vertical menu group we’ve set our IN animation to open the menu, and our OUT animation to close the menu. So when we tell our burger button to target this group, then toggle between these two animations, it will toggle between the opening and closing animations of the menu.

Step 4.3: Target Vertical Menu Group

To set up this targeted connection between the burger button and the vertical menu group, locate the field labeled “Target Layer” in the action we are editing. Click the arrow on its right side and you will see a list of all the layers in the module we are building. From that list select the “Vertical-Menu” group:

You will know that a connection has been successfully made between the burger button and the vertical menu group when you see a pink highlight box around both items on the canvas:

You can now exit the actions dialogue box, save and preview your module, and when you click the burger button on either the notebook, tablet, or mobile previews, you should see the vertical menu opening and closing.

Step 4.4: Small Tweak to Menu Items

We have just one more thing to do to complete our hamburger menu. You might notice when you close the vertical menu that a very quick fade animation plays on each of the three menu items. This is the default animation that was applied to each of these text layers at their time of creation. To fix this, we need to set each of these to use no animation at all.

When you are creating your own menus from scratch you should turn off any unwanted animations before you begin duplicating menu items, but for the purposes of this tutorial I wanted you to see the problem first so you know what to do if you run into it later.

Select any one of the menu items in the vertical menu group, go into its “Animation” settings, and expand the selection of premade animations under the “IN” dropdown list just as we did when animating the vertical menu group. Here, under “Simple Transitions”, click the “No Animation” preset:

Repeat the process for the other two menu items in the vertical menu group to turn off their animations as well.

Now when you save and preview you’ll see the short fade out effect no longer occurs when you are closing your vertical menu.

And You’re Done!

Save and preview your module and take a minute to admire your handy-work.

Your hamburger menu is now fully up and running, and you have everything you need in order to be able to give your site visitors access to useful navigation while maintaining a spacious, uncluttered layout.

This is just one of many full featured website elements you can build using Slider Revolution’s visual interface with no coding and with no prior experience.

Stay tuned to learn about more awesome things you can put together using this powerful tool.

Thanks for reading, and have fun building excellent websites!