Documentation
Low-code
Low-code
  • What is Agua?
  • Quick Start
    • AirBnb: Tutorial
      • Component: Button
      • Component: Card
        • Card's Tag
        • Card's Images
        • Card's Info
      • Home Header
        • 1. Banner
        • 2. Divider
        • 3. Desktop Menu
          • 3.1. Site Menu | Elements
          • 3.2. Site Menu | Style
          • 3.3. Search | Elements
          • 3.4. Search | Style
        • 4. Tablet Menu
          • 4.1. Menu | Elements
          • 4.2. Menu | Style
  • Daily Use
    • Basics
      • Initial Setup
      • Project structure
        • .agua folder
      • Project persistence
        • Saving your project
        • Deploy Locally
  • Help and Community
    • Support
    • Latam Community
    • Global Community
Powered by GitBook
On this page
  • Step 6
  • Step 7
  • Step 8
  • Step 9
  • Step 10
  • Step 11
  • Step 12
  1. Quick Start
  2. AirBnb: Tutorial
  3. Home Header
  4. 4. Tablet Menu

4.2. Menu | Style

Build a desktop oriented menu for your Home Screen!

Previous4.1. Menu | ElementsNextBasics

Last updated 1 year ago

Step 6

You will:

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

You will:

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

You will:

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

You will:

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

You will:

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

You will:

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

You will:

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