Fill available space

This setting is available in the blocks within the Main navigation and Multicolumn sections โ€” it allows the available blocks to fill the remaining horizontal space in the section. You can use this setting to build unique section layouts which fit your needs and content.

This setting can be a little confusing at first, but we think you'll get the hang of it quickly โ€” and once you do, it can be a powerful tool which enables limitless flexibility.

๐Ÿ‘‰ Learn about usage in Main navigation section

๐Ÿ‘‰ Learn about usage in Multicolumn section

Introduced in Align v1.2 is a new setting for all blocks within the Main navigation section called Fill available space.

๐Ÿ‘€ Video screencapture showing the Fill available space setting in all Main navigation blocks.

The setting basically tells the block to use whatever space is remaining in the section, and is used to "anchor" different blocks as needed on the left or right of the navigation on desktop โ€” mobile navigation is not affected by this setting! (You don't need to know this, but this setting is based on the CSS flex and flex-grow rule.)

A few examples

Default - Small search field anchored to the right

Default view
๐Ÿ‘€ Screencapture showing the default Fill available space setting applied to the Main menu block.
Spotlight on default view settings
๐Ÿ‘€ As you can see, the Fill available space setting pushes everything to it's right, which anchors the other blocks to the right.

Mega menu only

Mega menu only
๐Ÿ‘€ Screencapture showing the Fill available space setting applied to the Mega Menu block. As you can see it behaves very similarly to the previous/default example.
Mega menu spotlight settings
๐Ÿ‘€ The setting fills the remaining space which anchors everything to the right.

Centered logo

In general โ€” though not required โ€” you'll only want one block to have this setting checked. If multiple blocks are checked, they will "share" the remaining space.

You can use this to get more creative with your layouts. Below is an example showing how you might apply this setting to two blocks to center your logo.

In this example, please note that the left and right sides need to be the same width, so this only really works with certain block combos. We're looking into a better solution in a future release!

Centered logo
๐Ÿ‘€ A sample layout showing a centered logo.
Centered logo spotlight settings
๐Ÿ‘€ You can see the space being split with the other block and pushing the other items to the right.
Center menu spotlight settings
๐Ÿ‘€ Applying the same setting to another block will make each "share" the available space. This will be evenly split between the blocks.

The best way to learn about this is to play with it! So go check it out!

Within the Multicolumn section

Setting option(s)

Checkbox to enable the "fill available space" setting.

Basic usage

  • Set multicolumn section "desktop column count" setting to 3
  • Add two blocks into the section
  • Check the "fill available space" in the settings of the last block
  • This will result in a layout where the first block takes up ยฑ33% of the section width, while the second one will take up the rest ยฑ66% of the section width
  • Set multicolumn section "desktop column count" setting to 4
  • Add three blocks into the section
  • Check the "fill available space" in the settings of the second block
  • This will result in a layout where the first and last blocks take up ยฑ25% of the section width, while the second one will take up the rest ยฑ50% of the section width

Align theme