Compatibility:

WebSite X5 Evo and Pro

The Header of a website will be hidden at certain point when scrolling down the page. The Header typically includes important elements, such as a logo, a title and the main navigation menu of course.


In order for your visitors not to lose themselves when browsing your website, you can report these elements on a bar which stays visible in the top section of the Browser window even by scrolling down the page.


This bar is called a  Sticky Bar and it can be customized both as far as its graphic style and its contents are concerned. 


Activating the Sticky Bar and setting up its style

To add a Sticky Bar onto your website, you need to follow these steps:

  • Go to Step 2 - Template Settings and click on Sticky Bar.
  • Stay in the General section and activate the Display an upper bar option 
  • Use the available options to define the background color or image, so to customize the bar according to your needs.
  • If you want to make the Sticky Bar to be as wide as the whole Browser window, activate the Extend to the width of the browser window option.


Defining the contents of a Sticky Bar

Once you've defined the style for the Sticky Bar, you need to move on to its contents.

  • Open the Contents section of the Sticky Bar window.

As you can see, in this section you can use a graphic edition which is identical to the one available for the Template in the Template Content section. This editor reports a Toolbar and a work space underneath which automatically takes on the background image with a 1:1 ratio. In this area, you will see all the changes applied in real time.

  • Select the necessary Objects from the list and drag them onto the workspace to set up your Sticky Bar.
  •  As always, use the selection handles or the commands in the Toolbar to move, resize and align the Objects. By double-clicking on the inserted Object you can open the settings window.


#tip - In the Sticky Bar, you should only report the most important elements of the Header, such as the company logo, the website title and the navigation menu.


If your website is responsive

If you want to create a responsive website (you have activated the Responsive Site option on Step 2- Template Settings > Resolutions and Responsive Design) in the Sticky Bar window you can use the Responsive Bar reporting all the breakpoints by creating some intervals.


You can manage the visualization of the Sticky Bar for each breakpoint by following these steps:

  • When you access the Sticky Bar window for the first time, the Responsive Bar will automatically show the Desktop viewport. Define the structure by following the above reported steps without changing interval.
  • When you are happy with the result for the Desktop resolution, select the following interval on the Responsive Bar.
  • The available space is now reduced: consider if it is possible to keep all the Objects. You can make an Object no longer visible by selecting the   Show/Hide button: you can choose to hide the Object for the current resolution as well as for the lower ones.
  • Use the Responsive Bar  to select all the intervals one by one and to manage the Objects' visualization for the different resolutions.
  • You can show an Object you had previously hidden by selecting the desired interval on the Responsive Bar and by using the Show/Hide button to select Hidden Objects management from this viewport. You will find the list of the hidden Objects: choose the one you want to show and click it to make it visible again.  


#tip - See How to set up the Template of a responsive website for more information.