3.2. Site Menu | Style

Build a desktop oriented menu for your Home Screen!

Step 8:

Size, and Margin

8.1. Set "sitemenumedia1" Size:

Width: 100 px

Height: 30 px

8.1. Written steps

-Inside the Properties Panel-

A. [Click] the Width size container and [type] the new value:

  • You can also change the size value using the up and down arrows.

  • The default Size of a new Div is Fixed, you do not need to change it.

  • The default Unit of Fixed size is Pixels, you do not need to change it.

B. [Click] the Height size container and [type] the new value:

  • You can also change the size value using the up and down arrows.

  • The default Size of a new Div is Fixed, you do not need to change it.

  • The default Unit of Fixed size is Pixels, you do not need to change it.

8.2. Set "menuusers" Alignment:

Main: Axis center

Cross: Axis center

8.2. Written steps

-Inside the Properties Panel-

A. [Click] the Main Axis center button, inside the Alignment section:

  • In the Top-Down first row of buttons, choose the Left-to-right second one.

  • The items are packed to each other toward the center.

B. [Click] the Cross Axis center button, inside the Alignment section:

  • In the Top-Down second row of buttons, choose the Left-to-right second one.

  • The items are packed to each other toward the center.

8.3. Set "sitemenutext1" Font Style:

[B] Bold

8.3. Written steps

-Inside the Properties Panel-

[Click] the B button, inside the Font Style section:

  • You can only select Bold, Italic or Normal, one at the time.

  • If changed before, the Bold toggle needs to be set to neutral and then back to Bold.

8.4. Set "sitemenutext1, sitemenutext2, sitemenutext3" Font Size:

16

8.4. Written steps

-Inside the Properties Panel-

[Click] the Font Size container and [type] the new value:

  • You can also change the size value using the up and down arrows.

8.5. Set "sitemenutext1, sitemenutext2 and sitemenutext3" Margin:

Left: 16 px

Right: 16 px

8.5. Written steps

-Inside the Properties Panel-

A. [Click] the Margin Left container and [type] the new value:

  • You can also change the size value using the up and down arrows.

  • The default Unit is in Pixels, you do not need to change it.

B. [Click] the Margin Right container and [type] the new value:

  • You can also change the size value using the up and down arrows.

  • The default Unit is in Pixels, you do not need to change it.

Step 9:

Border Color, Width, Radius, Padding, and Margin

9.1. Set "sitemenudiv1" Border Color:

E0E0E0

9.1. Written steps

-Inside the Properties Panel-

[Click] Border Color and [Type] the color:

  • You can type a 6 characters HEX code without the initial #.

  • You can select either a material color or a gradient.

9.2. Set "sitemenudiv1" Border Width:

1

9.2. Written steps

-Inside the Properties Panel-

[Click] the Width container, inside the Borders section, and [type] the new value:

  • The Border Width applies to all four sides of a Div.

  • You can also change the size value using the up and down arrows.

  • The default Unit is in Pixels.

9.3. Set "sitemenudiv1" Radius:

25

9.3. Written steps

-Inside the Properties Panel-

[Click] the Radius container, and [type] the new value:

  • The Radius applies to all four sides of a Div.

  • You can also change the size value using the up and down arrows.

  • The default Unit is in Pixels.

9.4. Set "sitemenudiv1" Padding:

Top: 10 px

Bottom: 10 px

9.4. Written steps

-Inside the Properties Panel-

A. [Click] the Padding Top container and [type] the new value:

  • You can also change the size value using the up and down arrows.

  • The default Unit is in Pixels, you do not need to change it.

B. [Click] the Padding Bottom container and [type] the new value:

  • You can also change the size value using the up and down arrows.

  • The default Unit is in Pixels, you do not need to change it.

9.5. Set "sitemenudiv1" Margin:

Left: 8 px

9.5. Written steps

-Inside the Properties Panel-

[Click] the Margin Left container and [type] the new value:

  • You can also change the size value using the up and down arrows.

  • The default Unit is in Pixels, you do not need to change it.

Step 10:

Margin, Font Size, and Icon Size

10.1. Set "sitemenutext4" Font Size:

14

10.1. Written steps

-Inside the Properties Panel-

[Click] the Font Size container and [type] the new value:

  • You can also change the size value using the up and down arrows.

10.2. Set "sitemenuicon1, sitemenuicon2, sitemenuicon3" Icon Size:

24

10.2 Written steps

-Inside the Properties Panel-

[Click] the Icon Size container and [type] the new value:

  • You can also change the size value using the up and down arrows.

10.3. Set "sitemenutext4, sitemenuicon1" Margin:

Left: 10

Right: 10

10.3. Written steps

-Inside the Properties Panel-

A. [Click] the Margin Left container and [type] the new value:

  • You can also change the size value using the up and down arrows.

  • The default Unit is in Pixels, you do not need to change it.

B. [Click] the Margin Right container and [type] the new value:

  • You can also change the size value using the up and down arrows.

  • The default Unit is in Pixels, you do not need to change it.

10.4. Set "sitemenuicon2" Margin:

Left: 10

Right: 4

10.4. Written steps

-Inside the Properties Panel-

A. [Click] the Margin Left container and [type] the new value:

  • You can also change the size value using the up and down arrows.

  • The default Unit is in Pixels, you do not need to change it.

B. [Click] the Margin Right container and [type] the new value:

  • You can also change the size value using the up and down arrows.

  • The default Unit is in Pixels, you do not need to change it.

10.5. Set "sitemenuicon3" Margin:

Left: 4

Right: 10

10.5. Written steps

-Inside the Properties Panel-

A. [Click] the Margin Left container and [type] the new value:

  • You can also change the size value using the up and down arrows.

  • The default Unit is in Pixels, you do not need to change it.

B. [Click] the Margin Right container and [type] the new value:

  • You can also change the size value using the up and down arrows.

  • The default Unit is in Pixels, you do not need to change it.

Previous3.1. Site Menu | ElementsNext3.3. Search | Elements

Last updated