blog-tutorial-post-template

Tutorials

Mega Menu

Getting Started

Mega Menu consists of 4 stacks total

  • Mega Menu (Main Stack)
  • Mega Menu Dropdown
  • Mega Menu Columns
  • Mega Menu Items

In order to get Mega Menu working, you will need to drag the mega Menu stack onto the stacks page. You will then see that it automatically adds 1 mega menu dropdown with 3 columns inside of it.

The way that Mega Menu works, is that you add a mega menu dropdown, and inside of that you add columns. Inside of those columns you can add Mega Menu items, which can be links, titles, text, or stacks!

This is the basic setup for a mega menu. Add in your dropdowns, then your columns, and then your items.

Edit Mode

Collapse all in edit mode (checkbox)

If this option is checked all mega dropdowns will be collapsed in edit mode. This helps for condensing the stack so it doesn’t take up as much space.

General

Position

  • Fixed
  • Inline

Mega menu can be set to be fixed to the page, or inline with your content.

If the fixed option is checked, you will see another dropdown appear that will allow you to choose whether the menu be placed on the top or the bottom of the page.

Z-Index

This controls the vertical index of the menu. Increase or decrease this to place the menu on top or below other fixed items on your page.

Max width

The max width option simply controls the maximum width of the menu itself.

Margin

The margin controls the space around the mega menu. If the menu is fixed, this margin controls the amount of space between the edge of the browser window and the menu.

This can be used to offset the menu from the edge of the page.

Breakpoint

At a certain point, mega menu becomes completely responsive, transforming into a mobile dropdown menu. This breakpoint determines the pixel width that the menu will transform.

The main menu section controls the very top level items in the menu.

Item Text Size

This controls the font size of the very top level (main) items of the menu.

Item Icon Size

This controls the font size of the icons next to the top level menu item text.

Item Padding

These two inputs control the amount of padding around the text/icons of the main menu items.

Main Item Font

Here you can select a font for the top level menu item text.

Mega Dropdowns

Here you will find the majority of styles for editing the dropdown menus.

Content Align

This refers to the text alignment for each column of the dropdown menus. You can basically think of it as Text Alignment

Min Height

Here you can set a minimum height for the dropdown menus. This is useful when you want to have a set height for the mega menu.

Column Padding

These two inputs control the amount of vertical/horizontal padding aroudn the outside of each column

Item Padding

These two options control the amount of padding around the Mega Menu Item stacks such as links/titles/text/ or stacks.

Link Size

This simply controls the font size of Mega Menu Item links in the dropdown menu.

Text Size

This simply controls the font size of Mega Menu Item text in the dropdown menu.

Title Size

This simply controls the font size of Mega Menu Item titles in the dropdown menu.

Title Spacing

This controls the amount of space below each Mega Menu Item title.

Title Weight

Here you can choose whether titles be bold or just normal.

Title Case

Here you can choose whether titles be uppercase or just normal case.

Icon Spacing

This controls the amount of space between title/link icons and the text.

Mega Dropdown Font

Here you can specify the font family for the mega dropdowns, this includes links/titles/text/etc.

Header (Logo & Toggle)

Mega Menu comes with a built in Logo and a toggle when the menu becomes responsive. Here you will find a couple of options for custimizing the sizing of both of these.

Logo Size

The font size of the logo

Toggle Size

The Size of the Toggle Icon (The outer size of the icon is calculated automatically)

Colors

With Mega Menu, all of the colors can be shared or set individually for each column. You can set the shared controls on the main Mega Menu stack. If you want to have custom colors for a particular column, then you can simply click on the column stack, and then check the (use custom colors) option, which will override the shared colors.

Logo Color

The color of the logo text.

Toggle Icon (Initial & Hover)

The color of the toggle icon on mobile devices

Toggle Background (Initial & Hover)

The background color of the toggle icon

Main Item Text (Intial & Hover)

The color of the top level items of the menu.

Main Item BG (Intial & Hover)

The background color of the top level items.

The color of Mega Menu Item links in mega dropdowns.

The color of Mega Menu Item Text in mega dropdowns.

The text color of Mega Menu Item Titles in mega Dropdowns.

Title Border

The border color of Mega Menu Item Titles in Mega Dropdowns.

Thickness

This controls the thickness of the border for Mega Menu Item Titles.

This controls the background of the mega dropdowns! It can be set to:

  • A single color
  • A gradient (two colors)

This controls the background of mega menu overall. It will control the background behind the logo & top level items, and the background of the stack on mobile devices. It can be set to:

  • A single color
  • A gradient (two colors)

Quick Links

RapidWeaver Stack Tutorials

RapidWeaver Theme Tutorials

RapidWeaver Project Documentation

Tutorials and documentation for all 1LD Project files can be found at the link below.

See Documentation

Get the power of a framework, for the price of a theme, in the convenience of a prebuilt RapidWeaver project file

Blog

Live Search 2

  • Posted On

Live Search 2 has been updated with new features, improvements, and important bug fixes – all designed to make your site’s search experience even faster and more precise.

This update is free and automatic for all existing customers.

Don’t own it yet? Now’s the perfect time to jump in — Live Search 2 is 30% off for a limited time! No code needed — your discount is automatically applied at checkout.

New Features:

  • Added support for exact match searches using quotation marks around parts of a search phrase.
  • New option to show a “Clear Input” button.
  • Added Replace Character feature.
  • Now supports two separately defined search bars on the same page.
  • New option to adjust z-index.

Improvements:

  • Index file generation now detects and ignores duplicate content, such as text found in every page header and footer.
  • If any pages are missing from the index file, they will now still be searched dynamically.
  • Index file data is now compressed to reduce file size.
  • Pages at https://website/folder/index.(php|html) and https://website/folder/ are now treated as duplicates and will not be indexed separately.
  • Search results container height now only stays fixed during pagination — it will shrink dynamically for new searches.
  • When searching custom sitemaps, the default sitemap will now be ignored.
  • The popout search results container will now automatically hide when the search input is empty.

Bug Fixes:

  • Fixed an issue that prevented custom text/language settings from applying correctly.
  • Fixed a bug where result descriptions could fail to display a local section title.
  • Fixed a bug that could trigger an error if suggestions were enabled but the stack was not published to the page.
  • Prevents form submission before the page is fully loaded, avoiding unwanted page refreshes on slow-loading pages. A loading indicator is shown until the page is ready.

Check it out in action!

© 2011 One Little Designer, 1 Little Designer (1LD)

RapidWeaver is a trademark of Realmac Software