Sticky Bar

Step 2 - Template >

Sticky Bar

Previous pageReturn to chapter overviewNext page
Show/Hide hidden text

When you scroll down a page, the header disappears at a certain point. The header usually contains important elements such as the logo, website title and, above all, the main navigation menu. If you want to avoid your visitors getting lost in your website, you can put these items in a bar that remains on view at the top of the browser window when pages are scrolled. This bar is called a Sticky Bar, because it stays stuck to the top of the window. You can use the options in the following sections to customize both its contents and graphics:

General
Contents

If you are working on a responsive website, you can customize the sticky bar for the various viewports in each breakpoint. In these cases, the window displays a Responsive Bar which reflects the bar in the Resolutions and Responsive Design window. The Responsive Bar reproduces all the breakpoints that have been set and, consequently, the screen resolution intervals: click on an interval to select it and define the graphic settings or contents of the sticky bar.

If you want to create a responsive website, choose the Responsive Site option in the Resolutions and Responsive Design window.

Click to expand/collapseReference: Commands in the General section

If you want an upper bar to remain on view when the header is no longer visible, you can select the Display an upper bar option.

You can customize the appearance of the sticky bar with the options in the Style section:

Background Color: indicates the color to use for the background.
Image File: indicates the image file (.JPG, .GIF, .PNG.) for the picture to use as the background. The image may be in the online library, which you can open with the button, or in one of your offline folders which you can select with the File selection button.
Repeat: this indicates whether the background image is to be repeated. Images can be repeated horizontally, vertically, or in both directions so that it takes up all the available space. The image can also be resized so that it covers the entire background. In this case, the original proportions may not be maintained.
Alignment: indicates how the image is to aligned with the sticky bar.
Height: gives the height (in pixels) of the sticky bar.
Opacity: you can set the amount of transparency of the sticky bar's background color. Values closer to 0 increase transparency, letting the page's contents show through.
Extend to the width of the browser window:   if this is selected, the sticky bar will occupy the entire width of the browser window, and not just the width of the page contents.
Click to expand/collapseReference: Commands in the Contents section

After defining the appearance of the sticky bar, you then have to work on its contents.

The graphic editor for working on the sticky bar is the same as the editor that you use for the template (in the Template Content window). This editor has a Toolbar and, underneath it, the work area which automatically shows the background image. The image is shown on a 1:1 scale, and you can scroll it, if necessary. Any changes you make with this editor will be shown in real time in the image.

There is a Status bar immediately underneath the image that gives this information:

Position: this displays the x and y coordinates of the upper right corner of the selected object, with respect to the area occupied by the sticky bar.
Size: this gives the height and width in pixels of the selected object.

There is a list of all the objects that can be used in the sticky bar underneath the status bar.

These objects are the ones used to compose the pages (see Step 4 - Pages): they are easy to identify, thanks to the filters, and there is a preview available for each one.

All the main elements that have been added in the header (a logo, website title and the main navigation menu, etc.) should be included in the sticky bar.

 


Best practices:

-

How to work with the templates

-

Where to find new templates for WebSite X5