Using the TopBar Extra Zone area


This is a basic overview on how to use the Extra Zone area in the TopBar stack for Foundation. First, start by adding Site Styles to your page, then add a TopBar and it should look like this:

Foundation TopBar and Site Styles in RapidWeaver

Then you need to click on the TopBar stack so you can get to the TopBar settings. Scroll all the way to the bottom of the settings and you will Extra Zone settings. See below:

Foundation TopBar Settings - Extra Zone Section

Turn the Zone Setup setting from Hide to Dropzone and you will see this happen to the TopBar stack in RapidWeaver:

Foundation TopBar with Dropzone turned on

The blue circle on the bottom will allow you to add other Dropzone areas. You can a lot, but do not use up too much room. In these Dropzones, you can drop any other kind of stack you want. Now, of course you have to be careful, like you do not want to put a slider or large image type stack. Most people use this zone for Social Icons and stuff like that.

You can also adjust the alignment of the zone, either left or right. This will be left or right of the menu items, not the Title and Slogan. There is also an option to but dividers between all of the zones you create.

The other setting for Zone Setup is custom. This is for people who want to make their own zones with custom HTML. If you are having issues using the custom setting, we suggest you check your HTML to be sure it is correct before contacting support for your issues, we can not help you write the HTML. If you choose the custom setting, the RapidWeaver screen will look like this:

Foundation TopBar Extra Zone set to Custom

Hopefully this explains how to use the Extra Zone in the TopBar stack. Please let us know if we can help you out with it in any other way by sending a ticket into support.

Now go forth and make your websites great!