{"id":5449,"date":"2024-04-14T21:36:06","date_gmt":"2024-04-14T13:36:06","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=5449"},"modified":"2024-04-17T21:54:46","modified_gmt":"2024-04-17T13:54:46","slug":"main-page-direction","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/main-page-direction\/","title":{"rendered":"Main page: direction"},"content":{"rendered":"\n
\n

Your Menu Bar is among the initial things a guest encounters on your website. Motivate visitor engagement by using appealing, clickable connections, and be considerate to your upcoming self by transforming the Menu Bar into a reusable Symbol that can be customized and modified at your desire.\u00a0<\/p>\n

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

<\/p>\n

During this session, you will discover how to create a Menu Bar using the following:<\/p>\n

    \n
  1. Integrate the Menu Bar<\/li>\n
  2. Enhance the Menu Bar’s Style<\/li>\n
  3. Transform the Menu Bar into a Symbol<\/li>\n<\/ol>\n

    Stick with us and acquire the resources<\/a> for this tutorial.\u00a0<\/p>\n

    Integrate the Menu Bar<\/h2>\n

    We shall incorporate a Menu Ba<\/strong>r at the summit of the main page:\u00a0<\/p>\n

      \n
    1. Access the Navigator<\/strong><\/li>\n
    2. Unlock the Incorporate panel<\/strong><\/li>\n
    3. Navigate to Components<\/strong><\/li>\n
    4. Drag a Menu Bar<\/strong> into the Navigator<\/strong> and position it beneath the Body<\/strong><\/li>\n<\/ol>\n
      \n
      <\/div>\n<\/figure>\n

      \u200d<\/p>\n

      The Menu Bar<\/strong> component arrives with certain default components, including a Container<\/strong>.<\/p>\n

      In the prior main page hero section tutorial, we made an independent Container <\/strong>positioned in the Section<\/strong>. We specified the highest width of the Container<\/strong> to be 1200 pixels, which automatically produced a \u201cContainer\u201d class.\u00a0<\/p>\n

      Let\u2019s recycle the \u201cContainer\u201d class on the Menu Bar\u2019s<\/strong> default Container<\/strong> so that it, too, can enjoy the benefits of the 1200 pixel maximum width we previously established:\u00a0<\/p>\n

        \n
      1. Choose the Menu Bar Container<\/strong><\/li>\n
      2. Popup the Design panel<\/strong><\/li>\n
      3. Enter the Identifier field<\/strong><\/li>\n
      4. Select \u201cContainer\u201d from Current classes<\/strong><\/li>\n<\/ol>\n
        \n
        <\/div>\n<\/figure>\n

        Remark:<\/strong> If you assign a class to an element, all style modifications made on this element are preserved in this class. You can reuse the class on fresh elements to automatically deploy the styles preserved in the class you produced.\u00a0<\/p><\/blockquote>\n

        Enhance the Menu Bar<\/h2>\n

        Lets modify the background shade of the Menu Bar <\/strong>to aid it in blending more harmoniously with our design:<\/p>\n

          \n
        1. Select the Menu Bar<\/strong><\/li>\n
        2. Unveil Design panel<\/strong> > Backgrounds<\/strong><\/li>\n
        3. Launch the color palette<\/li>\n
        4. Pick black<\/li>\n<\/ol>\n

          Altering the background shade of the Menu Bar<\/strong> to black causes our Menu Bar <\/strong>connections to merge with the background and become indistinct. We shall rectify this after incorporating our logo to the Menu Bar<\/strong>:\u00a0<\/p>\n

            \n
          1. Launch the Resources panel<\/strong><\/li>\n
          2. Drop the logo into the Brand Link block<\/strong><\/li>\n<\/ol>\n
            \n
            <\/div>\n<\/figure>\n

            <\/p>\n

            Lets shrink the logo:<\/p>\n

              \n
            1. Choose the logo Picture<\/strong><\/li>\n
            2. Grab one of the corner hold and move it to 196 x 28 pixels<\/li>\n<\/ol>\n

              Lets also center the logo and expand its clickable space by including padding:<\/p>\n

                \n
              1. Choose the Brand Link block<\/strong><\/li>\n
              2. Unveil Design panel<\/strong> > Spacing<\/strong><\/li>\n
              3. Incorporate top and bottom padding<\/strong> of 16 pixels<\/li>\n<\/ol>\n

                Remark:<\/strong> You can swiftly add margin or padding to opposite sides of an element by holding Option <\/strong>(on Mac) or Alt<\/strong> (on Windows), and moving one of the margin<\/strong> or padding<\/strong> regulators.\u00a0<\/p><\/blockquote>\n

                Lets style the Menu connections<\/strong> to make them prominently visible against the black backdrop:\u00a0<\/p>\n

                  \n
                1. Choose a Menu connection<\/strong><\/li>\n
                2. Expand Design panel<\/strong> > Typography<\/strong><\/li>\n
                3. Hit the Color palette <\/strong>and designate the color to white<\/li>\n<\/ol>\n

                  To execute these changes (and subsequent modifications) on all the Menu connections<\/strong>, include the \u201cMenu connection\u201d class to every Menu connection<\/strong> in the Menu Bar<\/strong>:<\/p>\n

                    \n
                  1. Choose the subsequent Menu connection<\/strong> in the Menu Bar<\/strong><\/li>\n
                  2. Enter the Identifier field<\/strong><\/li>\n
                  3. Select \u201cMenu connection\u201d from Current classes<\/strong><\/li>\n
                  4. Redo these stages for the 1 spared Menu connection<\/strong><\/li>\n<\/ol>\n
                    \n
                    <\/div>\n<\/figure>\n

                    <\/p>\n

                    Remark:<\/strong> if you use an improper class on an element, you can always erase the class from the Identifier field<\/strong>, and pick the correct class from the Current classes<\/strong> dropdown. Get more insight into classes.\u00a0<\/p><\/blockquote>\n

                    Let\u2019s grant the Menu connections<\/b> a tad bit more distance between each other by adjusting their margins:<\/p>\n

                      \n
                    • Choose a Menu link<\/strong><\/li>\n
                    • Access the Styling panel<\/strong> > Spacing<\/strong><\/li>\n
                    • Incorporate a 34-pixel padding on the left and right sides<\/li>\n<\/ul>\n

                      Modify the text of every Menu link<\/strong>:\u00a0<\/p>\n

                        \n
                      • Select the initial Menu link<\/strong><\/li>\n
                      • Double-tap on the text for changes (e.g., \u201cProjects\u201d)<\/li>\n<\/ul>\n

                        Follow the above two stages for the remaining Menu links<\/strong> to rename them (e.g., \u201cAbout me\u201d and \u201cSay hi!\u201d).\u00a0<\/p>\n

                        <\/p>\n

                        <\/p>\n

                        You can utilize a combination class to make the third Menu link<\/strong> (e.g., \u201cSay hi!\u201d) more distinctive from the first two.\u00a0<\/p>\n

                        Good to note:<\/strong> A combination class is a distinct class crafted upon another class. This distinct class enables you to enforce style overrides on the original class to form a unique variation. Learn more about combination classes.\u00a0<\/p><\/blockquote>\n

                        Lets include the combination class:<\/p>\n

                          \n
                        • Pick the third Menu link<\/strong> in the Navigation Bar <\/strong>(e.g., \u201cSay hi!\u201d)<\/li>\n
                        • Access the Selector field<\/strong><\/li>\n
                        • Key in a new class (e.g., \u201cButton\u201d) right after the initial class<\/li>\n<\/ul>\n

                          <\/p>\n

                          <\/p>\n

                          Lets design the new \u201cButton\u201d combination class uniquely and alter its background color:\u00a0\u00a0<\/p>\n

                            \n
                          • Unfold the Styling panel<\/strong> > Backgrounds<\/strong><\/li>\n
                          • Tap on the default color sample to open the color selector<\/li>\n
                          • Set the color to white and reduce the opacity to 20<\/li>\n<\/ul>\n

                            Lessen the padding<\/strong> of the button:<\/p>\n

                              \n
                            • Unfold the Style panel<\/strong> > Spacing<\/strong><\/li>\n
                            • Reduce the top and bottom padding<\/strong> to 8 pixels<\/li>\n<\/ul>\n

                              Round the edges of the button:<\/p>\n

                                \n
                              • Unfold the Style panel<\/strong> > Borders<\/strong><\/li>\n
                              • Establish the corner radius<\/strong> to 6 pixels<\/li>\n<\/ul>\n

                                Incorporate top margin <\/strong>to the button:<\/p>\n

                                  \n
                                • Unfold the Style panel<\/strong> > Spacing<\/strong><\/li>\n
                                • Set top margin<\/strong> to 12 pixels<\/li>\n<\/ul>\n

                                  <\/p>\n

                                  <\/p>\n

                                  The combination class you’ve just established \u2014 \u201cMenu link Button\u201d \u2014 is grounded on the \u201cMenu link\u201d class. If you pick any Menu link<\/strong> with just the \u201cMenu link\u201d class assigned, and then apply style adjustments to it, those changes will also affect the \u201cMenu link Button.\u201d\u00a0<\/p>\n

                                  Lets implement this and alter the padding<\/strong> on the \u201cMenu link\u201d base class:\u00a0<\/p>\n

                                    \n
                                  • Choose a Menu link<\/strong><\/li>\n
                                  • Access the Style panel<\/strong> > Spacing<\/strong><\/li>\n
                                  • Reduce the left and right padding<\/strong> to 20 pixels<\/li>\n<\/ul>\n

                                    The \u201cMenu link button\u201d inherits this style change and its left and right padding<\/strong> also becomes 20 pixels.\u00a0<\/p>\n

                                    <\/p>\n

                                    Since the “About me” Menu link<\/strong> is surplus to this design, tap on it and remove it from the Navigation Bar<\/strong>.\u00a0<\/p>\n

                                    Create the Navigation Bar as a Symbol
                                    <\/h2>\n

                                    Once a Symbol<\/strong> is formed, it can be reused countless times in your project.<\/p>\n

                                    Lets convert the Navigation Bar<\/strong> into a Symbol<\/strong> for versatility on multiple pages:<\/p>\n

                                      \n
                                    • Open the Navigator<\/strong> and pick the Navigation Bar<\/strong><\/li>\n
                                    • Access the Symbols panel<\/strong><\/li>\n
                                    • Press Create new Symbol<\/strong><\/li>\n
                                    • Assign a name to the Symbol<\/strong> (e.g., \u201cNavigation\u201d)<\/li>\n<\/ul>\n

                                      <\/p>\n

                                      <\/p>\n

                                      After crafting the \u201cNavigation\u201d Symbol<\/strong> you can modify the Symbol<\/strong>.\u00a0<\/p>\n

                                      In our scenario, there’s no need to edit the Symbol<\/strong>, thus tap \u201cBack to Instance\u201d to go back to the specific instance of the \u201cNavigation\u201d Symbol <\/strong>in the project.<\/p>\n

                                      <\/p>\n

                                      <\/p>\n

                                      Good to remember:<\/strong> You can double-click a Symbol<\/strong> to modify the internal components. When you make a change \u2014 for example, adding new Menu links<\/strong> \u2014 any altered Symbol <\/strong>instance will affect all other instances of that same Symbol<\/strong>. In this instance, every Symbol <\/strong>instance would showcase those new Menu links<\/strong> as well.<\/p><\/blockquote>\n

                                      <\/p>\n

                                      <\/p>\n

                                      Congratulations \u2014 you\u2019ve managed the enhancement of your Navigation Bar!<\/p>\n

                                      <\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Add a styled navigation bar to your homepage and turn it into a Symbol for easy and consistent reuse throughout your project.","protected":false},"author":2,"featured_media":5450,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[306],"tags":[],"class_list":{"0":"post-5449","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-kb","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/5449","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=5449"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/5449\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/5450"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=5449"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=5449"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=5449"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}