# 3.2. Site Menu | Style

## Step 8:

### Size, and Margin

{% tabs %}
{% tab title="8." %}
{% tabs %}
{% tab title="8. Video" %}

{% endtab %}

{% tab title="8. GIF" %}

{% endtab %}
{% endtabs %}

### **8.1.** Set "sitemenumedia1" *Size*:

> **Width***:* `100 px`
>
> **Height**: `30 px`

<details>

<summary>8<strong>.1. Written steps</strong></summary>

#### -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.

</details>

### 8.2. Set "menuusers" *Alignment*:

> **Main:** `Axis center`
>
> **Cross:** `Axis center`

<details>

<summary>8<strong>.2. Written steps</strong></summary>

#### -Inside the **Properties Panel**-

#### **A. \[Click]** **the&#x20;*****Main** Axis center* **button,** inside the Alignment sectio&#x6E;*:*

* 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&#x20;*****Cross** Axis center* **button,** inside the Alignment sectio&#x6E;*:*

* 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.

</details>

### 8.3. Set "sitemenutext1" *Font Style*:

> `[B] Bold`

<details>

<summary>8<strong>.3. Written steps</strong></summary>

#### -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.

</details>

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

> `16`

<details>

<summary>8<strong>.4. Written steps</strong></summary>

#### -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.*

</details>

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

> **Left:** `16 px`
>
> **Right:** `16 px`

<details>

<summary>8<strong>.5. Written steps</strong></summary>

#### -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.

</details>
{% endtab %}
{% endtabs %}

## Step 9:

### Border Color, Width, Radius, Padding, and Margin

{% tabs %}
{% tab title="9." %}
{% tabs %}
{% tab title="9. Video" %}

{% endtab %}

{% tab title="8. GIF" %}

{% endtab %}
{% endtabs %}

### 9.1. Set "sitemenudiv1" *Border Color*:

> `E0E0E0`

<details>

<summary>9<strong>.1. Written steps</strong></summary>

#### -Inside the **Properties Panel**-

#### **\[Click]&#x20;*****Border Color*****&#x20;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.

</details>

### 9.2. Set "sitemenudiv1" *Border Width*:

> `1`

<details>

<summary>9<strong>.2. Written steps</strong></summary>

#### -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.*

</details>

### 9.3. Set "sitemenudiv1" *Radius*:

> `25`

<details>

<summary>9<strong>.3. Written steps</strong></summary>

#### -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.*

</details>

### 9.4. Set "sitemenudiv1" *Padding*:

> **Top:** `10 px`
>
> **Bottom:** `10 px`

<details>

<summary>9<strong>.4. Written steps</strong></summary>

#### -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.

</details>

### 9.5. Set "sitemenudiv1" *Margin*:

> **Left:** `8 px`

<details>

<summary>9<strong>.5. Written steps</strong></summary>

#### -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.

</details>
{% endtab %}
{% endtabs %}

## Step 10:

### Margin, Font Size, and Icon Size

{% tabs %}
{% tab title="10." %}
{% tabs %}
{% tab title="10. Video" %}

{% endtab %}

{% tab title="9. GIF" %}

{% endtab %}
{% endtabs %}

### 10.1. Set "sitemenutext4" *Font Size*:

> `14`

<details>

<summary>10<strong>.1. Written steps</strong></summary>

#### -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.*

</details>

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

> `24`

<details>

<summary>10<strong>.2 Written steps</strong></summary>

#### -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.*

</details>

### 10.3. Set "sitemenutext4, sitemenuicon1" *Margin*:

> **Left:** `10`
>
> **Right:** `10`

<details>

<summary>10<strong>.3. Written steps</strong></summary>

#### -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.

</details>

### 10.4. Set "sitemenuicon2" *Margin*:

> **Left:** `10`
>
> **Right:** `4`

<details>

<summary>10<strong>.4. Written steps</strong></summary>

#### -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.

</details>

### 10.5. Set "sitemenuicon3" *Margin*:

> **Left:** `4`
>
> **Right:** `10`

<details>

<summary>10<strong>.5. Written steps</strong></summary>

#### -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.

</details>
{% endtab %}
{% endtabs %}
