4.2. Menu | Style

Build a desktop oriented menu for your Home Screen!

Step 6

6.

You will:

6. Video

6. GIF

6.1. Uncheck Visibility of "homemenutablet":

Visible: [unchecked]

6.1. Written steps

6.2. Open Tablet View:

6.2. Written steps

6.3. Check off Visibility of "homemenutablet:

Visible: [checked]

6.3. Written steps

6.4. Uncheck Visibility of "homemenudesktop":

Visible: [unchecked]

6.4. Written steps

Step 7

7.

You will:

7. Video

7. GIF

7.1. Update "homemenu" Padding:

Top: 15

Bottom: 15

Left: 40

Right: 40

7.1. Written steps

7.2. Set "searchmenutablet" Padding:

Top: 6

Bottom: 6

Left: 6

Right: 6

7.2. Written steps

Step 8

8.

You will:

8. Video

8. GIF

8.1. Set "searchmenutabletdiv1, searchmenutabletdiv2, and searchmenutabletdiv3" Margin:

Left: 10

Right: 10

8.1. Written steps

8.2. Set "searchmenutabletdiv4" Margin:

Left: 10

8.2. Written steps

8.3. Set "searchmenutablettext1, searchmenutablettext2, and searchmenutablettext3" Font Size:

14

8.3. Written steps

8.4. Set "searchmenutablettext1, and searchmenutablettext2" Font Style:

[B] Bold

8.4. Written steps

Step 9

9.

You will:

9. Video

9. GIF

9.1. Set "searchmenutabletdiv4" Background Color:

FF385C

9.1. Written steps

9.2. Set "searchmenutabletdiv4" Radius:

25

9.2. Written steps

9.3. Set "searchmenutabletdiv4" Padding:

Top: 8

Bottom: 8

Left: 8

Right: 8

9.3. Written steps

9.4. Set "searchmenutableticon1" Icon Size to:

20

9.4. Written steps

9.5. Set "searchmenutableticon1" Icon Color:

FFFFFF

9.5. Written steps

Step 10

10.

You will:

10. Video

10. GIF

10.1. Set "searchmenutablet" Border Color:

E0E0E0

10.1. Written steps

10.2. Set "searchmenutablet" Border Width:

1

10.4. Written steps

10.3. Set "searchmenutablet" Radius:

50

10.4. Written steps

10.4. Set "searchmenutablet" Shadow Blur:

5

10.4. Written steps

10.5. Set "searchmenutablet" Shadow Color:

E0E0E0

10.5. Written steps

Step 11

11.

You will:

11. Video

11. GIF

11.1 Set "sitemenumedia1" Image Source:

Assets/Brand/Airbnb_logo_icon.png

11.1. Written steps

11.2 Set "sitemenumedia1" Size:

Width: 30 px

11.2. Written steps

11.3. Set "sitemenutext4, and sitemenuicon1" Margin:

Left: 5

Right: 5

11.3. Written steps

Step 12

12.

You will:

12. GIF

12. Video

12.1. Open Mobile View:

12.1. Written steps

12.2. Uncheck Visibility of "homemenutablet":

Visible: [unchecked]

12.2. Written steps

12.3. Uncheck Visibility of "homemenudesktop":

Visible: [unchecked]

12.3. Written steps