Discuss

Navigation Align Options

On this page

You already know HOW TO CREATE A NAVBAR and in this tutorial we will take a look at the align options for the navbar items. This also applies to the Nav element (in case you are not using a navbar, but a nav on the page).

We added a simple navbar to the page. Select the Navbar Nav element:

Screenshot_9|690x368

First, let's set its width to 100%:

Screenshot_10|690x368

The align options are located in the Flex Flow section. The property you need to change is called Justify Content:

Screenshot_11|690x368

When the Start option is selected, the items are aligned left:

Screenshot_12|690x368

When the Center option is selected, the items are centered:

Screenshot_13|690x368

When the End option is selected, the items are aligned right:

Screenshot_14|690x368

When the Space between option is selected, the items are evenly distributed across the navbar. The first item is aligned to the left side of the navigation and the last item is aligned to the right end:

Screenshot_15|690x368

When the Space around option is selected, the items are evenly distributed in the nav but unlike the space between option, they have equal space around them:

Screenshot_16|690x368


WapplerPrevious|101x31   WapplerNext|77x31