Category Archives: RASA Dreamweaver Template Tutorials

Rasa Dreamweaver Tutorials: Menus and Navigation

In this segment of our continuing series of tutorials, we explore how to modify the menus and navigation of the Rasa website template for Dreamweaver.



Top Menu


Tutorial: Step by Step

The Top Menu is a bootstrap ‘dropdown’ menu component that allows for sub menus. We’ve further modified the bootstrap menu to allow for multiple levels of sub menus. Please consider mobile users when designing your Top Menu, as a large number of menu buttons will be more challenging for mobile users.

We’ve also included the OffCanvasMenu for both mobile and desktop users that way you have an alternate navigation method for sites with large numbers of menu links.

The Top Menu is a styled ‘bullet’ list. Indented items provide the sub menu buttons.

add or remove a menu button
  • open the Library / shared folder
  • open the menu-top Library page
  • edit current links
  • use the hyperlink tool to update
creating a sub dropdown
  • use the indent tool to create a dropmenu link
  • make sure the top level button is linked to a # sign as in:
    <a href=”#”> ../../pagename.htm</a>

**NOTE** Top Level Menu buttons that include a dropdown sub menu should NOT link to a page directly, as this will not work for users with touch screens such as tablets, and mobile phones. Watch the video for details.

Tutorial: Video Demonstration


Off Canvas Menu


Tutorial: Step by Step

The OffCanvasMenu is a simple bullet list with the list items linked to your web pages. Use the hyperlink tool to update the current links, or just add and remove bullet items, then link the bullet item to your new pages.

add or remove links
  • open the Library / shared folder
  • open the offcanvasmenu Library page
  • update, add or remove list items
  • link the list items to your web pages

Tutorial: Video Demonstration


Side Menu


Tutorial: Step by Step

The Side Menu is only used in two pages, and those pages are only included in the Pro Package. The Site Menu is a bullet list, where the main or top level menu item has a class of ( class=”downarrow” ) applied to it. The top level menu item can only link to the # sign, it can not link directly to a page as the top menu it used to trigger the sub menu to open, when clicked. A user on a touch screen would not see the sub menu open if the top menu was linked to a page.

add / remove and update the sidemenu
  • open the Library / shared sidemenu page
  • you can add or remove items from the existing bullet list
  • to add or remove menu items, switch to code view, copy/paste or delete the commented sections for each button

Tutorial: Video Demonstration


How many menu buttons should I have


Tutorial: Step by Step

You can technically include as many top level and dropdown menu buttons as you like, but there is a limit to the amount of space you have to fit those buttons. We’ve included 4 buttons, all using short button names. On a larger monitor resolution you can fit up to 8 menu buttons with short names, however on smaller monitors you can’t, you can only fit about 4 comfortably. This is also why we’ve included the offcanvasmenu, that way you can fit more menu items into a secodary navigation, and save the top menu for your primary links only.

As long as you continue to test and preview your web pages by either resizing the browser, of better yet, use your Google Chrome web browser, and the mobile testing option in the developer tools, and you’ll see how much room there is at different resolutions.

We’ve ‘upped’ the breakpoint for the bootstrap menu to collapse into it’s mobile view from 768px to 992px giving you a bit more room for menu buttons.

Tutorial: Video Demonstration


Change the font size and padding to fit more buttons


Tutorial: Step by Step

One of the tricks to fitting more menu buttons, aside from just reducing the amount of characters in your button names, by using shorter names is to reduce the actual padding or spacing between each button.

There’s about 30 pixels of padding on each side of a button, giving a total of 60 pixels of spacing. You can reduce this by following these steps.

change button padding
  • open the Shared / styles / shared.css
  • search for ( approx line 316 )
    .navbar-default .navbar-nav > li > a
  • locate the padding
    padding: 30px 15px 29px 15px;
  • change the 30px and the 29px to equal but lower numbers
  • save and preview
  • adjust some more if need be
  • repeat preview

Tutorial: Video Demonstration