Navigation Menu

Navigation Menu

General Settings

Element Name/Title

Here you will see the default name/title of the Edit option you are working on. You can decide to leave at that or rename it.

Spacing Option:

There are different spacing options available for adjusting your content. Depending on the Edit option you are working on, the settings will only be applicable to that option.

• Padding Left, Right, Top, and Bottom
  This Four (4) different toggle bar moves the content to either the left, right, top, or bottom depending on the toggle bar you click on.
• Margin Top and Bottom
  You can adjust the top or bottom margin of your content by toggling its bars.

Background Color

If you want to change the background color of your navigation menu, you can do that by clicking on the color you want to change to.

Mobile Background Color

If you want to change the mobile background color of your navigation menu, you can do that by clicking on the color you want to change to.

Text Align

You can move your text in different positions as you deem fit, you can position it to the Left, Center, Right, or as Justified.

Menu Items

The menu Items allows you to add some menu option like Home, About, Team, and Contact menu to your navigation. You can add more by clicking on the "+ Add Item"

Mobile and Desktop Font Size

You can adjust the mobile and desktop font sizes of a particular text/content simply by adjusting the size bars.

Typography Type

Here you can edit the font of your text/content.

Mobile View Icon

You can add an icon to your page by simply selecting from the available icon. If you have the desired icon in mind, you can type it into the search bar to narrow down the options.

Color Options

• Color
  ****When a text isn't in bold form, you can only adjust its colors here
  
  
• Bold Text Color
  ****When a text is in bold form, you can change the color here
  
  
• Italic Text Color
  ****You can only edit an italic text color here. To be able to make an italic text, you have to highlight the text and then click on the Slant "I" icon.
• Underline Text Color
  ****You can only edit an underlined text color here. To underline your text, you have to highlight the text and then click on the underlined "U" icon.
• Icon Color
  ****If you have an icon added to this page, you can only edit the icon color here. Only the icon color will change regardless of the position it's placed.
• Hover Text Color
  ****You can change the color of your Hover here.
  
  
• Hover Background Color
  ****You can change the background color of the Hover here. This works only on the Desktop view.

Menu Item Spacing Options

Horizontal and Vertical Spacing

You can adjust the spacing of the height and length of the menu items here by moving the bar to increase the number.

Brand Logo Config

Once you toggle on the "Logo in Menu" button, your logo will appear on the left corner of the navigation menu and you will be able to access edits;

• Brand Logo
  ****You can add your brand logo by clicking on the image icon on the right side of the space provided which will direct you to the import page where you can import your logo image, then click on the clipboard icon in the upper right corner of the page to copy the image URL. You can exit the import page and paste the URL into the Brand logo space provided.
  
  
• Width and Height
  ****You can adjust the width and height of your logo here. This depends on how big or small you want the logo to be.
  
  
• Alt Text (for SEO)
  ****You can input your Alt text here.

Actions

You can select either the "Open the popup" or the "go-to website URL"

• Website
  When you select "Go to website URL" in the "Image Action" icon, it will require you to select which website page you will be settings.
• Open In New Tab
  If you want the website to direct visitors to a new tab when they perform an action, simply toggle it on.

Advanced Settings

Line Height

You increase the height of the Element box by adjusting the size bar.

Text Transform

In the Text Transform, you can decide to change the text to Uppercase, Lowercase, or just capitalize each word.

Visibility

You can decide if you want this particular Edit option to be visible on only mobile devices, desktops, or both by clicking on it to highlight the icon.

Custom Class

Input your custom class here.

Border Options:

Border

You can choose the type of border you want. Once you select any of the border types, the settings for the border pop up;

Style

There are three (3) Different styles for your border, It could be a solid, Dashed, or Dotted border.

Width

When you increase the border width, it increases the thickness of the border.

Color

To change the color of the border, click on this color icon

Radius

Adjusting the radius of your border curves the edges of the border, the higher the number you select, the curvier it becomes

Radius Edge

You can decide the corner of the border you want to curve, either all edges, Top only or bottom edge only.

Dropdown Options

You can edit the size and colors of your dropdown menu for your mobile view.

Menu Config

• Headline in Menu
  When you toggle on the "Headline in Menu", it displays the Business Name.

CSS Selector

If you need to copy the Custom CSS, just click on the "Copy" icon on the right side of the reference code