menus

Accordions

Sometimes, you may find that a page or post has too much information and requires a lot of scrolling as a result. One way to fix this is by using collapsible accordions. You will need to use the Page Builder editor.

Creating Accordions

In Page Builder, create one new Visual Editor widget for each item in the accordion. In each Visual Editor widget, click on Attributes and check the box under Accordion, so that it is enabled. Then, add the title and content. Note that the title of the visual editor becomes the accordion header, and clicking on the title will expand the item's content. So, each Visual Editor with Accordion enabled must contain a title in the Title field.

If you stack multiple Visual Editors with Accordion enabled on top of each other (in the same column), they will be grouped together and as a result, clicking on one item’s title will expand its content while collapsing all other items.

Styling Accordions

Accordions are easily to style using your site's Custom CSS. We have also put together a guide with several pre-made accordion styles along with CSS that you can copy and paste onto your own website.

Below is an example of an accordion menu.

Panel 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam semper, justo sed ultrices aliquam, arcu tellus malesuada ante, eget faucibus ante ex id leo. Nunc rutrum, neque nec elementum vulputate, tellus nisi molestie neque, non viverra diam felis sollicitudin diam. Sed venenatis, ipsum sit amet pharetra congue, arcu velit viverra metus, sed iaculis neque libero ac lorem. Praesent dolor turpis, porttitor a augue ac, euismod suscipit magna. Nunc tellus tortor, dapibus at facilisis ut, maximus sed lacus. Nullam et est vitae mauris ornare accumsan. In eu dictum metus. Suspendisse ullamcorper ligula ut fringilla feugiat. Etiam iaculis consectetur varius. Phasellus hendrerit blandit lorem, commodo fringilla purus finibus at.

Panel 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam consequat commodo elit sit amet mollis. Sed condimentum ipsum sed nulla malesuada sagittis. In mattis interdum dolor eget tempus. Morbi dapibus volutpat arcu, et finibus mi ultricies quis. Donec blandit sapien enim, ut volutpat tellus tempus aliquet. Sed at turpis lectus. Ut sed posuere leo, sit amet condimentum sem. Nam bibendum augue lacus, nec laoreet diam congue et. Suspendisse eget rhoncus magna, ac tincidunt orci. Nam porttitor gravida urna id feugiat. Nullam consequat vehicula tortor, id interdum ex luctus vitae. Nullam dignissim tortor nec molestie condimentum. Donec ante turpis, varius a interdum nec, lobortis venenatis nunc.

Proin consectetur, quam quis cursus molestie, quam nunc blandit purus, eu facilisis augue nisl quis felis. In id fermentum felis. Curabitur nec felis sed elit rutrum malesuada sit amet nec ipsum. Donec ac efficitur dui. Fusce semper blandit purus, at eleifend arcu tristique commodo. Suspendisse turpis arcu, aliquet nec rutrum lacinia, interdum sed eros. Proin finibus, felis eget finibus molestie, erat ante mollis leo, et condimentum nunc lectus a velit. Proin et lacus posuere, tincidunt elit quis, dapibus augue. Fusce placerat tempus efficitur. Etiam nec facilisis velit. Curabitur vulputate dolor ac metus sollicitudin, in commodo lacus aliquam. Sed risus dui, fringilla non ultricies non, pellentesque non enim. Vestibulum ut ornare nulla, non malesuada erat.

Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam.

Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus.

Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede.

Panel 3

Integer sed laoreet justo. Cras quis urna rutrum, faucibus augue sed, vestibulum enim. Donec porta nulla quis neque rutrum pellentesque. Nulla gravida at dui quis vestibulum. Sed sed ante ac ipsum suscipit mollis. Mauris purus ligula, egestas vitae gravida viverra, tincidunt ac enim. Suspendisse iaculis sem eros, non iaculis est rhoncus sit amet. Aliquam elementum lacinia tempor. Integer accumsan lacus elit, nec mattis eros dictum in. Phasellus auctor est quam, nec euismod quam facilisis quis. Vivamus gravida ante venenatis, dignissim nunc et, pellentesque nisl. Suspendisse lobortis accumsan massa, consectetur fringilla sapien volutpat ut. Pellentesque at arcu at enim condimentum faucibus. Nullam at lectus augue. Curabitur vitae elit ipsum. Suspendisse vel convallis metus.

Maecenas vel finibus metus. Maecenas eu aliquam nunc. Sed eros nisl, ornare ut laoreet et, pulvinar vestibulum elit. Etiam ultricies pretium dignissim. Phasellus fringilla vestibulum erat, egestas faucibus purus congue ut. Aenean rhoncus maximus augue, quis bibendum velit laoreet et. Integer a consectetur enim. Sed cursus urna blandit dui elementum mollis. Praesent sit amet dolor imperdiet, cursus lacus id, venenatis urna. Aenean ac dolor lorem.

Here is what the edit screen of this page looks like:

easy-accordions-edit-screen

Note that only the second, third, and fourth Visual Editors have Accordion enabled.

Page Hierarchy

Breadcrumbs are based on the hierarchy of the pages. First you need to have a parent page. Then on the child(ren) page(s), choose the parent page in the Parent drop-down menu in the Page Attributes section on the right-hand side, and Publish or Update the page(s).
Page Attributes Parent Dropdown

When you go to the screen that lists all your pages, you can see that hierarchy shown with the dash next to the child(ren) page(s). In the screenshot below, Other Custom Plugins page is the child of Plugins page.

Page Hierarchy

Once the Breadcrumbs option is set to be On in Appearance > Customize > Navigation Options > Breadcrumbs, the breadcrumbs will display on top of the child(ren) page(s).

Precrumbs can be added to the left of the Breadcrumbs to add links to other pages or parent sites. Go to Appearance > Menus, click on create a new menu, enter “Precrumbs” as the Menu Name, add menus items and click Save Menu.

precrumbs

The Precrumbs and Breadcrumbs are displaying on the top of the Other Custom Plugin page now.

Changing Themes

On WordPress, it’s easy to change themes for a website. Simply go to Appearance > Themes, and you can preview how your site might look in another theme.

Before you decide to switch to a different theme, there are some things you should keep in mind.

The Good News

Switching themes does not destroy any pages or content that you’ve created for your site. Moreover, switching themes is reversible; if you change it and don’t like it, you can switch back.

The Tricky Parts

Top Navigation

When you switch themes, it’s possible for your top navigation menu to break. This can be fixed by going to Appearance > Menus, finding your Top Nav menu, and checking the ‘Primary Menu‘ checkbox.

Homepage

Many themes have a custom homepage page template that may not exist in a new theme. For example, switching from Hale to Sherman may wipe out the homepage. However, the widgets that created those homepages aren’t gone. If you go to Appearance > Widgets and scroll down, you’ll see them in an area for ‘unassigned widgets‘. Drag them back up to the correct sidebars and your homepage will reform itself.

In the newer themes (Hale 2015 and Sherman), you can use Page Builder to build the homepage and sub pages.  See Homepage Customization tools.

Sidebars

Some themes have sidebars that are specific to them and changing themes will move any widgets within those sidebars to the ‘unassigned widgets‘ section in Appearance > Widgets. You may need to find a new place to keep that content.

Bootstrap Layouts & Special Elements

The older Hale and Prudence themes were built on the Bootstrap 2 framework. The newer Sherman and Hale 2015 themes are built with the Bootstrap 3 framework. If your site makes use of Bootstrap columns, buttons, or accordion menus, they may not work if you switch from a Bootstrap 2 theme to a Bootstrap 3 theme.  They will fall back to being simple single column layouts, links, or text sections until you change the code to comply with the version of Bootstrap that your new theme uses.

Colorful Sidebar Menus

If you add a sidebar with a menu widget, you may notice that the menu is displayed in a very simple manner. Below is code that you can add to your custom CSS to add some style to your sidebar menu. This code will work with websites using the Hale 2015 and Sherman themes.

Code

#page-sidebar .widget.widget_nav_menu {
padding-left:0;
padding-right:0
}

#page-sidebar .widget ul {
margin:0
}

#page-sidebar .widget ul li {
padding:1em;
margin:0
}

#page-sidebar .widget ul li.current-menu-item,#page-sidebar .widget ul li.current-menu-item:hover,#page-sidebar .widget ul li.current-menu-item:active {
background:#0f4786
}

#page-sidebar .widget ul li:hover,#page-sidebar .widget ul li:active {
background:#dbe3ed
}

#page-sidebar .widget ul li.current-menu-item a,#page-sidebar .widget ul li.current-menu-item:hover a,#page-sidebar .widget ul li.current-menu-item:active a {
color:#fff
}
Note: The colors are marked in red — feel free to change them to whatever HEX codes you want!

Result

To see how this CSS code looks on an actual sidebar menu, visit the Development page.

Bootstrap-Specific HTML

Because both Sherman and Hale 2015 are Cornerstone-based sites, they support the features that come with the Boostrap 3 framework.  These features include, but are not limited to the following:

For additional information about the features that Boostrap 3 has to offer, you can visit the Bootstrap 3.3.4 website.

In-Page Menus

in-page-menus screenshot

This feature allows users to add a menu to a page. On the edit screen for any given page you will see a menu on the right entitled 'In-Page Menus'. Simply choose which menu you would like to have displayed and choose a style (Tabs on top of the page or List on the right). In page menus do not support nested menu items; they are only one level deep. Note that you can also have a menu displayed on the side of the page by adding a sidebar to it and configuring the sidebar to display the specific menu.

Navigation Options

Cornerstone-based sites have options for different navigation styles. These options are:

  • Dropdowns
  • Multi-level Dropdown
  • Tabs
  • MaxMegaMenu

Support

These menu options are only applicable if you are using one of the following themes:

  • Sherman
  • Hale 2015

Changing Your Navigation Style

On the dashboard go to Appearance > Customize. On the left, there will be an option for Navigation Options. Within that space, you will see a dropdown menu with the options listed.

If you do not see this option, you either are not using a supported theme or you have enabled the Max Mega Menu plugin. You will need to disable MaxMegaMenu before other options are available because that plugin overrides all other options.

Dropdown

This option begins with a simple dropdown for the first to level of navigation, with additional pages being displayed in a left navigation bar. This was the default navigation for all Sherman sites from Summer 2014 – Aug 2015.

Multi-Level Dropdown

This option expands the dropdown menu, and removes the left navigation. Dropdowns will expand to the side forever. We recommend not using this option for navigation that has more than 3 levels of depth, as it can be difficult for users to navigate the options. Large sites should consider using the Tabbed option.

Tabs

In this option, the first two levels of the navigation are exposed in horizontal bars and all other levels are available through dropdown menus.

Sticky Navigation

When set to be On, the top navigation will always sticks to the top of the screen as visitors scroll down pages.

Breadcrumbs

Breadcrumbs are based off of Parent/Child page heirarchy. When set to be On, breadcrumbs navigation will show up on child(ren) pages. For more information view our breadcrumb guide.

Editing Your Top Navigation Menu

  1. On your dashboard, go to Appearance > Menus.
  2. Locate the drop down menu towards the top of the page labeled 'Select a menu to edit' and select 'Top Nav'.
  3. Drag and drop to reorder the navigation items.

Creating a Dropdown Menu

To make a dropdown menu, first create a placeholder menu item.

dropdown-parent

The URL should be a pound sign, and the Label can be whatever you'd like to call this group of pages.

Home Link

The one menu item that won't appear in your menu is the "Home" link. It's inserted into the page for you, and will always be the first item.

Sticky Navigation

Sticky Navigation will "stick" your top navigation menu to the top of the browser window when your site's header scrolls out of view. To enable this, go to Appearance > Customize > Navigation Options > Sticky Navigation and under Sticky Navigation, select the On radio button.

Max Mega Menu

The Max Mega Menu plugin allows sites to have huge dropdown sections that can include menus, arbitrary text, images, or even widgets. It's supported by the Sherman and Hale 2015 themes.

This plugin is only recommended for users comfortable with using more advanced interfaces and site options. To enable this on your site, please contact the Aurora team, and we'll set you up.

Enabling the Mega Menu

Enable Mega MenuTo gain Max Mega Menu capabilities on a menu, go to Appearance > Menus and select your desired menu. On the right you'll see a panel labeled Max Mega Menu Settings, and in that panel you'll see the option to Enable the Mega Menu. Be sure to click Save after you check the box.

Mega Menu Settings

Under the panel labeled Max Mega Menu Settings, users can customize how the appearance of the menu.

The Event drop down allows you to choose whether a user must hover over a menu item or click on it to display its Mega Menu content.

The Effect drop down allows you to choose how the menu content appears on the screen (Fade, Fade Up, Slide, Slide Up) and with what speed (Slow, Med, Fast).

 

Editing Mega Menu Items

If the Mega Menu is enabled, you will see a Mega Menu button appear on each of your menu items as you hover over them. Click on one to edit that item as well as its sub menu. Within this editor you have three different tabs: Mega Menu, Settings, and Icon.

Mega MenuMega Menu Edit Screen pic

  • In the Mega Menu edit screen, you must first change the drop down menu labeled Sub menu display mode from Flyout menu to Mega Menu. If you keep it as Flyout menu, only the sub items listed underneath the menu item in your menu structure will appear and any widgets you had added to the item's Mega Menu will be disabled. When you switch to Mega Menu, you will be able to display widgets as well as sub menu items.
  • Add widgets to the mega menu by choosing them from the drop down menu at the top right. Once a widget is added, you can edit it by clicking on the wrench icon that appears in it.
  • You can choose how many columns your mega menu has through a drop down menu at the top right. In addition, you can choose the number of columns each individual widget takes up by clicking the left (decrease) or right (increase) arrows that appear on it. You may drag and drop widgets or sub menu items to rearrange them.

SettingsMega Menu Settings Edit Screen

  • The Settings edit screen contains various options for users to edit the appearance of the menu item, such as hiding the text, hiding the arrow, aligning it on the header, and disabling its link. Users may also choose to hide the item on mobile view or on desktop view. This edit screen also allows users to choose how the sub menu is aligned and whether to hide it on mobile.

Icon

  • The Icon edit screen gives users the option to choose an icon to be displayed next to the text on the menu item.