[All Adaptavist Apps]
This tutorial explains how to create right-aligned menu items...
Items on the menu bar are all left aligned by default, with each item appearing after the next:
Home
RSS Feed Builder
[Contact Us]
However, there may be times when you want to right-align some menu items, for example:
Home
RSS Feed Builder
[Contact Us]
This can be achieved as follows...
The first thing we need to do is add a bit of CSS to the "Custom CSS" area in the theme configuration screen:
/* Stop menu items wrapping */ div.dynarch-horiz-menu table tr td { white-space: nowrap; } /* Provide support for menu spacers */ div.dynarch-horiz-menu table tr td.spacer { width: 100%; } div.dynarch-horiz-menu table tr td.spacer div { display:none; }
(We'll probably include this CSS by default in future versions of Builder but for now you have to add it in manually)
Now that we've added the CSS, we need to add a spacer menu item in to our menu. For the example shown earlier on this page, the following notation was used:
{menubar} {menuitem}{menulink:home}Home{menulink}{menuitem} {menuitem}{menulink:rss}RSS Feed Builder{menulink}{menuitem} {menuseparator:class=spacer disabled} {menuitem}[Contact Us|ADAPTAVIST:Contact Us]{menuitem} {menubar}
As you can see, the menuseparator macro has been used to include our spacer. It defines a few specific classes as follows: