A bar is a thin module which appears at the top or bottom of the browser window.

Note: the bar module does not support the headline config property.


Position of the bar module relative to the browser window.

position string
Value Behavior
top default module is absolutely positioned to the top of the window
top-fixed module sticks to the top of the window when scrolling
bottom-fixed module sticks to the bottom of the window when scrolling

Positions - Live Preview

Position Bar Modules


Optionally define the DOM selector of the parent element you would like to insert the module into an element besides the document body.

Note: Depending on which position your bar has, it may or may not "appear" within your selected element. top-fixed and bottom-fixed use the position: fixed css rule, so while the HTML for your bar will be inserted into the DOM element defined by positionSelector it will appear fixed and full width on the page.

positionSelector string
Value Behavior
selector Javascript selector of an existing div on the page where the module should appear.

Custom Position - Live Preview


Variant determines any extra content that may be used by the module.

variant int
Value Behavior
1 default text-only-module
2 module includes an image


Define the featured image you would like to use for the module.

Note: This setting is only valid for modules with a variant value of 2.

Key Type Behavior
image string URL of the image to feature

Image (variant 2) - Live Preview

Image Bar Module


For top or top-fixed positioned bars, we can select an element to push down (add a top margin) so it doesn't get covered by the module. This is especially helpful for a top-aligned site navigation.

Key Type Behavior
pushDown string selector of the element that should move down with the bar

Live Preview

pushDown Bar Module