Support Contact:
Phone: +40 (21) 310.63.42; Forums: extendstudio.com/support

How to create a responsive navigation menu in Dreamweaver

With the new Extend Studio Flexi Menus 2 extension you can create beautiful responsive navigation menus in Dreamweaver. Here is the example that we will use for the following tutorial.

Install and locate the Flexi Menus 2 in Dreamweaver

You can download the Flexi Menus 2 for Dreamweaver from the overview page: http://www.extendstudio.com/css-responsive-menus-dreamweaver-extension/overview.html

For Dreamweaver CS5, CS5.5, CS6, CC
- open the “FlexiMenus_v2.zxp” file using Adobe Extension Manager
- restart Dreamweaver

For Dreamweaver CS4 – open the “FlexiMenus_v2.mxp” file using Adobe Extension Manager CS4 – restart Dreamweaver

Install extension in Adobe Dreamweaver using the Adobe Extension Manager

Extend Studio products are available in the “Insert” window in Dreamweaver. Click CTRL+F2 (Command+F2 for MAC) to display the Insert Window.

If the “Insert” window is displayed as Tabs, below the main Dreamweaver menu, the Extend products should appear on the right side of the Tabs.

If the “Insert” window is displayed as Floating Panel (usually displayed on the left or right of the working area, depending on the Workspace settings: developer, designer etc) you need to click on the “Common” drop-down – marked with a down arrow.

The Extend Studio products should appear in the pop-up list.

Locate the extensions inside Adobe Dreamweaver

Insert a Flexi Menus 2 into the page

In order to add a Flexi Menus 2 to a site, you need to create a html page inside a site. If you don’t know how to define a site in Dreamweaver, check this page for help: http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.html

1. Put the mouse cursor into the element where you want the menu to be added.
Usually inside the header of the page.

Insert a Flexi menus 2 responsive navigation.

2. Click the Insert Horizontal Menu button from the “Insert” window.

Insert a Flexi menus 2 responsive navigation.

3. The Flexi Menus 2 Editor will appear.
- you can choose a “dark” or “light” theme. For this example we had used a “light” theme;
- there are 21 skin templates that you can choose. For this tutorial we had chosen skin 2;
- you can choose from more color schemes;

When you’re done, click the “Insert menu” button

Insert a Flexi menus 2 responsive navigation.

Change menu settings

After inserting the menu into the page the Flexi Menus 2 Property Inspector will appear.

Flexi menus 2 responsive menu Property Inspector

1. From the Property inspector go to Main Menu > Container add a white background to the menu container.

Add background color using the Flexi menus 2 Property Inspector

2. In the Main Menu > Container tab use the right arrow to slide to the other options.
- align the menu to center from both “Align” and “Align Menu” option;
- from the “Positioning” option enable the Stick to top and the Full width.

Align menu to center and make it sticky

3. Change the menu items text settings from the Main Menu > Text. Make sure to change the text options for all the 3 states: Normal, Over and Selected.
- change the font size to 15 px for all states;
- change the text color for the normal state to #333333;
- disable the bold text style and make sure that you also add a lighter font weight. In this example we had added font-weight 300.

change the menu items text settings

4. From the Property Inspector go to the “Mobile Settings”. Make sure to have the "enable mobile version" option selected.
- change the menu preset to “push”;

mobile responsive navigation settings

After all is done, save the page and preview it in your browser. Here is the example presented in this tutorial.

Facebook comments:



Leave a Reply