--- title: Navigation Style description: In the Navigation settings page, you can modify multiple navigation settings for your website, including your Navigation bar and desktop/mobile layouts… --- [Skip to content](https://help.punchmark.com/knowledgebase/wiki/spaces/punchmark/pages/10223714#main-content) English Show submenu for translations [![punchmark-logo-horizontal-white](https://help.punchmark.com/hs-fs/hubfs/Punchmark%20Branding/punchmark-logo-horizontal-white.png?width=225&height=38&name=punchmark-logo-horizontal-white.png)](https://academy.punchmark.com/knowledge?hsLang=en) - [Website](https://www.punchmark.com/) - [News](https://www.punchmark.com/news) - [Support](https://www.punchmark.com/contact-support) - [In the Loupe](https://www.punchmark.com/loupe) Open main navigation Close main navigation - [Website](https://www.punchmark.com/) - [News](https://www.punchmark.com/news) - [Support](https://www.punchmark.com/contact-support) - [In the Loupe](https://www.punchmark.com/loupe) - English Show submenu for translations - Go to punchmark.com Go to punchmark.com Hello. How can we help you? - There are no suggestions because the search field is empty. 1. [Punchmark Knowledge Base](https://help.punchmark.com/knowledgebase?hsLang=en) 2. [hidden WIP](https://help.punchmark.com/knowledgebase/hidden-wip?hsLang=en) 3. [Design](https://help.punchmark.com/knowledgebase/hidden-wip?hsLang=en#design) # Navigation Style 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](mailto:support@punchmark.com). - [Change the Navigation Settings](https://help.punchmark.com/knowledgebase/wiki/spaces/punchmark/pages/10223714#NavigationStyle-ChangetheNavigationSettings) - [Navigation Bar](https://help.punchmark.com/knowledgebase/wiki/spaces/punchmark/pages/10223714#NavigationStyle-NavigationBar) - [Navigation Bar Styling](https://help.punchmark.com/knowledgebase/wiki/spaces/punchmark/pages/10223714#NavigationStyle-NavigationBarStyling) - [Navigation Menu Options](https://help.punchmark.com/knowledgebase/wiki/spaces/punchmark/pages/10223714#NavigationStyle-NavigationMenuOptions) - [Navigation Links](https://help.punchmark.com/knowledgebase/wiki/spaces/punchmark/pages/10223714#NavigationStyle-NavigationLinks) - [Navigation Links “Hover” State](https://help.punchmark.com/knowledgebase/wiki/spaces/punchmark/pages/10223714#NavigationStyle-NavigationLinks“Hover”State) - [Navigation Links “Active” State](https://help.punchmark.com/knowledgebase/wiki/spaces/punchmark/pages/10223714#NavigationStyle-NavigationLinks“Active”State) - [Navigation Dropdown Menus](https://help.punchmark.com/knowledgebase/wiki/spaces/punchmark/pages/10223714#NavigationStyle-NavigationDropdownMenus) - [Navigation Dropdown Links](https://help.punchmark.com/knowledgebase/wiki/spaces/punchmark/pages/10223714#NavigationStyle-NavigationDropdownLinks) - [Navigation Dropdown Links “Hover” State](https://help.punchmark.com/knowledgebase/wiki/spaces/punchmark/pages/10223714#NavigationStyle-NavigationDropdownLinks“Hover”State) - [Navigation Dropdown Links “Active” State](https://help.punchmark.com/knowledgebase/wiki/spaces/punchmark/pages/10223714#NavigationStyle-NavigationDropdownLinks“Active”State) - [Mobile Navigation Burger Menu](https://help.punchmark.com/knowledgebase/wiki/spaces/punchmark/pages/10223714#NavigationStyle-MobileNavigationBurgerMenu) - [Mobile Navigation Burger “Active” State](https://help.punchmark.com/knowledgebase/wiki/spaces/punchmark/pages/10223714#NavigationStyle-MobileNavigationBurger“Active”State) ## Change the Navigation Settings 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. ## Navigation Bar In this section, you can change the settings for the block, which contains the navigation menu for your website. ### Navigation Bar Positioning - **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. ![](https://help.punchmark.com/hubfs/knowledge-base/confluence-migration-2026/73465899-e28780f9e0.png) ### Navigation Bar: Sticky - **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. ![](https://help.punchmark.com/hubfs/knowledge-base/confluence-migration-2026/73465915-5252e2916b.png) ### Navigation Vertical Alignment From the drop-down, choose the setting for vertical alignment of the navigation bar. ![](https://help.punchmark.com/hubfs/knowledge-base/confluence-migration-2026/73367640-bbbd185149.png) ## Navigation Bar Styling In this section, you can change the settings for the block, which contains the navigation menu for your website. ### Navigation Bar Background - **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. ![](https://help.punchmark.com/hubfs/knowledge-base/confluence-migration-2026/73695306-a6d20d39f3.png) ### Navigation Bar Border - **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. ![](https://help.punchmark.com/hubfs/knowledge-base/confluence-migration-2026/73695298-3825d7858e.png) ### Navigation Bar Padding - **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. ![](https://help.punchmark.com/hubfs/knowledge-base/confluence-migration-2026/73302063-c40638f897.png) ### Navigation Bar Margin - **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. ![](https://help.punchmark.com/hubfs/knowledge-base/confluence-migration-2026/73695314-229bfb1bfd.png) ## Navigation Menu Options In this section, you can change the settings modify - [Default HubSpot Blog](https://blog.punchmark.com/blog) [![pm-symbol-blue](https://help.punchmark.com/hs-fs/hubfs/Punchmark%20Branding/pm-symbol-blue.png?width=40&height=45&name=pm-symbol-blue.png "pm-symbol-blue")](https://academy.punchmark.com/knowledge?hsLang=en) Punchmark Resource Center Copyright © 2026, Punchmark