{"id":10480,"date":"2025-09-22T20:08:52","date_gmt":"2025-09-23T00:08:52","guid":{"rendered":"https:\/\/learndash.com\/support\/?post_type=docs&#038;p=10480"},"modified":"2025-09-27T18:23:08","modified_gmt":"2025-09-27T22:23:08","password":"","slug":"how-to-customize-the-app-navigation-header","status":"publish","type":"docs","link":"https:\/\/learndash.com\/support\/kb\/learndash-app\/managing-content-for-learndash-app\/how-to-customize-the-app-navigation-header\/","title":{"rendered":"How to Customize the App Navigation Header"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\" id=\"h-introduction\"><strong>Introduction<\/strong><\/h2>\n\n\n\n<p>Customizing your header bar and navigation menus elevates usability and reinforces branding in your LearnDash App. With the App Navigation Header, you can move the <strong>More Menu<\/strong>, add custom <strong>action buttons<\/strong>, and update icons all while freeing up a fifth slot in the <strong>Tab Bar<\/strong> for more direct access to key app sections.<br><\/p>\n\n\n\n<p>This guide walks you through header configuration options, <strong>More Menu<\/strong> placement, and icon customization for a cleaner and more engaging user experience.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-key-features-of-the-app-navigation-header\"><strong>Key Features of the App Navigation Header<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Customizable Action Buttons<\/strong><strong><br><\/strong> Add and personalize two buttons in the header for quick actions like creating posts or messaging.<br><\/li>\n\n\n\n<li><strong>Relocatable More Menu<\/strong><strong><br><\/strong> Move the More Menu from the Tab Bar to the top header, making space for an extra menu item.<br><\/li>\n\n\n\n<li><strong>Replaceable Icons<\/strong><strong><br><\/strong> Change default action icons (e.g., Create Post, Add Group) to match your app\u2019s branding.<br><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-accessing-header-bar-settings\"><strong>Accessing Header Bar Settings<\/strong><\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>In your WordPress Dashboard, go to <strong>LearnDash App > Menus > Header Bar<\/strong>.<br><\/li>\n\n\n\n<li>Under <strong>Header Bar Settings<\/strong>, choose between:<br>\n<ul class=\"wp-block-list\">\n<li><strong>Left Aligned<\/strong> \u2013 Keeps the page title aligned to the left.<br><\/li>\n\n\n\n<li><strong>Hidden<\/strong> \u2013 Hides the header on scroll.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"739\" height=\"113\" src=\"https:\/\/learndash.com\/support\/wp-content\/uploads\/2025\/09\/How-to-Customize-the-App-Navigation-Header-in-the-Learndash-App-_-1.png\" alt=\"Screenshot of Menus - Header Menu\" class=\"wp-image-10876\" srcset=\"https:\/\/learndash.com\/support\/wp-content\/uploads\/2025\/09\/How-to-Customize-the-App-Navigation-Header-in-the-Learndash-App-_-1.png 739w, https:\/\/learndash.com\/support\/wp-content\/uploads\/2025\/09\/How-to-Customize-the-App-Navigation-Header-in-the-Learndash-App-_-1-400x61.png 400w, https:\/\/learndash.com\/support\/wp-content\/uploads\/2025\/09\/How-to-Customize-the-App-Navigation-Header-in-the-Learndash-App-_-1-360x55.png 360w\" sizes=\"auto, (max-width: 739px) 100vw, 739px\" \/><\/figure><\/div>\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li>Click <strong>Save Settings<\/strong>.<br><\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-configuring-more-menu-placement\"><strong>Configuring More Menu Placement<\/strong><\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>In the same settings area, find <strong>More Menu Placement<\/strong>.<br><\/li>\n\n\n\n<li>Choose one of the following:<br>\n<ul class=\"wp-block-list\">\n<li><strong>Bottom Tab Bar<\/strong> \u2013 Keeps the More Menu in its default position.<br><\/li>\n\n\n\n<li><strong>Top Header Bar<\/strong> \u2013 Moves it to the top header.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"299\" height=\"331\" src=\"https:\/\/learndash.com\/support\/wp-content\/uploads\/2025\/09\/How-to-Customize-the-App-Navigation-Header-in-the-Learndash-App-_-2.png\" alt=\"Screenshot of the Header Bar Settings\" class=\"wp-image-10877\"\/><\/figure><\/div>\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li>Click <strong>Save Settings<\/strong>.<br><\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-troubleshooting-and-faqs\"><strong>Troubleshooting and FAQs<\/strong><\/h2>\n\n\n\n<p><strong>Q: Custom header icons look misaligned.<\/strong><strong><br><\/strong> A: Upload square icons with transparent backgrounds, and enable <strong>Color Fill<\/strong> to match your Tab Bar style.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction Customizing your header bar and navigation menus elevates usability and reinforces branding in your LearnDash App. With the App Navigation Header, you can move the More Menu, add custom action buttons, and update icons all while freeing up a fifth slot in the Tab Bar for more direct access to key app sections. This&#8230;<\/p>\n","protected":false},"author":58,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_helpful_status":1,"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_swpsp_post_exclude":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":""},"doc_category":[288],"doc_tag":[],"knowledge_base":[283],"class_list":["post-10480","docs","type-docs","status-publish","hentry","doc_category-managing-content-for-learndash-app","knowledge_base-learndash-app"],"year_month":"2026-04","word_count":249,"total_views":"556","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"display_name":"Stephanie Liy","author_link":"https:\/\/learndash.com\/support\/author\/stephaniei\/"},"doc_category_info":[{"term_name":"Managing Content for LearnDash App","term_url":"https:\/\/learndash.com\/support\/kb\/learndash-app\/managing-content-for-learndash-app\/"}],"doc_tag_info":[],"taxonomy_info":{"doc_category":[{"value":288,"label":"Managing Content for LearnDash App"}],"knowledge_base":[{"value":283,"label":"LearnDash App"}]},"featured_image_src_large":false,"comment_info":0,"knowledge_base_info":[{"term_name":"LearnDash App","term_url":"https:\/\/learndash.com\/support\/kb\/learndash-app\/","term_slug":"learndash-app"}],"knowledge_base_slug":["learndash-app"],"_links":{"self":[{"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/docs\/10480","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/users\/58"}],"replies":[{"embeddable":true,"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/comments?post=10480"}],"version-history":[{"count":2,"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/docs\/10480\/revisions"}],"predecessor-version":[{"id":10881,"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/docs\/10480\/revisions\/10881"}],"wp:attachment":[{"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/media?parent=10480"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/doc_category?post=10480"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/doc_tag?post=10480"},{"taxonomy":"knowledge_base","embeddable":true,"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/knowledge_base?post=10480"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}