{"id":120,"date":"2025-05-22T08:03:26","date_gmt":"2025-05-22T08:03:26","guid":{"rendered":"https:\/\/doc.topperpack.com\/docs\/theme-builder\/header\/"},"modified":"2025-07-02T06:36:30","modified_gmt":"2025-07-02T06:36:30","slug":"header","status":"publish","type":"docs","link":"https:\/\/doc.topperpack.com\/docs\/theme-builder\/header\/","title":{"rendered":"Header"},"content":{"rendered":"\n

\ud83d\ude80 Create a Stunning Custom Header with Topper Pack Theme Builder<\/h2>\n\n\n\n

Designing a beautiful and dynamic site header has never been easier. With the Topper Pack Theme Builder<\/strong>, you have full creative control using the power of Elementor \u2014 no coding needed!<\/p>\n\n\n\n

Here\u2019s how you can build a custom header that stands out:<\/p>\n\n\n\n

<\/div>\n\n\n\n

\ud83e\udde9 Step 1: Access the Theme Builder<\/h3>\n\n\n\n
    \n
  1. Navigate to your WordPress Dashboard.<\/li>\n\n\n\n
  2. Click on Topper Pack \u2192 Theme Builder<\/strong>.<\/li>\n\n\n\n
  3. Select the “Header”<\/strong> tab.<\/li>\n\n\n\n
  4. Click the \u201cAdd New Template\u201d<\/strong> button.<\/li>\n<\/ol>\n\n\n\n
    \"\"<\/figure>\n\n\n\n

    \ud83d\udd39 This opens the header template creation screen, where you can define your layout settings.<\/em><\/p>\n\n\n\n

    <\/div>\n\n\n\n

    \ud83d\udcdd Step 2: Configure Template Settings<\/h3>\n\n\n\n
      \n
    • Title<\/strong>: Give your header a clear name (e.g., Main Site Header<\/code>).<\/li>\n\n\n\n
    • Type of Template<\/strong>: Select “Header”<\/strong> from the dropdown.<\/li>\n<\/ul>\n\n\n\n
      \"\"<\/figure>\n\n\n\n

      This tells the Theme Builder that you\u2019re designing a header layout.<\/p>\n\n\n\n

      <\/div>\n\n\n\n

      \ud83c\udf0d Step 3: Set Display Conditions<\/h3>\n\n\n\n

      Define exactly where<\/strong> this header should appear:<\/p>\n\n\n\n

        \n
      • Choose “Entire Website”<\/strong> to make it the default site-wide header.<\/li>\n\n\n\n
      • Or target specific areas like:\n
          \n
        • Blog\/Posts page<\/li>\n\n\n\n
        • Archives<\/li>\n\n\n\n
        • Custom post types<\/li>\n\n\n\n
        • 404 pages, etc.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
          \"\"<\/figure>\n\n\n\n

          \ud83c\udfaf Pro Tip<\/strong>: You can even add multiple display conditions<\/em> for more flexibility.<\/p>\n\n\n\n

          <\/div>\n\n\n\n

          \ud83d\udc65 Step 4: Assign by User Roles (Optional)<\/h3>\n\n\n\n

          Control who<\/strong> sees this header based on user roles:<\/p>\n\n\n\n

            \n
          • Choose All<\/strong> (default) or target:\n
              \n
            • Logged In<\/li>\n\n\n\n
            • Administrator<\/li>\n\n\n\n
            • Editor<\/li>\n\n\n\n
            • Customer<\/li>\n\n\n\n
            • Shop Manager<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
              \"\"<\/figure>\n\n\n\n

              This is perfect for showing different headers to logged-in members or admins.<\/p>\n\n\n\n

              <\/div>\n\n\n\n

              \ud83c\udfa8 Step 5: Design with Elementor<\/h3>\n\n\n\n
                \n
              1. Click the \u201cEdit with Elementor\u201d<\/strong> button.<\/li>\n\n\n\n
              2. You\u2019ll be redirected to Elementor\u2019s visual editor.<\/li>\n\n\n\n
              3. Build your header using any widgets you like:\n
                  \n
                • Logo<\/li>\n\n\n\n
                • Navigation menu<\/li>\n\n\n\n
                • Search bar<\/li>\n\n\n\n
                • Button or CTA<\/li>\n\n\n\n
                • Social icons<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n

                  \ud83d\udca1 Bonus<\/strong>: Use Topper Pack\u2019s unique widgets<\/strong> to add animated menus, mega menus, gradient buttons, and custom icons.<\/p>\n\n\n\n

                  <\/div>\n\n\n\n

                  \u2705 Step 6: Publish and Go Live<\/h3>\n\n\n\n
                    \n
                  • Once your design is ready, click Publish<\/strong>.<\/li>\n\n\n\n
                  • Your custom header is now live across your chosen display conditions!<\/li>\n<\/ul>\n\n\n\n

                    \ud83c\udf89 That\u2019s it \u2014 you\u2019ve created a beautiful, responsive header using the Topper Pack Theme Builder!<\/p>\n\n\n\n

                    \"\"<\/figure>\n\n\n\n
                    <\/div>\n\n\n\n

                    \ud83d\udd25 Why Use Topper Pack\u2019s Theme Builder?<\/h2>\n\n\n\n
                      \n
                    • Fully customizable with Elementor compatibility<\/strong><\/li>\n\n\n\n
                    • Target headers by location and user role<\/strong><\/li>\n\n\n\n
                    • Add advanced features with Topper widgets<\/strong><\/li>\n\n\n\n
                    • Manage all layouts from a centralized builder panel<\/strong><\/li>\n<\/ul>\n\n\n\n

                      <\/p>\n","protected":false},"excerpt":{"rendered":"

                      \ud83d\ude80 Create a Stunning Custom Header with Topper Pack Theme Builder Designing a beautiful and dynamic site header has never been easier. With the Topper Pack Theme Builder, you have full creative control using the power of Elementor \u2014 no coding needed! Here\u2019s how you can build a custom header that stands out: \ud83e\udde9 Step […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":51,"menu_order":2,"comment_status":"open","ping_status":"closed","template":"","doc_tag":[108,192,194,191,2,193],"class_list":["post-120","docs","type-docs","status-publish","hentry","doc_tag-elementor","doc_tag-header","doc_tag-responsive","doc_tag-themebuilder","doc_tag-themepulpack","doc_tag-wordpress"],"author_avatar":"https:\/\/doc.topperpack.com\/wp-content\/litespeed\/avatar\/7b6b48be1e52939d6a914fe9b20bbc7a.jpg?ver=1777451331","author_name":"tpl","_links":{"self":[{"href":"https:\/\/doc.topperpack.com\/wp-json\/wp\/v2\/docs\/120","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/doc.topperpack.com\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/doc.topperpack.com\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/doc.topperpack.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/doc.topperpack.com\/wp-json\/wp\/v2\/comments?post=120"}],"version-history":[{"count":1,"href":"https:\/\/doc.topperpack.com\/wp-json\/wp\/v2\/docs\/120\/revisions"}],"predecessor-version":[{"id":1211,"href":"https:\/\/doc.topperpack.com\/wp-json\/wp\/v2\/docs\/120\/revisions\/1211"}],"up":[{"embeddable":true,"href":"https:\/\/doc.topperpack.com\/wp-json\/wp\/v2\/docs\/51"}],"wp:attachment":[{"href":"https:\/\/doc.topperpack.com\/wp-json\/wp\/v2\/media?parent=120"}],"wp:term":[{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/doc.topperpack.com\/wp-json\/wp\/v2\/doc_tag?post=120"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}