Content Controls
Content
The content controls allow you to define the primary text of the Menu Button and specify the URL it should link to, making it a functional part of your navigation setup.
- Text – Set the label of your menu button, the text visitors will see.
- Link – Specify the URL or page your menu button directs to.
Design Controls
Button
These controls offer comprehensive customization of your menu button’s appearance, from its style and typography to intricate details like custom arrows and hover effects.
- Style – Choose a pre-defined style for your button or select ‘custom’ to create your own.
- Text – Available when the style is set to ‘text’. This provides further options:
- Typography – Fine-tune the font, size, and spacing of your button’s text.
- Padding – Adjust the space inside the button around the text.
- Fancy Underline – Add a decorative underline to your button text and customize its color.
- Underline Color – Pick a color for the underline effect.
- Arrow – Append an arrow icon to your button’s text, with customization options:
- Arrow – Select a pre-designed arrow style.
- Custom Arrow – Available when ‘Arrow’ is set to ‘custom’. Upload or choose a custom arrow icon.
- Space Before – Define the spacing between the arrow and the text.
- Hover Transform – Not available with ‘arrow-3’. Set a hover effect for the arrow.
- Arrow Size – Adjust the size of the arrow icon.
- Custom – Unlock these settings by setting ‘Style’ to ‘custom’. Tailor every aspect of your button’s design:
- Size – Adjust the overall size and padding of your button, or opt for full width at certain breakpoints:
- Size – Pick a predefined size or choose ‘custom’ to define your own.
- Padding – Available when ‘Size’ is set to ‘custom’. Customize the inner spacing of your button.
- Override Width – Specify a custom width for the button regardless of its container.
- Full Width At – Choose at which breakpoint the button should span the full width of its container.
- Background – Select a color for your button’s background.
- Outline – Add an outline to your button, with additional customization if activated:
- Color – Available when ‘Outline’ is enabled. Set the color of the outline.
- Width – Available when ‘Outline’ is enabled. Determine the thickness of the outline.
- No Fill On Hover – Available when ‘Outline’ is enabled. Ensure the button’s background remains transparent when hovered over.
- Typography – Modify the font attributes for the text inside your button.
- Corners – Choose between squared, slightly rounded, or fully rounded corners.
- Corner Radius – Available when ‘Corners’ is set to ‘custom’. Specify the exact curvature of your button’s corners.
- Icon – Incorporate an icon into your button and customize its appearance:
- Icon – Choose an icon to display within your button.
- Position – Decide where the icon should be placed relative to the text.
- Size – Set the icon’s size.
- Color – Pick a color for your icon.
- Space Before – Adjust the spacing before the icon (if it appears after the text).
- Space After – Adjust the spacing after the icon (if it appears before the text).
- Hover Transform – Define a hover effect specifically for the icon.
- Effects – Apply advanced visual effects to your button:
- Transition Duration – Control the speed of hover transitions.
- Scale On Hover – Set the button to increase in size when hovered over, from 1 to 1.5 times its original size.
- Shadow – Add a drop shadow to elevate your button visually.
Lightbox
These settings control the appearance of the lightbox that appears when the menu button is clicked, allowing you to match its look to your site’s aesthetic.
- Background – Choose a color for the lightbox’s background, affecting the area behind your content.
- Controls – Set the color for the interactive elements within the lightbox, ensuring they’re visible against the background.
Spacing
Manage the space around your menu button, giving it room to breathe or snugly fitting it into your layout.
- Margin Top – Increase or decrease the space above your menu button.
- Margin Bottom – Adjust the space below your menu button, affecting its distance from other elements.
