Documentation
HomeForumHelp
  • About Cwicly
  • Beginner's Guide
    • Install Cwicly
    • Getting Started
      • Overview
      • Settings
    • Edit and Manage your Site
    • The WordPress Dashboard
    • The Dashboard Menu
    • Site Editor
    • Create your Front Page
      • Front Page
      • Header
        • Header Template Part
        • Structure
      • Footer
        • Footer Template Part
        • Structure
  • ⚡Cwicly
    • Block ID
    • Breakpoints
    • Class
      • Global/Block Classes
    • Cloud Design Library
      • Create an Account
      • Overview of the Cloud Dashboard
      • Editor: Cloud Library
        • Access from the Editor
        • Add a Library
        • Switch between Libraries
        • Default Library
        • Download Library
        • Remove Library
        • Categories
          • All
          • Popular
          • Button
          • Composition
          • Decorative
          • Interactive
          • Layout
          • Media
          • Menu
          • Social
      • Design Blocks: Cloud Library
        • Search for a Design Block
        • Refresh
        • Add Design Block
        • Save Design to Library
        • Remove Design Block
      • Library Globals
        • Library: Global Styles
          • Library: Add Styles
          • Installation: Add Styles
          • Library: Style Settings
        • Library: Global Classes
          • Library: Add Classes
          • Installation: Add Classes
          • Library: Class Settings
        • Library: Global Stylesheets
          • Library: Add Stylesheet
          • Installation: Add Stylesheet
          • Library: Stylesheet Settings
        • Library: External Classes
          • Library: Add External Classes
          • Installation: Add External Classes
          • Library: External Classes Settings
      • Community Library
        • Save to Community Library
        • Download from Community Library
        • Remove from Community Library
        • Set Community as default
    • Colour Picker
      • Gradient Builder
    • Components
      • Components Library
      • Components Folders
      • Settings
      • Component Properties Modal
      • Properties (Add)
        • Text Property
        • Rich Text Property
        • List Property
        • Link Property
        • Image Property
        • Gallery Property
        • Video Property
        • Icon Property
        • Colour Property
        • Toggle Property
        • Number Property
        • Class Property
        • ID Property
        • Options Property
        • Conditions Property
        • Visibility Property
        • CSS Text Property
    • Copy/Paste
      • Block Styles
      • Classes & IDs
      • Dynamic Preview
      • Global Styles
      • Global Classes & Stylesheets
      • Blocks
    • CSS Grid
    • Dynamic Inserter
    • Font Manager
    • Navigator
    • Quick Inserter
    • Scaling
    • Smart Inserter
    • Span
    • Tag
  • ⛵Tailwind
    • Getting Started
      • About
      • Activate
      • Copy/Paste
      • Enable editing mode
      • Apply a Class
      • Pseudo state Management
      • Automatically Sync
        • Breakpoints
        • Colours
      • Shells
      • Custom Tailwind Configuration
      • Import Tailwind Plugins
  • 🖌️Themer
    • Themer
      • Templates
      • Parts
      • Fragments
    • Role Editor
      • User Role
      • Gutenberg Editor
      • Global Block Behaviour
      • Block Toolbar
      • Miscellaneous
      • Components
      • Code Block
      • Blocks
      • Post Types
      • Force iFrame
      • Client Canvas View
      • Help
      • User
  • 🌐Global Styles
    • Global Styles
      • Global Colours
        • Folders
        • Colour tab
        • Palette tab
        • Modifiers tab
          • Opacity
          • Lighten
          • Darken
          • Saturate
          • Desaturate
          • Spin
      • Dark Mode
      • Global Gradients
      • Global Typography
      • Global Block Typography
      • Theme Elements
      • Global Settings
        • Defaults
        • Backend
      • Remove Gutenberg Global Styles
    • Global Classes & Stylesheets
      • Global Classes
      • Global Stylesheets
      • External Classes
  • 🎨Design
    • Background
      • Background Colors
      • Background Source
      • Sizing & Positioning
      • Styling
    • Typography
      • Typography
      • Rem conversion
      • Global Typography
      • Text Align
      • Font Family
      • Font Size
      • Font Weight
      • Spacing
      • Line Height
      • Style
      • Decoration
      • Transform
      • White Space
      • Overflow Wrap
      • Word Break
      • Word Spacing
      • Axes
      • Text Colour
      • Link Colour
    • Fluid Values
    • Layout
      • Display
      • Visual
      • Position
    • Sizing
      • Height
      • Width
    • Margin & Padding
    • Borders
      • Border
      • Shadows
      • Outline
    • Effects
      • General
      • Transitions
      • Animations
      • Filters
      • Text Shadow
      • Tilter
      • Separators
    • Transforms
    • Pseudo Classes/Elements
    • Relative Styling
  • 🎓Advanced
    • Custom CSS
    • Quick Code
    • Scrolling
      • Animate On Scroll
      • Scroll Direction
    • Attributes
    • Tooltip
      • Source
      • Theme
        • Custom Theme
  • 👆Interactions
    • Visibility Conditions
      • Blocks
      • Themer
    • Link
      • Link Source
      • Link Action
    • Interactions
      • Trigger
      • Actions
    • Hover Animation
    • Dynamic Slider
      • Settings Tab
  • 🖥️Editor
    • Inserter Panel
    • Quick Insert
    • Block Inspector
    • Primary Tab
    • Design Tab
    • Advanced Tab
    • Responsive Selector
  • 🔧Blocks
    • Accordions
    • Accordion
      • Basics
      • Settings
      • Colours
      • Layout
      • Typography
      • Margin and Padding
    • Button
      • Add
      • Icon
    • Code
      • Enable/Disable
      • Add
      • Languages
      • Settings
    • Columns
      • Basics
      • Add
      • Settings
      • Grid Editor
        • Auto Grid
        • Auto Template
    • Column
    • Container
    • Div
    • Filter
      • Basics
      • Filter Editor
      • Create a Filter
      • Style a Filter (example)
    • Fragment
    • Gallery
      • Filter
      • Source
      • Settings
      • Text
      • Image Style
    • Heading
    • Hook
    • Icon
    • Image
      • Source
      • Size
      • Settings
      • Hover Animation
    • Input
      • Input Settings
    • List
      • List Types
      • Settings
      • Icon
    • Maps
      • Settings
      • Size
      • Style
      • Overlay Layout
      • Colours
    • Menu
      • Settings
      • Main Menu
      • Sub Menu
      • Items
    • Modal
      • Modal Style
      • Settings
      • Trigger
      • Animation
    • Nav
      • Nav Block Settings and Styles
      • Nav Items Block
      • Nav Dropdown Block
      • Nav Link
      • Custom Dropdown Block
      • Nav Menu
    • Post Content
    • Paragraph
    • Popover
    • Query
      • Query Settings
      • Query Editor
        • Posts
        • Terms
        • Users
        • Comments
    • Query Template
      • Layout
      • Grid editor
    • Repeater
      • Nested Repeater
    • Section
    • Slider
      • Settings
      • Navigation
      • Dots
    • Slide
    • Styler
    • SVG Block
    • Tab List
      • Tab
    • Tab Contents
      • Tab Content
    • Taxonomy Terms
    • Video
      • Source
      • Settings
      • Div Overlay
  • ⚙️Settings
    • Settings
    • License
    • Icon Collections
    • Font Sets
    • Google Maps API
    • Advanced Settings
    • Regeneration
    • WooCommerce
  • 🛒WooCommerce
    • Archive Page
    • Attributes
      • Colour Type
      • Image Type
    • Cart
    • Product Variations
    • Create a Product Type
      • Simple
      • Variable
        • Create Attributes
      • Grouped
      • External
    • Build a Single Product Page
    • Dynamic Content
    • Link
  • 🗃️Miscellaneous
    • Blocks Specifics
    • Icon Selector
    • Trailing Slash
    • Units
      • Default Units
    • Code Snippets
    • Shortcuts
    • Actions
    • Filters
    • Browser Console
  • 🔗Resources
    • Changelog
    • Roadmap
    • Forum
Powered by GitBook
On this page
  • Colours
  • Icon
  • Link
  • Background
  • Layout
  • Icon
  • Size
  • Position
  • Spacing
  • Typography
  • Spacing
  • Padding
  • Margins
  • Borders
  • Radius
  • Colour
  • Style
  • Width

Was this helpful?

  1. Blocks
  2. Menu

Items

Last updated 2 years ago

Was this helpful?

The main menu and sub menu items properties allow you to customise the items in the main and sub menus by adjusting characteristics such as: Colour, Layout, Icon, Typography, Spacing, Borders etc.

Colours

The Colours tab allows you to modify the colour of your Icon, Link or Background.

Icon

The Icon Colour property allows you to choose a colour for your Dropdown Icon.

Modify Icon Colour
  1. Select a Cwicly Menu block

  2. Open Main/Sub tab

  3. Open Items tab

  4. Find Colours property

  5. Find Icon colour

  6. Modify Icon Color

Reset Icon Colour
  1. Select a Cwicly Menu block

  2. Open Main Menu tab

  3. Open Items tab

  4. Find Colours property

  5. Find Icon colour

  6. Click dot to reset

Link

The Link Colour property allows you to choose a colour for your Main Menu Items.

Modify Link Colour
  1. Select a Cwicly Menu block

  2. Open Main menu tab

  3. Open Items tab

  4. Find Link colour

  5. Modify Link colour

Reset Link Colour
  1. Select a Cwicly Menu block

  2. Open Main menu tab

  3. Open Items tab

  4. Find Link colour

  5. Click dot to reset

Background

The Background property allows you to choose a Background colour for your Main Menu Items.

Modify Background Colour
  1. Select a Cwicly Menu block

  2. Open Main menu tab

  3. Open Items tab

  4. Find Background colour

  5. Modify Background colour

Reset Background Colour
  1. Select a Cwicly Menu block

  2. Open Main menu tab

  3. Open Items tab

  4. Find Background colour

  5. Click dot to reset

Layout

The Main Menu Layout tab allows you to modify the Layout of our Main Menu Items such as: flex-start, centre, flex-end, space-between, space-around etc.

Modify Layout
  1. Select a Cwicly Menu block

  2. Open Main menu tab

  3. Open Items tab

  4. Open Layout tab

  5. Choose Layout (flex-start, centre, flex-end, space-between, space-around etc)

Reset Layout
  1. Select a Cwicly Menu block

  2. Open Main menu tab

  3. Open Items tab

  4. Open Layout tab

  5. Click dot to reset

Icon

The icon properties allow you to add an icon to items that contain a sub menu item.

Icons will not show up if no size is specified for the sizing property.

Select Icon
  1. Select a Cwicly Menu block

  2. Open Main menu tab

  3. Open Main Menu Items tab

  4. Click Active to activate Icon

  5. Click Icon image to open Icon library

  6. Select an Icon

Deactivate Icon
  1. Select a Cwicly Menu block

  2. Open Main menu tab

  3. Open Main Menu Items tab

  4. Click Active to deactivate

You can choose the Size, Spacing and Position of the Menu Icon.

Size

The Size property allows you to choose a size for your Main Menu Icon.

Modify Size
  1. Select a Cwicly Menu block

  2. Open Main menu tab

  3. Open Main Menu Items tab

  4. Click Active to activate Icon

  5. Click Icon image to open Icon library

  6. Select an Icon

  7. Find Size

  8. Modify Icon Size

Reset size
  1. Select a Cwicly Menu block

  2. Open Main menu tab

  3. Open Main Menu Items tab

  4. Click Active to activate Icon

  5. Click Icon image to open Icon library

  6. Select an Icon

  7. Find Size

  8. Click dot to reset

Position

The Position property allows you to Position the Icon before or after the Menu Item for more flexibility.

Choose Position
  1. Select a Cwicly Menu block

  2. Open Main menu tab

  3. Open Main Menu Items tab

  4. Click Active to activate Icon

  5. Click Icon image to open Icon library

  6. Select an Icon

  7. Find Position

  8. Choose Icon Position (Before or After)

Spacing

The Spacing property allows you to add Padding between the Icon and the Menu Item to let it breathe.

Adjust Spacing
  1. Select a Cwicly Menu block

  2. Open Main menu tab

  3. Open Main Menu Items tab

  4. Click Active to activate Icon

  5. Click Icon image to open Icon library

  6. Select an Icon

  7. Find Spacing

  8. Modify Icon Spacing

Reset spacing
  1. Select a Cwicly Menu block

  2. Open Main menu tab

  3. Open Main Menu Items tab

  4. Click Active to activate Icon

  5. Click Icon image to open Icon library

  6. Select an Icon

  7. Find Spacing

  8. Click dot to reset

Typography

The Menu Items Typography property allows you to choose the typography for your Main Menu such as font, size, spacing, height etc.

Typography
  1. Select a Cwicly Menu block

  2. Open Main menu tab

  3. Open Main Menu Items tab

  4. Open Typography tab

  5. Select required Typography (font, size, spacing, height etc)

Spacing

The Menu Items Spacing property allows you to customize the space around your Main Menu Items, such as Padding and Margins.

Padding

The Main Menu Items Padding property allows you to modify the space inside the border of an element.

Modify Padding
  1. Select a Cwicly Menu block

  2. Open Main menu tab

  3. Open Main Menu Items tab

  4. Open Spacing tab

  5. Find Padding

  6. Adjust linked or unlinked Padding

Reset Padding
  1. Select a Cwicly Menu block

  2. Open Main menu tab

  3. Open Main Menu Items tab

  4. Open Spacing tab

  5. Find Padding

  6. Click dot(s) to reset

Margins

The Main Menu Items Margins property allows you to modify the space outside the border of an element.

Modify Margins
  1. Select a Cwicly Menu block

  2. Open Main menu tab

  3. Open Main Menu Items tab

  4. Open Spacing tab

  5. Find Margin

  6. Modify Margin either linked or individually (top, bottom, left and right).

Reset Margins
  1. Select a Cwicly Menu block

  2. Open Main menu tab

  3. Open Main Menu Items tab

  4. Open Spacing tab

  5. Find Margin

  6. Click dot(s) to reset

Borders

The Borders property allows you to add and style Borders to your Main Menu Items, such as radius, colour, style and width.

Radius

The Radius property allows you to add a radius to your Main Menu Items Borders.

Modify Radius
  1. Select a Cwicly Menu block

  2. Open Main menu tab

  3. Open Main Menu Items tab

  4. Open Borders tab

  5. Find Radius

  6. Modify Radius, linked or individually (top, bottom, left and right corners).

Reset Radius
  1. Select a Cwicly Menu block

  2. Open Main menu tab

  3. Open Main Menu Items tab

  4. Click to open Borders tab

  5. Find Radius

  6. Click dot to reset all or selected radius

Colour

The Border Colour property allows you to choose the colour of your Maim Menu Items Borders.

Select Border Colour
  1. Select a Cwicly Menu block

  2. Open Main menu tab

  3. Open Main Menu Items tab

  4. Click to open Borders tab

  5. Find Border

  6. Choose colour

Reset Border Color
  1. Select a Cwicly Menu block

  2. Open Main menu tab

  3. Open Main Menu Items tab

  4. Click to open Borders tab

  5. Find Border

  6. Click dot to reset

Style

The Border Style property allows you to select a style for your Main Menu Items Border, such as solid, dotted or dashed.

Select Border Style
  1. Select a Cwicly Menu block

  2. Open Main menu tab

  3. Open Main Menu Items tab

  4. Click to open Borders tab

  5. Select Style (Solid, dotted, dashed)

Reset border style
  1. Select a Cwicly Menu block

  2. Open Main menu tab

  3. Open Main Menu Items tab

  4. Click to open Borders tab

  5. Click X to reset

Width

The Border Width property allows you to select a style for your Main Menu Items Border.

Select Border Width
  1. Select a Cwicly Menu block

  2. Open Main menu tab

  3. Open Main Menu Items tab

  4. Click to open Borders tab

  5. Find Width

  6. Choose width, either linked or unlinked

Reset Border Width
  1. Select a Cwicly Menu block

  2. Open Main menu tab

  3. Open Main Menu Items tab

  4. Click to open Borders tab

  5. Find Width

  6. Click dot(s) to reset

Open the

Navigate to the

Open the

Navigate to the

Open the

Navigate to the

Open the

Navigate to the

Open the

Navigate to the

Open the

Navigate to the

Open the

Navigate to the

Open the

Navigate to the

Open the

Navigate to the

Open the

Navigate to the

Open the

Navigate to the

Open the

Navigate to the

Open the

Navigate to the

Open the

Navigate to the

Open the

Navigate to the

Open the

Navigate to the

Open the

Navigate to the

Open the

Navigate to the

Open the

Navigate to the

Open the

Navigate to the

Open the

Navigate to the

Open the

Navigate to the

Open the

Navigate to the

Open the

Navigate to the

Open the

Navigate to the

Open the

Navigate to the

Open the

Navigate to the

Open the

Navigate to the

🔧
block inspector
primary tab
block inspector
primary tab
block inspector
primary tab
block inspector
primary tab
block inspector
primary tab
block inspector
primary tab
block inspector
primary tab
block inspector
primary tab
block inspector
primary tab
block inspector
primary tab
block inspector
primary tab
block inspector
primary tab
block inspector
primary tab
block inspector
primary tab
block inspector
primary tab
block inspector
primary tab
block inspector
primary tab
block inspector
primary tab
block inspector
primary tab
block inspector
primary tab
block inspector
primary tab
block inspector
primary tab
block inspector
primary tab
block inspector
primary tab
block inspector
primary tab
block inspector
primary tab
block inspector
primary tab
block inspector
primary tab