This article was last updated on the October 12, 2017.
The Navigation Dropdown element is available across all three builders. The Content Builder, the Header Builder and the Footer Builder. The purpose of the element is to display a button that when clicked will display a Navigation modal on the page. Allowing your users to Navigation for content without needing to scroll back to the top of the page.
Presets
First of all you'll see the Apply Preset option, but just what is a preset? A preset is a pre-configured option pack of sorts. When you apply the preset all the controls are automatically changed to the specified value in the presets. Right now the presets represent each different stack. Providing quick starting points for getting your elements styled perfectly to match your stack. Apply a preset and then tinker to your hearts content.
The Navigation dropdown displays as a simple button like this:
Once you click the Navigation dropdown it'll then display your navigation like this:
Controls
All elements come with a range of different controls and the Navigation element is no different. While many of the controls are self explanatory in what they effect, we'll cover the basics and any major points you need to be aware about in each article. Every article will also cover the basics such as Flexbox, Interactions and more!
Flexbox
Just what is Flexbox and what makes it so flexible? Flexbox is a layout mode intended to accomodate multiple elements on a page in different configuration layouts for a variety of screen sizes. It's generally easy to work with once you get to grips with it and provides an array of configuration elements for start positions, end position and everything in between.
While Flexbox may seem daunting at first. Don't worry! There are a range of multiple tutorials online and in all our builders we have multiple configuration options that means you never have to touch a line of code! So you properly understand Flex options, we'd recommend having a ready up over here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ on how exactly Flexbox works. While you don't need to worry about the code side. It's important to have a basic grasp of how Flexbox works to make the most of the builders. Or of course there's always the trial and error approach.
Interactions
Throughout the elements you'll see options for interactions, but just what are interactions? Interactions generally means when an element is being interacted with. Such as on hover. For example on a Background Color option you'll have the Base option which is the main background color of the element. Then you'll have the Interaction option, setting this to a different color from base will display a different color on hover.
You'll also see interactions for icons where you can swap out icons on hover. Allowing you to configure different options for on hover. Making for some great effects with swapping out icons on hover.
Margins and paddings. EMs, REMs, Pixels and more!
With all the margins, paddings and other height and width based options, along with some sizing options. You'll see the option to change the actual unit value. This means you might set one control to be 2.5 EMs such as the width. But then on your margin you might set it to be 50px. The available unit options are:
Linking Sides
One thing you'll see in common across multiple controls is the ability to link sides. This means that if you link sides on the padding controls, all the padding controls will be the same value. However if you unlink the padding controls, you can then control each side independently allowing for greater control.
If you have link sides on for the respective set of controls you will not see the individual options.
Particles
Many of the elements use what's known as the "Particles Partials". But just what are Particles and how can use them? Check out our great mini video series over on this KB article.
Available Controls
Like other Elements controls are split up into multiple sections for the Navigation Dropdown those sections are:
- Menu
- Toggle
- Dropdown
- Links
- Customize
Clicking on a specific link will take you to those controls. First of all you'll be on the Menu section. The controls available within the Menu section are:
Setup
The options within the setup control consist of:
- Assign Menu - Pick the menu to be used for the Navigation.
Now click on Toggle which will render the available controls for the Toggle section like this:
The available controls within the Toggle section are:
Setup
The setup controls consist of:
- Base Font Size - The font size used for the toggle
- Width & Height - The width and height of the button set to auto by default. Can be changed to any required value.
- Min Width & Height - The minimum width and height the toggle should be.
- Max Width & Height - The maximum width and height of the toggle at any time.
- Background - Offers two options one called Base base is the background color of the toggle at all times apart from on hover. And the second option called Interaction interaction is the background color of the toggle on hover and when the toggle is interacted with.
Content Flex Layout
The Content Flex Layout controls consist of:
- Layout - Either set to Row or Column
- Reverse Layout
- Wrap Children
- Horizontal
- Vertical
Margin
The Margin layout controls consist of:
- Link Sides - Link sides allows you to link up every option within the margin controls so when you change one value all values change. Or you can unlink sides and set each margin option individually.
- Top - Sets the top margin.
- Right - Sets the right hand side margin.
- Bttm - Sets the bottom margin
- Left - Sets the left hand side margin.
Padding
The Padding controls consist of:
- Link Sides - Link sides allows you to link up every option within the padding controls so when you change one value all values change. Or you can unlink sides and set each padding option individually.
- Top - Sets the top margin.
- Right - Sets the right margin.
- Bttm - Sets the bottom margin.
- Left - Sets the Left margin.
Border
The Border controls consist of:
- Link Sides - Allows you to link up the border control for all sides or unlink sides to control each border side individually.
- Style - Sets the style of the border such as dashed, dotted etc.
- Width - Sets the width of the border in pixels by default. Or click on PX to change the value to the units you'd like to use (EM, REM)
- Color - Sets the color of the border.
Border Radius
The Border Radius controls consist of:
- Link Sides - Link all sides of the border to control all border radius options at the same time, rather than configuring each value individually. If you unlink sides. You can set the border radius controls individually.
- Top Left - Set the top left radius of the border.
- Top Right - Set the top right radius of the border.
- Bttm Right - Set the bottom right radius of the border.
- Bttm Left - Set the bottom left radius of the border.
Do note that you won't see any effect by changing the Border Radius values unless you have already set your Border controls.
Box Shadow
The Box Shadow controls consist of:
- X-Offset - Set the offset of the border shadow for the X axis.
- Y-Offset - Set the offset of the border shadow for the Y axis.
- Blur - Set the blur of the box shadow.
- Spread & Position - Set the spread and position of the box shadow.
- Color - Sets the color of the box shadow.
Text Setup
The Text Setup controls consist of:
- Enable - A simple on or off option, set this to on if you want the button to have text or set to Off if you want an icon only button.
- Text Overflow - Set text overflow to enable.
- Primary Text - The main text within the button defaults to Learn More.
- Secondary Text - Add secondary text under the primary text. Default is empty (no output).
Text Margin
The Text Margin controls consist of:
- Link Sides - Link sides allows you to link up every option within the margin controls so when you change one value all values change. Or you can unlink sides and set each margin option individually.
- Top - Sets the top margin.
- Right - Sets the right hand side margin.
- Bttm - Sets the bottom margin
- Left - Sets the left hand side margin.
Primary Text Format
The Primary Text Setup controls consist of:
- Font Family - A font selector for the primary button font. Default is inherit or you can select a font that's setup within the Font Manager.
- Font Weight - The font weight for the primary font selected. Available weights depend on the font family selected.
- Font Size
- Letter Spacing
- Line Height
Primary Text Style
The Primary Text Style controls consist of:
- Font Style - Normal or Italic
- Text Align - Left, Center, Right, Justify.
- Text Decoration - Underlined or Strikethrough.
- Text Transform - Uppercase (force all text to be uppercase), Capitalize (forces the first letter in each word to be a capital), Lowecase (forces all text to be lowercase).
- Text Color - offers two options. 1: Base, sets the base color of the text. 2: Interaction. Sets the text color when interacted with (on hover) etc.
Primary Text Shadow
The Primary Text Shadow controls consist of:
- X-Offset - Set the offset of the text shadow for the X axis.
- Y-Offset - Set the offset of the text shadow for the Y axis.
- Blur - Set the blur of the text shadow.
- Spread & Position - Set the spread and position of the text shadow.
- Color - Sets the color of the text shadow.
Graphic Setup
The Graphic Setup controls consist of:
- Enable - Enable or Disable the output of a graphic. When Graphic setup is set to On you'll see another option within the Graphic Setup controls and another two set of controls called Graphic Margin and Graphic Icon.
- Type - Select what type of graphic you want to use either a Icon, Image Or Toggle. Only shows if Enable is set to On.
Graphic Margin
The Graphic Margin controls consist of:
- Link Sides - Link sides allows you to link up every option within the margin controls so when you change one value all values change. Or you can unlink sides and set each margin option individually.
- Top - Sets the top margin.
- Right - Sets the right hand side margin.
- Bttm - Sets the bottom margin
- Left - Sets the left hand side margin.
Graphic Toggle
The Graphic Toggle controls only show if you selected the image option in the Graphic Setup control and the controls consist of:
- Type - The type of toggle you want to use options available are, Burger, Grid, More Horizontal, More Vertical. Both More Horizontal and More Vertical output an elipsis.
- Burger Size - Set the size of the burger toggle. Only shows if Burger is selected under Type.
- Burger Spacing - Sets the spacing around the burger. Only shows if Burger is selected under Type.
- Burger Width - The width of the burger. Only shows if Burger is selected under Type.
- Color - Base. Sets the base color used when the Toggle isn't being interacted with.
- Color - Interaction. Sets the color to be used when the Toggle is interacted with.
- Grid Size - The size of the grid used for the Toggle. Only shows if Grid is selected under Type.
- Grid Spacing - The spacing around the grid. Only shows if Grid is selected under Type.
- More Size - The size of the More Toggle. Only shows if More Horizontal or More Vertical is selected under Type.
- More Spacing - The spacing around the More toggle. Only shows if More Horizontal or More Vertical is selected under Type.
Interactions Setup
The Interactions Setup controls consist of:
- Text - The text interaction, how the text changes on hover. Available options include: None, Slide Top, Slide Left, Slide Right, Slide Bottom, Scale Up, Scale Down, Flip X, Flip Y.
- Graphic - The graphic interaction, how the graphic changes on hover. Available options include: None, Scale Up, Scale Down, Flip X, Flip Y.
- Particles - When you enable Primary Or Secondary particles you'll see new controls and options for the particle setups. This allows you to add particle effects on hover, great to make your menu stand out!
Next up click on the Dropdown section. Which will render the controls available like this:
The available controls within the Dropdown section are:
Setup
The Setup controls consist of:
- Font Size - The font size used for the dropdown.
- Width - The width of the dropdown.
- Background - The Background of the dropdown. On Click a color picker opens.
First Dropdown Margin
The First Dropdown Margin layout controls consist of:
- Link Sides - Link sides allows you to link up every option within the margin controls so when you change one value all values change. Or you can unlink sides and set each margin option individually.
- Top - Sets the top margin.
- Right - Sets the right hand side margin.
- Bttm - Sets the bottom margin
- Left - Sets the left hand side margin.
Dropdown Border
The Dropdown Border controls consist of:
- Link Sides - Allows you to link up the border control for all sides or unlink sides to control each border side individually.
- Style - Sets the style of the border such as dashed, dotted etc.
- Width - Sets the width of the border in pixels by default. Or click on PX to change the value to the units you'd like to use (EM, REM)
- Color - Sets the color of the border.
Dropdown Border Radius
The Dropdown Border Radius controls consist of:
- Link Sides - Link all sides of the border to control all border radius options at the same time, rather than configuring each value individually. If you unlink sides. You can set the border radius controls individually.
- Top Left - Set the top left radius of the border.
- Top Right - Set the top right radius of the border.
- Bttm Right - Set the bottom right radius of the border.
- Bttm Left - Set the bottom left radius of the border.
Do note that you won't see any effect by changing the Border Radius values unless you have already set your Border controls.
Dropdown Padding
The Dropdown padding controls consist of:
- Link Sides - Link sides allows you to link up every option within the padding controls so when you change one value all values change. Or you can unlink sides and set each padding option individually.
- Top - Sets the top margin.
- Right - Sets the right margin.
- Bttm - Sets the bottom margin.
- Left - Sets the Left margin.
Dropdown Box Shadow
The Box Shadow controls consist of:
- X-Offset - Set the offset of the border shadow for the X axis.
- Y-Offset - Set the offset of the border shadow for the Y axis.
- Blur - Set the blur of the box shadow.
- Spread & Position - Set the spread and position of the box shadow.
- Color - Sets the color of the box shadow.
Next up click on Links that will render the available Links controls like this:
The available controls within the Links section are:
Setup
The setup controls consist of:
- Base Font Size - The font size used for the top links.
- Width & Height - The width and height of the links Can be changed to any required value.
- Min Width & Height - The minimum width and height the links should be.
- Max Width & Height - The maximum width and height of the links.
- Background - Offers two options one called Base base is the background color of the links at all times apart from on hover. And the second option called Interaction interaction is the background color of the links on hover and when the links are interacted with.
Content Flex Layout
The Content Flex Layout controls consist of:
- Layout - Either set to Row or Column
- Reverse Layout
- Wrap Children
- Horizontal
- Vertical
Margin
The Margin layout controls consist of:
- Link Sides - Link sides allows you to link up every option within the margin controls so when you change one value all values change. Or you can unlink sides and set each margin option individually.
- Top - Sets the top margin.
- Right - Sets the right hand side margin.
- Bttm - Sets the bottom margin
- Left - Sets the left hand side margin.
Padding
The Padding controls consist of:
- Link Sides - Link sides allows you to link up every option within the padding controls so when you change one value all values change. Or you can unlink sides and set each padding option individually.
- Top - Sets the top margin.
- Right - Sets the right margin.
- Bttm - Sets the bottom margin.
- Left - Sets the Left margin.
Border
The Border controls consist of:
- Link Sides - Allows you to link up the border control for all sides or unlink sides to control each border side individually.
- Style - Sets the style of the border such as dashed, dotted etc.
- Width - Sets the width of the border in pixels by default. Or click on PX to change the value to the units you'd like to use (EM, REM)
- Color - Sets the color of the border.
Border Radius
The Border Radius controls consist of:
- Link Sides - Link all sides of the border to control all border radius options at the same time, rather than configuring each value individually. If you unlink sides. You can set the border radius controls individually.
- Top Left - Set the top left radius of the border.
- Top Right - Set the top right radius of the border.
- Bttm Right - Set the bottom right radius of the border.
- Bttm Left - Set the bottom left radius of the border.
Do note that you won't see any effect by changing the Border Radius values unless you have already set your Border controls.
Box Shadow
The Box Shadow controls consist of:
- X-Offset - Set the offset of the border shadow for the X axis.
- Y-Offset - Set the offset of the border shadow for the Y axis.
- Blur - Set the blur of the box shadow.
- Spread & Position - Set the spread and position of the box shadow.
- Color - Sets the color of the box shadow.
Text Setup
The Text Setup controls consist of:
- Enable - A simple on or off option, set this to on if you want the button to have text or set to Off if you want icon only links
- Text Overflow - Set text overflow to enable.
- Primary Text - The main text of the link.
- Secondary Text - Add secondary text under the primary text. Default is empty (no output).
- Text Order & Spacing - Only shows if Secondary Text is set to On. Options include: Reverse which reverses the text order. And the spacing between the text.
Text Margin
The Text Margin controls consist of:
- Link Sides - Link sides allows you to link up every option within the margin controls so when you change one value all values change. Or you can unlink sides and set each margin option individually.
- Top - Sets the top margin.
- Right - Sets the right hand side margin.
- Bttm - Sets the bottom margin
- Left - Sets the left hand side margin.
Primary Text Format
The Primary Text Setup controls consist of:
- Font Family - A font selector for the primary text. Default is inherit or you can select a font that's setup within the Font Manager.
- Font Weight - The font weight for the primary font selected. Available weights depend on the font family selected.
- Font Size
- Letter Spacing
- Line Height
Primary Text Style
The Primary Text Style controls consist of:
- Font Style - Normal or Italic
- Text Align - Left, Center, Right, Justify.
- Text Decoration - Underlined or Strikethrough.
- Text Transform - Uppercase (force all text to be uppercase), Capitalize (forces the first letter in each word to be a capital), Lowecase (forces all text to be lowercase).
- Text Color - offers two options. 1: Base, sets the base color of the text. 2: Interaction. Sets the text color when interacted with (on hover) etc.
Primary Text Shadow
The Primary Text Shadow controls consist of:
- X-Offset - Set the offset of the text shadow for the X axis.
- Y-Offset - Set the offset of the text shadow for the Y axis.
- Blur - Set the blur of the text shadow.
- Spread & Position - Set the spread and position of the text shadow.
- Color - Sets the color of the text shadow.
Secondary Text Format
The Primary Text Setup controls consist of:
- Font Family - A font selector for the Secondary text. Default is inherit or you can select a font that's setup within the Font Manager.
- Font Weight - The font weight for the Secondary font selected. Available weights depend on the font family selected.
- Font Size
- Letter Spacing
- Line Height
Secondary Text Style
The Secondary Text Style controls consist of:
- Font Style - Normal or Italic
- Text Align - Left, Center, Right, Justify.
- Text Decoration - Underlined or Strikethrough.
- Text Transform - Uppercase (force all text to be uppercase), Capitalize (forces the first letter in each word to be a capital), Lowecase (forces all text to be lowercase).
- Text Color - offers two options. 1: Base, sets the base color of the text. 2: Interaction. Sets the text color when interacted with (on hover) etc.
Secondary Text Shadow
The Secondary Text Shadow controls consist of:
- X-Offset - Set the offset of the text shadow for the X axis.
- Y-Offset - Set the offset of the text shadow for the Y axis.
- Blur - Set the blur of the text shadow.
- Spread & Position - Set the spread and position of the text shadow.
- Color - Sets the color of the text shadow.
Graphic Setup
The Graphic Setup controls consist of:
- Enable - Enable or Disable the output of a graphic. When Graphic setup is set to On you'll see another option within the Graphic Setup controls and another two set of controls called Graphic Margin and Graphic Icon.
- Type - Select what type of graphic you want to use either a Icon or Image Only shows if Enable is set to On.
Graphic Margin
The Graphic Margin controls consist of:
- Link Sides - Link sides allows you to link up every option within the margin controls so when you change one value all values change. Or you can unlink sides and set each margin option individually.
- Top - Sets the top margin.
- Right - Sets the right hand side margin.
- Bttm - Sets the bottom margin
- Left - Sets the left hand side margin.
Graphic Icon
The Graphic Icon controls only show if you selected the icon option in the Graphic Setup control and the controls consist of:
- Font Size & Secondary - If you check the Secondary box you'll see a new option called Secondary Icon.
- Width & Height - The width and height of the icon
- Color - offers two options. 1: Base, sets the base color of the icon. 2: Interaction. Sets the icon color when interacted with (on hover) etc.
Icons for navigation menus are setup within the WordPress Admin > Appearance > Menus covered in our FAQ here.
Sub Indicator Setup
The Sub Indicator Setup controls consist of:
- Enable - Either output a sub indicator (on) or don't output a sub indicator (off) the sub indicator is for sub navigation links and shows if you have child links of a parent link.
- Font Size - The Font Size used for the sub indicator.
- Width & Height - The Width and Height of the sub indicator defaults to auto.
- Icon - Icon Picker to select an icon for use as the sub indicator.
- Color Base - The base color for the sub indicator when not being interacted with.
- Color Interaction - The color used for the sub indicator when being interacted with (on click, on hover etc).
Sub Indicator Margin
The Sub Indicator Margin layout controls only shows if Sub Indicator Setup is set to On and consist of:
- Link Sides - Link sides allows you to link up every option within the margin controls so when you change one value all values change. Or you can unlink sides and set each margin option individually.
- Top - Sets the top margin.
- Right - Sets the right hand side margin.
- Bttm - Sets the bottom margin
- Left - Sets the left hand side margin.
Interactions Setup
The Interactions Setup controls consist of:
- Text - The text interaction, how the text changes on hover. Available options include: None, Slide Top, Slide Left, Slide Right, Slide Bottom, Scale Up, Scale Down, Flip X, Flip Y.
- Graphic - The graphic interaction, how the graphic changes on hover. Available options include: None, Scale Up, Scale Down, Flip X, Flip Y.
- Particles - When you enable Primary Or Secondary particles you'll see new controls and options for the particle setups. This allows you to add particle effects on hover, great to make your menu stand out!
Primary Particle Setup
The Primary Particle Setup controls consist of:
- Location - Where the Primary Particle effect will display.
- Placement - Where the Primary Particle effect will display relative to the Toggle.
- Scale & Delay - Wether to Scale X, Scale Y or Scale all along with the delay in seconds of the effect.
- Transform starts from - Where the transform of the effect takes place.
Primary Particle Style
The Primary Particle Style controls consist of:
- Width & Height - The width and height of the particle.
- Radius & Color - The radius of the particle effect along with it's primary color.
- Inline CSS - Any inline CSS you wish to apply to the particle effect.
Secondary Particle Setup
The Secondary Particle Setup controls consist of:
- Location - Where the Secondary Particle effect will display.
- Placement - Where the Secondary Particle effect will display relative to the Toggle.
- Scale & Delay - Wether to Scale X, Scale Y or Scale all along with the delay in seconds of the effect.
- Transform starts from - Where the transform of the effect takes place.
Secondary Particle Style
The Secondary Particle Style controls consist of:
- Width & Height - The width and height of the particle.
- Radius & Color - The radius of the particle effect along with it's secondary color (for interactions).
- Inline CSS - Any inline CSS you wish to apply to the particle effect.
Lastly are the available controls within the Customize section. If you click on Customize You should see the available controls like this:
The available controls within the Customize section are:
Setup
The Setup controls consist of:
- ID - A custom ID you want to assign for use with custom CSS.
- Class - A custom class you want to assign for use with custom CSS.
- Hide During Breakpoints - Select different screen sizes you want to disable the output of the specific element on. Perfect for creating custom responsive headers.
