{"id":709,"date":"2026-06-10T03:18:12","date_gmt":"2026-06-10T03:18:12","guid":{"rendered":"https:\/\/docs.wpinterface.com\/?p=709"},"modified":"2026-06-10T03:18:24","modified_gmt":"2026-06-10T03:18:24","slug":"main-navigation-configuration-guide","status":"publish","type":"post","link":"https:\/\/docs.wpinterface.com\/main-navigation-configuration-guide\/","title":{"rendered":"Main Navigation Configuration Guide"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Our theme offers robust controls over your site&#8217;s primary navigation menu, allowing you to create beautiful, responsive menus with hover effects and custom styling.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Accessing Navigation Settings<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To configure your primary menu&#8217;s appearance, navigate to <strong>Appearance \u2192 Customize<\/strong> in your WordPress dashboard, then go to <strong>Header \u2192 Main Navigation<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>(Note: To actually create and assign the menu links, you must go to <strong>Appearance \u2192 Menus<\/strong> first).<\/em><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">1. Hover Animation<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Make your menu feel interactive and modern by adding a hover effect.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Under the <strong>Animation<\/strong> section, find <strong>Hover Animation<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>None:<\/strong> The text color simply changes on hover.<\/li>\n\n\n\n<li><strong>Underline:<\/strong> A smooth animated line will slide under the menu item when a user hovers their mouse over it.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">2. Sub Menus &amp; Dropdowns<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">If your menu has nested items (drop-downs), you can make this visually clear to your visitors.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Under the <strong>Sub Menus<\/strong> section:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Dropdown Indicators:<\/strong> Toggle this switch to ON to display small arrow icons next to any parent menu item that contains a sub-menu. This is a great usability enhancement.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">3. Mobile Menu Settings<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Control exactly when and how your menu collapses into a &#8220;hamburger&#8221; style mobile menu for smaller screens.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Under the <strong>Mobile Menu<\/strong> section:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Mobile Breakpoint:<\/strong> Use the slider to define the exact screen width (in pixels) at which the standard desktop menu disappears and the mobile menu toggle appears. If you have a very long menu with many links, you may want to increase this number so it collapses earlier on smaller laptops or tablets.<\/li>\n\n\n\n<li><strong>Mobile Menu Button Label:<\/strong> You can display text next to the hamburger icon (e.g., &#8220;Menu&#8221;, &#8220;Navigate&#8221;). If you only want the icon to show, leave this field completely empty.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">4. Design &amp; Styling Options<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Scroll down to the <strong>Design Options<\/strong> section to customize the colors of your navigation area.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>(Note: These options may depend on your chosen Header Layout. For example, if your navigation sits on its own row in Header Layout 3, you can style the background of that row here).<\/em><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Background<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Solid Color:<\/strong> Choose a flat background color for the navigation bar.<\/li>\n\n\n\n<li><strong>Gradient:<\/strong> Apply a colorful gradient background.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Font Colors<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Link Color:<\/strong> The color of the top-level menu items.<\/li>\n\n\n\n<li><strong>Link Hover Color:<\/strong> The color the text changes to when hovered, or the color of the active page item.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Border<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Add a border to the <strong>Top<\/strong> or <strong>Bottom<\/strong> of the navigation bar. Define the Style, Color, and Width.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">5. Navigation Typography<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">If you want your menu links to stand out from standard paragraph text, open the <strong>Typography<\/strong> section.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Font Size:<\/strong> Use the slider to adjust the size of the top-level navigation links. You can set specific sizes for Desktop, Tablet, and Mobile to ensure perfect readability on all devices.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Saving Your Changes<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Once your navigation is styled to your liking, click the blue <strong>Publish<\/strong> button at the top of the Customizer.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Our theme offers robust controls over your site&#8217;s primary navigation menu, allowing you to create beautiful, responsive menus with hover effects and custom styling. Accessing Navigation Settings To configure your primary menu&#8217;s appearance, navigate to Appearance \u2192 Customize in your WordPress dashboard, then go to Header \u2192 Main Navigation. (Note: To actually create and assign &hellip; <a href=\"https:\/\/docs.wpinterface.com\/main-navigation-configuration-guide\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Main Navigation Configuration Guide<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20],"tags":[21],"class_list":["post-709","post","type-post","status-publish","format-standard","hentry","category-general","tag-business-interface"],"_links":{"self":[{"href":"https:\/\/docs.wpinterface.com\/wp-json\/wp\/v2\/posts\/709","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/docs.wpinterface.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/docs.wpinterface.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/docs.wpinterface.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.wpinterface.com\/wp-json\/wp\/v2\/comments?post=709"}],"version-history":[{"count":2,"href":"https:\/\/docs.wpinterface.com\/wp-json\/wp\/v2\/posts\/709\/revisions"}],"predecessor-version":[{"id":711,"href":"https:\/\/docs.wpinterface.com\/wp-json\/wp\/v2\/posts\/709\/revisions\/711"}],"wp:attachment":[{"href":"https:\/\/docs.wpinterface.com\/wp-json\/wp\/v2\/media?parent=709"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/docs.wpinterface.com\/wp-json\/wp\/v2\/categories?post=709"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/docs.wpinterface.com\/wp-json\/wp\/v2\/tags?post=709"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}