Build a Hamburger Menu with Slider Revolution

In this written tutorial you'll learn how to create a mobile friendly "hamburger menu" for your website, all done through the visual interface of Slider Revolution, without using a single line of code.

Hamburger Menu - Made with Slider Revolution

Table of Contents

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”.

Example of a typical hamburger menu icon
Example of a typical hamburger menu icon

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

Closed hamburger menu in mobile view mode
Closed hamburger menu in mobile view mode

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:

Closed hamburger menu, also in mobile view mode
Closed hamburger menu, also in mobile view mode

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:

Horizontal menu at desktop sizes
Horizontal menu at desktop sizes

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:

Create a new blank module
Create a new blank module

Use the Quick Start Guide

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

Use the quick start guide to establish fundamental settings
Use the quick start guide to establish fundamental settings

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:

Set a module title and alias to make adding it to content easy later
Set a module title and alias to make adding it to content easy later

Now we’re ready to start building our menu.

Step 1: Make the Header & Burger

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.

Add a new group to the canvas. This will become our header.
Add a new group to the canvas. This will become our header.

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”:

Rename group layer to "Header"
Rename group layer 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:

With the "Header" layer selected, click the top align button to move it to the top of the site
With the “Header” layer selected, click the top align button to move it to the top of the site

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:

Use the "Full Width" size preset to stretch the menu to the width of the site
Use the “Full Width” size preset to stretch the menu to the width of the site

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.

Set the header group to 65px high
Set the header group to be 65px high

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

Sized and aligned header group

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”:

Open the BG Color settings
Open the BG Color settings by clicking the swatch currently showing as “transparent”

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:

Choose the blue preset color
Choose the blue preset color

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

Your header should now look like this:

Header with blue background color
Header with blue background color

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:

Activate all four view modes
Activate all four view modes

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:

Click a mode's name or icon to preview it
Click a mode’s name or icon to preview it

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:

Auto-adjusting header width in all views
Auto-adjusting header width in all views

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”.

Add a new text layer
Add a new text layer

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”:

Rename the text layer to "Site-Title"
Rename the text 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:

Change the content to read "Site Title"
Change the content to read “Site Title”

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:

Style the site title with 25px font size and bold weight
Style the site title with 25px font size and 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:

Left align the site title
Left align the site title

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:

Offset the site title 30px from the left
Offset the site title 30px from the left

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

Vertically align the site title
Vertically align the site title
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:

Center align the site title in notebook mode

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:

Add a premade burger button

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”:

Nest the burger button in the header group, and rename it to "Burger-button"
Nest the burger button in the header group, and 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.

Right and middle align the burger button, and offset it 15px from the right
Right and middle align the burger button, and offset it 15px from the right

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:

Set the “X” offset to 15px on all sizes

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:

Toggle the burger button's visibility off for desktop mode
Toggle the burger button’s visibility off for 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

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.

Offset the vertical menu group 65px from the top, and apply the "Full Width" size preset
Offset the vertical menu group 65px from the top, and apply the “Full Width” size preset

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:

Sized, positioned and styled vertical menu group
Sized, positioned and styled vertical menu group

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”.

Add a new text layer, nest it in the vertical menu group, and name it "Home"
Add a new text layer, nest it in 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:

No visual distinction between header and menu areas

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:

Add a 1px top border to the vertical menu group
Add a 1px top border to the vertical menu group

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:

Set the vertical menu's top border to be white with 25% opacity
Set the vertical menu’s top border to be white with 25% opacity

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

Subtle line adds visual distinction between header and vertical menu area

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:

Styled and positioned "Home"
Styled and positioned “Home” menu item

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”:

Enable hover effect on menu item
Enable hover effect on menu item

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:

Change the hover text color
Change the hover text color

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.

Menu item turns yellow when hovered over
Menu item turns yellow when hovered over

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:

Open "Actions" dialogue box for menu item
Open “Actions” dialogue box for menu item

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:

Add a simple placeholder link to the menu item
Add a simple placeholder link to the menu item

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:

Two duplicate menu items added to the vertical menu
Two duplicate menu items added to the vertical menu

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:

Turn vertical menu visibility off in desktop mode
Turn vertical menu 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.

Duplicate vertical menu to create horizontal menu, turn visibility on for desktop and off for all other sizes.
Duplicate vertical menu to create horizontal menu, turn visibility on for desktop and off for all other sizes.

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:

Rearrange menu items in to horizontal alignment
Rearrange menu items in to horizontal alignment

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:

Resize the horizontal menu
Resize the horizontal menu

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:

Top and right align the horizontal menu group
Top and right align the horizontal menu group

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

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

Open "Animation" settings for the vertical menu group
Open “Animation” settings for the vertical menu group

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”.

Apply the "Slide From Top" animation preset
Apply the “Slide From Top” animation preset

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:

Shorten the duration of the opening animation 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:

Select the vertical menu group’s OUT animation

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:

Have the vertical menu group's OUT animation play the IN animation in reverse
Have the vertical menu group’s OUT animation play the IN animation in reverse, with a duration of 800

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

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:

Add a new action to the burger button
Add a new action to the 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.

The new action is a simple link click by default

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”:

Change the action to “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:

Tell the burger button to target 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:

Pink highlight rectangles indicate the burger button and vertical menu are now connected
Pink highlight rectangles indicate the burger button and vertical menu are now connected

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:

Turn off animation for menu items
Turn off animation for menu items

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!

Build a Hamburger Menu with Slider Revolution

The Author

Kezz Bracey

Learn everything you can. Teach everything you know.

For further information or clarification on any topic discussed in this blog's posts, feel free to leave a comment on the post or contact me at [email protected].

Liked this Post?
Please Share it!

7 thoughts on “Build a Hamburger Menu with Slider Revolution

  1. How can I make it stay in position when scrolling?
    How can I make it stay if scrolling to the next slide?
    #hamburger-menu

    1. Hey Yo,

      Thanks for your question!

      To fix the menu stick the top of the page go into the Module General Options tab, into the Layout sub-section, scroll down to Advanced Settings and toggle on Fixed on Top.

      To make the menu stay in place while you also have a slider running, the best bet is to make the menu and slider in two separate modules so they are independent.

      Then you can stack the menu modules on top of the slider module in a page or post and they will still look unified.

      If you have any more questions or need some extra help, don’t hesitate to drop our support team a line at: https://support.sliderrevolution.com/

    2. My mobile menu is auto animating which mean as soon as the page is loaded the mobile dropdoen is visible. While in your tutorial only after pressing the hamburger we can see the drop-down menu. How can I fix that ?

    1. Hello,

      thanks for contacting us! This is specific to the template and your request requires one of our support agents to have a closer look.

      In order to give our clients the best support possible, we are having a support ticket system reachable via the link below.

      Please use our ticket systems over at:

      https://support.sliderrevolution.com

      Cheers Dirk @ Slider Revolution

Leave a Reply

Your email address will not be published. Required fields are marked *