Table of Contents

Collapse all

The Advanced Navigation block lets you create and style a custom menu for your site. You can add links, arrange them, and adjust the design for desktop and mobile.

Adding Frontis Advanced Navigation Block 

To insert the  Advanced Navigation block, navigate to the post or page where you wish to include it. Next, tap the (+) plus icon located at the upper left corner of the display.

The Frontis menu bar interface will appear. Search for the Advanced Navigation block in the search box or select it from the menu bar.

After inserting the  Advanced Navigation blocks, follow the steps below;

  • Click on the Document Overview button, and you will be able to view the block list on the right side.
  • Click on the block; all the control tabs will show here (Basic, Style, and Extra).

Basic Section

General Section

  • Layout: The layout section includes two options: Horizontal and Vertical.
  • Display All Items In One Click: The Display all items in one line toggle forces menu items to stay in a single row. If turned off, items can wrap onto multiple lines.
  • Alignment: This section allows you to change the alignment of the Navigation item to left, middle, right, or between. 
  • Dropdown Menus: In Frontis Blocks, dropdown menus let you add sub-links under a main menu item, shown in a collapsible list.
  • Hamburger: The Hamburger section is the three-line menu icon that opens or collapses the navigation on small screens.

Style Section

  • Typography: You can change the font family, font size, font weight, font style, text transform, text decoration, letter spacing, and line height from here.
  • Text Color: This feature lets you change the color of the text.
  • Background color: The Background Color feature lets you set a background color behind the text.
  • Active Color: The Active Color section sets the highlight color for the menu item that is currently active or selected.
  • Padding: Adds space inside an object, around its content. You can adjust all sides or each side separately.
  • Margin: Adds space outside an object, affecting its placement. You can adjust all sides or each side separately.
  • Border and Box Shadow: You can place a border around the entire area and adjust the border color and border-radius. This option allows you to apply a box shadow to the Navigation.
  • Width: The Width feature controls the width of the dropdown menu.
  • Background color: The Background Color feature lets you set a background color behind the text.
  • Padding: Adds space inside an object, around its content. You can adjust all sides or each side separately.
  • Margin: Adds space outside an object, affecting its placement. You can adjust all sides or each side separately.
  • Border and Box Shadow: You can place a border around the entire area and adjust the border color and border-radius. This option allows you to apply a box shadow to the Dropdown section.
  • Typography: You can change the font family, font size, font weight, font style, text transform, text decoration, letter spacing, and line height from here.
  • Text Color: This feature lets you change the color of the text.
  • Active Color: The Active Color section sets the highlight color for the menu item that is currently active or selected.
  • Padding: Adds space inside an object, around its content. You can adjust all sides or each side separately.
  • Margin: Adds space outside an object, affecting its placement. You can adjust all sides or each side separately.
  • Border and Box Shadow: You can place a border around the entire area and adjust the border color and border-radius. This option allows you to apply a box shadow to the Dropdown section.
  • Icon Size: The Size feature changes the dropdown icon’s size.
  • Icon Color: This feature lets you change the color of the icon.
  • Margin: Adds space outside an object, affecting its placement. You can adjust all sides or each side separately.

Hamburger Menu

  • Icon Size: The Icon Size feature lets you adjust the hamburger icon’s size
  • Icon Color: This feature lets you change the icon color.
  • Icon Padding: The Icon Padding feature in the hamburger section controls the space inside the icon’s area.

Hamburger Menu Popup

  • Background color: The Background Color feature lets you set a background color behind the hamburger menu.
  • Padding: The Icon Padding feature controls the space inside the pop-up area.
  • Typography: You can change the font family, font size, font weight, font style, text transform, text decoration, letter spacing, and line height from here.
  • Text Color: This feature lets you change the color of the text.
  • Close Icon Size: This feature controls the size of the close icon that appears when the menu is open.
  • Close Icon Color:  This feature lets you change the color of the close icon.

Extra Section

Z-Index: Consider the z-index as layers of sheets on a table. The greater the z-index, the more “above” the element appears. Therefore, if two elements intersect, the one with the greater z-index will be displayed in front.

However, it functions only when the element is positioned (relative, absolute, fixed, or sticky). Without it, z-index has no effect. 

Overflow section: The Overflow feature in the Advanced section of Frontis Blocks controls how extra content behaves when it goes beyond the block’s size. The overflow property determines the action to take in this scenario.

Values of overflow:

  • Visible: The visible overflow value shows all content, even if it goes outside the box. It won’t be hidden or cut off, and no scrollbars will appear. 
  • Hidden: The hidden overflow value hides any content that goes outside the box. It gets cut off, and no scrollbars appear, so users can’t see the extra content.
  • Scroll: The scroll overflow value always shows scrollbars. If the content is too big, you can scroll to see it. Even if there’s no extra content, scrollbars still appear.
  • Auto: The auto overflow value adds scrollbars only when needed. If the content fits inside the box, no scrollbars show. If it overflows, scrollbars appear automatically.
  • Clip: The clip overflow value hides any content that overflows the box without showing scrollbars. The extra content is simply cut off and cannot be seen or scrolled.

Padding: Padding allows you to add spaces around an object to increase the inner area. You can also add space on a single side with this feature. Click on the Link icon and adjust the padding on any side you want.

Margin: Margin enables the adjustment of an object’s placement on the canvas. With this feature, you can add a margin around an object or a single side. Click on the Link icon and adjust the Margin on any side you want.

Border and Shadow: You can place a border around the entire area and adjust the border color and border-radius. This option allows you to apply a box shadow to the Advanced Navigation block.

Responsive Control: In this section, you will get 3 switches (Hide on Desktop, Hide on Tablet, Hide on Mobile). These switches let you show or hide the section on different devices.

Custom CSS: If you are an expert or have coding knowledge, you can add custom CSS in this section to make it responsive.