Page Layout

Presets

Fooder
Portfolied
Supermint
Business

Edit colors

This is only a small part of customizable colors present in supermint



Choosing a navigation type

The first thing to ask is what is the type of navigation that best suits your project. Once the choice made, go to theme options pages in the sub topic Navigation / navigation style and select from options the one you want. Then read the section below that corresponds to your choice. Only the Mega-menu is common to both types of navigation.



Regular drop-down mode

Once type Regular drop-down mode selected, you can choose from three kinds of display submenu.

  1. Default : simple dropdown Default behavior
  2. Multi-columns : Display children as column (as in this demo site, under features) Activated by a attribute
  3. Mega-Menu : Display columns where content is keep from a Stack. Activated by the existence of a stack

Multi-columns

This mode requires that you have at least one level below the root level pages. In this case you can activate it by going to the attributes of the root this page and check the "Display multicolumns dropdown". Then you can fine-tune the display of columns through options for this mode.



Slide mode

The sliding navigation is an original effect where the full page slides down to reveal the subnav. You will find many options to take controls of the system in the options theme page

These subnav can be displayed in 3 different ways.

  1. Type 1 Level 1 & level2 with description
  2. Type 2 Level 1, level 2 & level 3
  3. Type 3 Level 1 & level 2 without description.

You can choose which type thanks to the page attribute on the root level page :

Type 1
#
Type 2
#
Type 3
#

Case study :

Imagine a site with four top-level page: Home, About, Work and Services.

The home page has no children. The attribute is left unchanged (fig 1).
The about page contains three sub-pages. We will use here the type 1, subpages appear here with a small description.

The Work page, it contains four subpage containing itself several sub pages: category pages (level2) and pages of work (level3). In this case we use the type 2 that displays the categories belonging and work there.
Finally, the Services page that contains a large number of services. We use here the type 3 to display a large number of pages at level 2. This type of navigation is also suitable for products of ecommerce, a portfolio, articles, ...

#

Mega menu

Both systems can display rich dropdown content. The mega-dropdown is just the display from a Stack on your dashboard. The system shows one stack by columns (with capabilities for assembling blocks on each other for certain columns) and can display the block name optionally.

Add a Mega-menu under a page

Create a stack named with the handle of the root page. If you root page is "My Page" the handle would be "my-page" so the name of the stack will be "mega_menu_my-page" (note the difference between _ and -).

Then, add block to the stack. On each block you can optionally click and choose "Advanced" to name your block. This name can be otpionally displayed on top of the block, into the mega menu.

Each block is rendered in a new column. To stack different block down the previous, start the name of the block by "-follow-". In this case the block will be rendered UNDER the previous. So a block you want to call "Our Features" call it "-follow-Our Features" to place it under the previous.

Lateral Mode

Lateral navigation is a modern way to display page links. It use also the quaternary color but this is overridable with whitch color you want in the theme customization. You will some option in the related section.

This navigation is activated by selecting theme in the navigation style option.

Example of Lateral navigation


Header & footer

You have seen in the example a logo on top and content on footer. Both are bocks keept from stack to let you a complete creativity and liberty on what to put on.

  • The header stack must be named Lateral Navigation Header
  • The Footer stack must be named Lateral Navigation Footer

Link style

To fit exactly to what you expect to have in your design, you can choose the font-family, from the one choosed in the font section, for the navigation links. You can also choose to uppercase links.

Wide Large Top drop-down mode

This Mode display a full width bar with items inside. This mode work well when the top bar is hidden. The logo come from a stack named Site Logo.

Example of Wide top navigation

Mobile navigation

They are different way to archieve a navigation for small screen.

The first is to add a autonav in the Sitewide Responsive Navigation. On this block set as custom template Supermint Full Screen or Supermint Mmenu. Both display a top bar once the screen is smaller that 768px. Both can display on this bar a logo, where content are take from the Stack Site Logo, display a search box on the right if a result page is choose in the theme option page. Both have options in the theme option page. Try it to find which one fit your need.

The second way is to work with lateral navigation that provide a button on small screen to open/close the lateral navigation

#