Features

The Mega Menu stack is designed to allow you to create your own horizontal navigation systems without relying on the RapidWeaver page structure to create the page hierarchy. This does mean that you have to manually create and manage the structure of the navigation on your own, so with that in mind we recommend this stack be used in conjunction with Stacks’ Partials feature.

  • Create manually currated, horizontal navigation bars
  • Style the navigation and its dropdowns to match your site design
  • Set a separate styling for your navigation at the Mobile breakpoint
  • Capable of being used as a sticky navigation
  • Easily pair it with your Banner stack
  • Add branding to your navigation bar in the form of a site title and / or logo
  • Set different bar heights for each breakpoint
  • Auto detect the current page*
  • Allows for a Stacks drop zone in your dropdown menus
  • Can be used in conjunction with Anchor stack to create one-page sites

*Note: To use the Auto Detect feature you MUST enable Tidy Website Links in your project's Site Setup.


Example

We have setup a couple of separate pages to show the Mega Menu stack in action. Visit the example pages and play around with the navigation. Be sure to watch the tutorial videos on how to use the Mega Menu stack as well, which are found on this page.


Using Mega Menu

General

Full-width Inner Container
When enabled the contents of your navigation will extend to the full-width of your navigation.

Inner Max-Width
Set the maximum width for the inner contents of the Navigation Bar. This includes the branding elements as well as the navigation items.

Branding

Site Title
Enabling the Site Title allows you to manually enter a string of text that will be added to the navigation bar as your site title.

Site Title Text
Used to enter either your site title, or other text you’d like to see appear in your navigation bar.

Link Site Title
Allows you to add a link to your site title text. This is most often used to link to the home page of your site.

Site Title Color
Set the color of your Site Title text.

Mobile
This determines the font size of your Site Title at the Mobile breakpoint.

Tablet
This determines the font size of your Site Title at the Tablet breakpoint.

Desktop
This determines the font size of your Site Title at the Desktop breakpoint.

Uppercase
Force your Site Title text to be uppercased.

Alignment
You can opt to place your Branding content on either the left- or right-hand side of your navigation bar. This includes both the Site Title and the Logo.

Logo
When enabled you will be given a drop zone to add an image to your navigation bar as the Logo for your branding.

Navigation Bar

Navs Bar Colors
Choose the color for both the background and border of your navigation bar.

Border
Opt to include a thin border around your navigation bar.

Round Corners
You have the ability to round the corners of your navigation bar. You can choose to set the border radius for all of the corners the same, or by clicking on the + sign you can set each corner its on unique value.

Shadow
Allows you to add a drop shadow to the navigation bar. Enabling this feature lets you choose both the color and size of the shadow.

Navigation Bar Height

Mobile
The height your navigation bar will be at the Mobile breakpoint.

Tablet
The height your navigation bar will be at the Tablet breakpoint.

Desktop
The height your navigation bar will be at the Desktop breakpoint.

Navigation Items

Match Items to Nav Bar Height
This feature allows you to have your navigation items extend their background the full height of the navigation bar. Doing so allows for the active and hover styling to extend to the top and bottom edge of the navigation bar.

Alignment
You can set the alignment of your navigation items to the left- or right-hand side of the navigation bar, or opt to center the them. Centering the navigation items will forcibly hide your navigation bar branding.

Navigation Item Text Colors
Allows you to set the normal and active colors for your navigation bar’s text.

Active Bkg Color
You can choose to set a background color for the active navigation item.

Mobile Styling

We know that often times you wish to have a bit of different styling for your mobile navigation. The Mega Menu stack offers the following alternative color pickers for styling the navigation at the Mobile breakpoint.

Toggle Bkg
Set the normal and hover colors for the background of the mobile navigation toggle button.

Toggle Icon
Set the normal and hover colors for the mobile navigation toggle button’s inner icon.

Nav Item Text
Set the normal and active colors for the text within the mobile navigation.

Active Bkg Color
You can choose to set a background color for the active navigation item at the Mobile breakpoint.

Navigation Bkg
Set the background found behind the navigation items in your mobile navigation dropdown.

Button

Include Button
Enable to add a Foundry style button to the top level navigation bar. The button can be styled and linked, as well as aligned using the settings below.

Button Location
The button can be placed on either the left- or right-hand side of the navigation bar.

Button Label
The text that will appear on your button.

Button Link
Allows you to set where you wish this button to be linked to.

Button Size
Choose the size of your button. You can opt of a Small, Standard or Large button size.

Button Style
Set the color of the button to match your site using one of Foundry’s color swatch presets or make use of custom color pickers.

Block Button
Enable to make the button span the entire width of the its section within the navigation bar. The button’s width is flexible when enabled and will size down to fit the available space.

Outline
When using one of the color swatch presets you can use the Outline feature to inverse the button’s style.

Tooltip
Add a popup tooltip to your button. You can then set the tooltip text and its location, which can be set to either bottom, top, left or right.

  • Please Note: For Tooltips to work you must enable Tooltips in the Theme Vairations within the Foundry theme's settings!

Desktop & Tablet Sections
When the button is included in the Mega Menu navigation bar the bar gets divided into sections. These sections are treated much like the columns stack and divided into two areas measured in units. The full navigation bar is 12 responsive units wide. Whatever space is not used up by the button section (which has a maximum of 6 units in size) is used by the navigation items. You’ll need to adjust accordingly based on your button text size and your navigation items.

You can adjust the button section size at both the Tablet and Desktop breakpoints. It is unnecessary to set a section size for the Mobile breakpoint as the button section will always appear below the navigation items in the mobile drop down.

Advanced

Auto Detect Active Page
Within a the Mega Menu you can manually select that a navigation item is the Active Page. This is fine, but would cause you to need manually maintain a different navigation bar on each individual page. It you only have one or two pages, this isn’t a problem. For larger pages this may be tiresome. This is where the Auto Detect option comes in handy. Auto Detect looks at the current page URL and then scans all of your navigation items to find the one that matches the current page URL. It then marks that navigation item as the current Active Page.

  • Please Note: To use the Auto Detect feature you MUST enable Tidy Website Links in your RapidWeaver project's Site Setup. If you're not familiar with doing this, we walk through doing so in the Mega Menu tutorial video.

Collapse In Edit Mode
Since the Mega Menu is built manually through a series of child-stacks the content within Edit Mode can be quite vast. Enabling this feature collapses the Mega Menu content in Edit Mode so that it doesn’t take up a lot of space while you’re trying to work on the rest of your page.

Sticky Navigation

Sticky Navigation
Use this feature to allow the navigation to remain anchored to the top of the browser window as your visitor scrolls down the page. The navigation becomes "sticky" and anchors itself to the browser when the visitor has scrolled down the page enough so that the navigation touches the top of the browser window.

Banner Pairing

Pair with Parent Banner
If you place a Mega Menu navigation bar inside of a Banner stack you can have the navigation bar attach itself to either the top of bottom of the banner area by enabling this feature.

Child Stacks

The Mega Menu stack relies on a series on internal child-stacks to allow you to manually build out your navigation. Each child stack has a large number of its own options as well. Below we touch on each of these child-stacks’ options.

Sign up for The Forge newsletter

Stay up to date on future versions of Foundry, as well as important news, updates and more!

This site is built using Foundry for RapidWeaver

© 2006-2016 Elixir Graphics | Contact Us