Horizontal menu

Current Wild Apricot templates all use a 'vertical' menu - placed on the left side of the web page.
We have been getting more and more requests for 'horizontal' menus - the ones which are stretched at the top of your webpage below the header.
Several brave souls have attempted to implement horizontal menu on their own using 5. CSS Customization - and were able to achieve a pretty decent look for the public/member view of the website. However, they have all faced a big hurdle in maintaining the administrator functionality for the menu - viewing the full page tree, renaming and moving the pages.
Proper support for horizontal menus is in our development queue and enhancement will be released soon.
In the meantime, here is a workaround you can use right now - which works with current templates via Advanced CSS customization.
It is not perfect - for example, second and third level pages are displayed below the main menu when the section/page is selected (instead of being shown/hidden away dynamically), which can push down the content and make the site look messy if you have many pages.
Nevertheless, we hope some of you will find this information useful

Starting point

here is a simple Wild Apricot website, using one of our templates with the menu on the left:

(Note this screenshot shows that we have already changed the color of the login area labels to be white since later on they will be displayed on the green background)

CSS Wizardry

Here are the two CSS classes available in Wild Apricot which will help us to deal with the challenge described above (maintaining the administrator functionality for the menu) :

BODY.adminContentView
BODY.publicContentView

These classes allow for different CSS used in the public/member view vs. administrator view. In admin view, adminContentView will be automatically assigned to BODY, while in public view, publicContentView is assigned to BODY.

Now to the practical example.
(To apply this, copy-paste all three code sections via 5. CSS Customization into your own site)

General fine-tuning

This CSS code applies to both admin and public views. It makes the page content area the same width as the page width.

#idPrimaryContentContainer
{
        width: 919px;
        margin: 0px;
}

#idPrimaryContentBlock1ContentHolder,
#idPrimaryContentBlock1Content
{
        width: 861px;
}

CSS for Admin view

This CSS code will only get activated in admin view. It widens the page to fit the menu and page content.

BODY.adminContentView #idMainContainer,
BODY.adminContentView #idContentContainer
{
       width: 1131px;
}
BODY.adminContentView #idNavigationContainer
{
       margin-right: 10px;
}

BODY.adminContentView #idHeaderContainer,
BODY.adminContentView #idFooterContainer,
BODY.adminContentView #idHeaderSeparator
{
       margin-left: 212px;
}

CSS for Public/Member view

This CSS code will only apply to Public/Member view to do the following:

flow the menu horizontally
move login box to the header
minor positioning and visual tweaks

BODY.publicContentView #idNavigationContainer,
BODY.publicContentView #idMainMenu
{
        width: 919px;
}

BODY.publicContentView #idNavigationContainer
{
      margin-bottom: 15px;
}

BODY.publicContentView #idNavigationContainer DIV
{
      float: left;
}

BODY.publicContentView #idMainMenu UL,
BODY.publicContentView #loginData DIV
{
      float: none;
}
BODY.publicContentView #idMainMenu UL
{
      clear: both !important;
}
BODY.publicContentView #idMainMenu LI,
BODY.publicContentView #idMainMenu LI.itemCurrentLeaf SPAN SPAN
{
        float: left;
        width: auto;
}

BODY.publicContentView #idMainMenu LI A
{
        width: auto;
}

BODY.publicContentView #idLoginContainer
{
        position: absolute;
        top: 10px;
        right: 10px;
}
BODY.publicContentView #idMainMenuContainer
{
        border-top: none;
}
BODY.publicContentView #idMainMenuContainer .inner
{
        padding-bottom: 1px;
}

The result

Admin view

Here is the admin view of the same site after applying the CSS code above:
(the picture is resized since it has actually become wider)

You can see all the pages on the left and all the editing functions and indicators are functioning properly.

Public view

Here is the public view of the homepage:

And here is how the menu expands when the top level page is selected:

And here is how it looks when the next level is expanded:

This article is intended for advanced users with in-depth knowledge of HTML and CSS. If you use it, you are on your own - we most probably would not be able to provide help to fine-tune the implementation details specific to your template and site-specific customizations.