widget Archives - FROONT Documentation / Responsive web design tool

In FROONT there are multiple types of navigation menu widgets. They all are optimized for mobile views right out of the box. The only difference is the layout, like does it have a logo or not and is it centered or left aligned. The best way is to pick the one you want from the Library and then customize it to your needs.

To add a navigation menu go to Add content Library / Ready made.
To customize the navigation menu items:
To customize the logo:
To customize the looks:

If you want to go further get to Widget Properties Panel/Advanced/Position and make it fixed to the top:
If you are using fixed position change the Z-index as well to something like 2000 to make sure the navigation is always on the top. Learn more about Z-index.

Learn how to add links to your navigation items.

Background fill

To fill a background color to whole project page go to Properties Panel/Page/Appearance and type in a color into the Background input field

To Add one color background to your widget go to Widget Properties Panel/Background

To add image as a background go to Widget Properties Panel/Background and press the Add image button:

or double-click on the Widget.

Rounded Corners

To add rounded corners you need to select the widget and go to Properties Panel/Advanced/Border radius

If you need all four corners to be the same size then in the Border radius input field type only one value – for example 8px

This is what you get:

In case if you need different sizes for each corner – add four values: 8px 8px 3px 3px

Here’s the result:

Fixed Menu

To make a fixed menu like this:

1. First you have to switch to Advanced mode

2. Select the Navigation Widget in Widget Tree

and in Widget Properties Panel/Advanced/Position select FIXED

3. In Widget Properties Panel/Advanced/Z-index type in 3. The z-index property specifies the stack order of an element.

An element with greater stack order is always in front of an element with a lower stack order.