In the Navigation settings page, you can modify multiple navigation settings for your website, including your Navigation bar and desktop/mobile layouts. Note this section only affects the design of your navigation, not the contents themselves. To edit the navigation contents, please email the Punchmark Customer Service team support@punchmark.com.

Follow these steps to access the style settings for the global navigation:

  1. Login to the Site Manager. 

  2. In the menu, click to expand the Design settings (see the figure below).

  3. Click the NAVIGATION item to display the footer settings in the main panel.

In this section, you can change the settings for the <nav> block, which contains the navigation menu for your website.

  • Position: Click the drop-down and choose the position.

  • Mobile position: Select the drop-down and choose how you want the navigation bar to function on mobile devices.

  • Sticky Nav: Click the drop-down and choose the devices on which you want the navigation bar to be sticky.

  • Mobile sticky position: First, choose a Sticky Nav setting to enable this drop-down. Then, click the drop-down and choose how you want the navigation bar to function on mobile devices.

From the drop-down, choose the setting for vertical alignment of the navigation bar.

In this section, you can change the settings for the <nav> block, which contains the navigation menu for your website.

  • Background type: From the drop-down, choose the type of background that you want for your navigation bar. 

  • Background color: From the color picker, choose a background color for your navigation bar. You can also enter the hex color code into the Background Color field.

  • Border width: Click the - and + buttons to adjust the width of the navigation bar border.

  • Border color: Choose a Border Color from the color picker. You can also enter the hex color code into the Border Color field.

  • Border placement: From the drop-down, choose where you want the border to appear. NOTE: The default setting places a border around the entire navigation bar.

  • Border radius: Click the - and + buttons to adjust the amount of curve that you want to appear in the corners of the navigation bar border.

  • Drop shadow: Choose what type of shadow you want to appear at the bottom of the navigation bar.

  • Top/bottom: Click the - and + buttons to adjust the amount of padding that you want to appear inside of the top and bottom edges of the navigation bar.

  • Left/right: Click the - and + buttons to adjust the amount of padding that you want to appear inside the left and right edges of the navigation bar.

  • Top/bottom: Click the - and + buttons to adjust the amount of margin that you want to appear outside the top and bottom edges of the navigation bar.

  • Left/right: Click the - and + buttons to adjust the amount of margin that you want to appear outside the left and right edges of the navigation bar.

In this section, you can change the settings modify <ul> list elements, which contain contain text for the navigation links for your website.

Menu breakpoint: From the drop-down, choose the devices on which you want your collapsed navigation menu to appear.

  • Menu split: To split the menu, click to turn the toggle on.

  • Menu alignment: Choose the type of spacing / alignment that you want for the menu items.

  • Menu links alignment: Choose the type of spacing / alignment that you want for the menu links.

In this section, you can change the settings for the <a> elements, which contain the main navigation links for your website.

  • Font family: Specify the font family for your links.

  • Classification: From the drop-down, choose whether you want a Serif or Sans serif font type.

  • Mobile/Desktop toggle: The toggle is set to Mobile by default. Click the Desktop button to change the equivalent settings for desktop users.

  • Color: Choose a color from the color picker. You can also enter the hex color code into the Color field.

  • Size: Click the - and + buttons to adjust the size of the link text font.

  • Weight: Click the - and + buttons to adjust the weight (thickness) of the link text font.

  • Tracking: Click the - and + buttons to adjust the weight (thickness) of the link text font.

  • Kerning: Click the - and + buttons to adjust the kerning of the link text font.

  • Style: From the drop-down, choose a style for the text.

  • Shadow: From the drop-down, choose the type of shadow that you want to accompany the link text font.

  • Mobile/Desktop toggle: The toggle is set to Mobile by default. Click the Desktop button to change the equivalent settings for desktop users.

  • Background: From the drop-down, choose the type of background you want for the links.

  • Mobile/Desktop toggle: The toggle is set to Mobile by default. Click the Desktop button to change the equivalent settings for desktop users.

  • Border width: Click the - and + buttons to adjust the width of the link border.

  • Border color: Choose a color for the link border from the color picker. You can also enter the hex color code into the Border Color field.

  • Border placement: From the drop-down, choose where you want the border to appear. NOTE: The default setting places a border around the entire link.

  • Border radius: Click the - and + buttons to adjust the amount of curve that you want to appear in the corners of the link border.

  • Drop shadow: Choose what type of shadow you want to appear at the bottom of the link.

  • Mobile/Desktop padding toggle: The toggle is set to Mobile by default. Click the Desktop button to change the equivalent settings for desktop users.

  • Top/bottom: Click the - and + buttons to adjust the amount of padding that you want to appear inside of the top and bottom edges of each link space.

  • Left/right: Click the - and + buttons to adjust the amount of padding that you want to appear inside the left and right edges of each link space.

  • Mobile/Desktop margin toggle: The toggle is set to Mobile by default. Click the Desktop button to change the equivalent settings for desktop users.

  • Left only: Click the - and + buttons to adjust the amount of LEFT margin that you want to appear outside the left edge of each link space.

  • Link widths: Choose either the Relative widths or Evenly spaced option. Evenly spaced will space the links across the entire navigation bar.

  • Link text wrapping: Click to turn text wrapping on for the link text.

In this section, you can change the hover behavior settings for all navigation bar links. Your buttons will be in a “hover” state when the cursor is on top of the button but it has not been clicked.

Background type: Choose the type of background that you want to appear when a user hovers over a link.

  • Text Color: Choose a color from the color picker. You can also enter the hex color code into the Color field.

  • Text Shadow: From the drop-down, choose the type of shadow that you want to appear when a user hovers over a link.

  • Border width: Click the - and + buttons to adjust the width of the navigation bar border that you want to appear when a user hovers over a link.

  • Border color: Choose a Border Color from the color picker that you want to appear when a user hovers over a link. You can also enter the hex color code into the Border Color field.

  • Box shadow: From the drop-down, choose the type of shadow that you want to appear when the user hovers over a link.

In this section, you can change the behavior settings for the link that a user clicks within the navigation bar.

  • Mobile/Desktop Background toggle: The toggle is set to Mobile by default. Click the Desktop button to change the equivalent settings for desktop users.

  • Background: From the drop-down, choose the type of background you want to appear when the link is clicked.

  • Mobile/Desktop Background toggle: The toggle is set to Mobile by default. Click the Desktop button to change the equivalent settings for desktop users.

  • Text color: Choose a text color from the color picker that you want to appear when a user clicks/taps a link. You can also enter the hex color code into the Text Color field.

  • Text shadow: From the drop-down, choose the type of shadow that you want to accompany the link text.

  • Mobile/Desktop Background toggle: The toggle is set to Mobile by default. Click the Desktop button to change the equivalent settings for desktop users.

  • Border width: Click the - and + buttons to adjust the width of the link border that you want to appear when a user clicks/taps a link.

  • Border color: Choose a Border Color from the color picker of the link border that you want to appear when a user clicks/taps a link. You can also enter the hex color code into the Border Color field.

  • Box shadow: From the drop-down, choose the type of shadow that you want to appear when the user clicks/taps a link.

In this section, you can change the styling for the navigation drop-down menus.

  • Mobile/Desktop Background toggle: The toggle is set to Mobile by default. Click the Desktop button to change the equivalent settings for desktop users.

  • Background: From the drop-down, choose the type of background you want to appear in the drop-down.

  • Border width: Click the - and + buttons to adjust the width of the drop-down border.

  • Border color: Choose a drop-down border color from the color picker. You can also enter the hex color code into the Border Color field.

  • Border placement: From the drop-down, choose where you want the drop-down border to appear.

  • Border radius: Click the - and + buttons to adjust the amount of curve that you want to appear in the corners of the drop-down border.

  • Drop shadow: Choose what type of shadow you want to appear at the bottom of the drop-down.

The default border setting places a border around the entire drop-down.

  • Mobile/Desktop padding toggle: The toggle is set to Mobile by default. Click the Desktop button to change the equivalent settings for desktop users.

  • Top & bottom: Click the - and + buttons to adjust the amount of padding that you want to appear inside of the top and bottom edges of drop-down.

  • Left & Right: Click the - and + buttons to adjust the amount of padding that you want to appear inside the left and right edges of each drop-down.

Click the toggle to OFF if you don’t want to display the small down-arrow in the drop-down.

In this section, you can change the settings for drop-down links in your navigation bar.

  • Font family: Specify the font family for your drop-down links.

  • Classification: Choose whether you want a Serif or Sans serif font type from the dropdown.

  • Mobile/Desktop toggle: The toggle is set to Mobile by default. Click the Desktop button to change the equivalent settings for desktop users.

  • Color: Choose a link text color from the color picker. You can also enter the hex color code into the Color field.

  • Size: Click the - and + buttons to adjust the size of the link font.

  • Weight: Click the - and + buttons to adjust the weight (thickness) of the link font.

  • Tracking: Click the - and + buttons to adjust the weight (thickness) of the link font.

  • Kerning: Click the - and + buttons to adjust the kerning of the link font.

  • Style: Choose a style for the link text from the drop-down.

  • Shadow: Choose the type of shadow that you want to accompany the font from the dropdown.

  • Mobile/Desktop toggle: The toggle is set to Mobile by default. Click the Desktop button to change the equivalent settings for desktop users.

  • Background: Choose the type of background you want for the dropdown links.

  • Mobile/Desktop toggle: The toggle is set to Mobile by default. Click the Desktop button to change the equivalent settings for desktop users.

  • Border width: Click the - and + buttons to adjust the width of the drop-down link border.

  • Border color: Choose a color for the drop-down link border from the color picker. You can also enter the hex color code into the Border Color field.

  • Border placement: From the drop-down, choose where you want the drop-down link border to appear. NOTE: The default setting places a border around the entire link.

  • Border radius: Click the - and + buttons to adjust the amount of curve that you want to appear in the corners of the drop-down link border.

  • Drop shadow: Choose what type of shadow you want to appear at the bottom of the drop-down link.

  • Mobile/Desktop padding toggle: The toggle is set to Mobile by default. Click the Desktop button to change the equivalent settings for desktop users.

  • Top & Bottom: Click the - and + buttons to adjust the amount of padding that you want to appear inside of the top and bottom edges of each drop-down link.

  • Left & Right: Click the - and + buttons to adjust the amount of padding that you want to appear inside the left and right edges of each drop-down link.

  • Mobile/Desktop margin toggle: The toggle is set to Mobile by default. Click the Desktop button to change the equivalent settings for desktop users.

  • Left only: Click the - and + buttons to adjust the amount of LEFT margin that you want to appear outside the left edge of each drop-down link.

In this section, you can change the hover behavior settings for all navigation bar dropdown links. Your hover settings will apply when a cursor is positioned over the dropdown links but before the user has clicked.

Background type: Choose the type of background that you want to appear when a user hovers over a dropdown link.

  • Text Color: Choose a link hover color from the color picker. You can also enter the hex color code into the Color field.

  • Text Shadow: From the drop-down, choose the type of shadow that you want to appear when a user hovers over a drop-down link.

  • Border color: Choose a Border Color from the color picker that you want to appear when a user hovers over a dropdown link. You can also enter the hex color code into the Border Color field.

  • Weight: Click the - and + buttons to adjust the (weight) width of the navigation bar border that you want to appear when a user hovers over a dropdown link.

  • Shadow effects: From the drop-down, choose the type of border shadow that you want to appear when the user hovers over a dropdown link.

In this section, you can change the behavior settings for the navigation bar dropdown link that a user clicks/taps.

  • Mobile/Desktop Background toggle: The toggle is set to Mobile by default. Click the Desktop button to change the equivalent settings for desktop users.

  • Background: From the drop-down, choose the type of background you want to appear when the link is clicked/tapped.

  • Mobile/Desktop Background toggle: The toggle is set to Mobile by default. Click the Desktop button to change the equivalent settings for desktop users.

  • Border width: Click the - and + buttons to adjust the width of the link border that you want to appear when a user clicks/taps a drop-down link.

  • Border color: Choose a Border Color from the color picker of the link border that you want to appear when a user clicks/taps a drop-down link. You can also enter the hex color code into the Border Color field.

  • Shadow effects: From the drop-down, choose the type of shadow that you want to appear when the user clicks/taps a drop-down link.

In this section, you can change the settings for the navigation burger menu icon.

Background type: Choose the type of background for the navigation burger.

  • Border width: Click the - and + buttons to adjust the width of the burger icon border.

  • Border color: Choose a color for the burger icon border from the color picker. You can also enter the hex color code into the Border Color field.

  • Burger shadow: Choose what type of shadow you want to appear at the bottom of the burger icon.

  • Line Weight: Click the - and + buttons to adjust the weight (thickness) of the burger lines.

  • Line Color: Choose a color for the burger lines from the color picker. You can also enter the hex color code into the Color field.

  • Line Width: Click the - and + buttons to adjust the width of the burger lines.

  • Line Spacing: Click the - and + buttons to adjust the spacing of the burger lines.

  • Line Animation: From the drop-down, choose the type of animation behavior that occurs when the user clicks the burger icon.

  • Top/bottom: Click the - and + buttons to adjust the amount of padding that you want to appear inside of the top and bottom edges of the burger icon space.

  • Left/right: Click the - and + buttons to adjust the amount of padding that you want to appear inside the left and right edges of the burger icon space.

In this section, you can change the settings for the navigation burger menu icon when it is clicked/tapped by the user.

Background type: Choose the type of background for the navigation burger when it is clicked/tapped.

Border color: From the color picker, choose a color for the active burger icon border. You can also enter the hex color code into the Border Color field.

  • Line color: From the color picker, choose a color for the lines of the burger icon when it is active. You can also enter the hex color code into the Border Color field.

  • Drop shadow: From the drop-down, choose the type of shadow that you want to appear for the active burger lines.