{"id":6701,"date":"2024-04-14T18:11:54","date_gmt":"2024-04-14T10:11:54","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=6701"},"modified":"2024-04-14T18:11:54","modified_gmt":"2024-04-14T10:11:54","slug":"menu","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/menu\/","title":{"rendered":"Menu"},"content":{"rendered":"\n<div class=\"docs_rich-text w-richtext\">\n<p id=\"\">Covered in this instructional session:<\/p>\n<ul id=\"\">\n<li id=\"\">Include a menu<\/li>\n<li id=\"\">Customize a menu<\/li>\n<li id=\"\">Comprehend the dropdown button in a menu<\/li>\n<li id=\"\">Utilize a menu on multiple pages<\/li>\n<li id=\"\">Affix the menu to the top of a page<\/li>\n<li id=\"\">Incorporate a dropdown into the menu<\/li>\n<\/ul>\n<h2 id=\"\">Include a menu<\/h2>\n<p id=\"\">To insert a menu:<\/p>\n<ol id=\"\">\n<li id=\"\">Launch the <strong id=\"\">Insert panel<\/strong> &gt; <strong id=\"\">Elements<\/strong><\/li>\n<li id=\"\">Drag a <strong id=\"\">Menu<\/strong> from the <strong id=\"\">Advanced<\/strong> category onto the Webflow canvas<\/li>\n<\/ol>\n<p id=\"\">You have the flexibility to position the menu wherever you wish on your website \u2014 there is no definitive right or wrong way to do this. Since the menu is self-contained, you can relocate it as needed.<\/p>\n<p id=\"\">Your menu functions as a container that centrally aligns a collection of elements on the page.<\/p>\n<ul id=\"\">\n<li><strong id=\"\">Brand:<\/strong> The brand placeholder is a link block situated on the left of the menu. Here, you can insert a logo, text, or any other brand symbol.<\/li>\n<li><strong id=\"\">Navigation menu:<\/strong> The navigation menu is positioned on the right side of the menu. It serves as a parent element encompassing all the navigation links.<\/li>\n<li><strong id=\"\">Navigation links:<\/strong> These are text links with predefined padding and other styles. Typically, they are linked to various pages or sections of your website.<\/li>\n<li id=\"\"><strong id=\"\">Dropdown button: Initially hidden in desktop view, the dropdown button becomes visible at the tablet breakpoint and below. It grants access to the navigation menu (and the navigation links) when horizontal space is limited, such as on a mobile device.<\/strong><strong id=\"\"> Discover more about the menu dropdown button<\/strong><strong id=\"\">.<\/strong><\/li>\n<\/ul>\n<h3 id=\"\">Configuring the brand logo<\/h3>\n<p id=\"\">Let\u2019s incorporate a logo in our menu.\u00a0<\/p>\n<p id=\"\">Navigate to the Assets panel in the left sidebar of the <strong id=\"\">Designer<\/strong> area where you can upload and manage assets. Click the \u201c<strong id=\"\">cloud<\/strong>\u201d icon in the top right corner and select the file(s) to upload. You can then drag your logo image into the <strong id=\"\">Brand link<\/strong>.<\/p>\n<figure id=\"\" class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1502px\">\n<div id=\"\"><img decoding=\"async\" alt=\"The Assets panel is open from the left side of the Designer.\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94a5d8e472b88c7da8bd8_62b3880c3ea4ee1be8d6d609_uksrm1jw13alujhwbkw10tc_dpssyggj5ctzldoyzjrddowvrg95qru0tp_jhgskzh_kamkxktxz2ux8mqws_liuu9qoqqxvgdxrumnt5ntqxxmdwa8_sbafswnfgn2t3cnjivftjdd1ts_16g.png\" width=\"auto\" height=\"auto\" loading=\"auto\" id=\"\" title=\"64b94a5d8e472b88c7da8bd8_62b3880c3ea4ee1be8d6d609_uksrm1jw13alujhwbkw10tc_dpssyggj5ctzldoyzjrddowvrg95qru0tp_jhgskzh_kamkxktxz2ux8mqws_liuu9qoqqxvgdxrumnt5ntqxxmdwa8_sbafswnfgn2t3cnjivftjdd1ts_16g\"><\/div>\n<\/figure>\n<h3 id=\"\">Linking the brand logo to the homepage<\/h3>\n<p id=\"\">It\u2019s conventional for a brand image or logo to link back to the homepage. To achieve this:<\/p>\n<ol id=\"\">\n<li id=\"\">Choose the <strong id=\"\">Brand link<\/strong><\/li>\n<li id=\"\">Access the <strong id=\"\">Element settings panel<\/strong> &gt; <strong id=\"\">Link settings<\/strong><\/li>\n<li id=\"\">Opt for <strong id=\"\">Page<\/strong> as the link type<\/li>\n<li id=\"\">Expand the <strong id=\"\">Page <\/strong>dropdown and select \u201cHome<strong id=\"\">\u201d<\/strong><\/li>\n<\/ol>\n<p id=\"\">Additionally, you should assign a role and aria-label to the logo link to explain the link\u2019s purpose to website visitors who navigate using a screen reader or other assistive technologies:\u00a0<\/p>\n<ol id=\"\">\n<li>Select the <strong id=\"\">Brand link\u00a0<\/strong><\/li>\n<li>Access the <strong id=\"\">Element settings panel<\/strong> &gt; <strong id=\"\">Custom attributes<\/strong><\/li>\n<li>Click the \u201c<strong id=\"\">plus<\/strong>\u201d icon<\/li>\n<li>Input \u201crole\u201d in the <strong id=\"\">Name<\/strong> field and \u201cnavigation\u201d in the <strong id=\"\">Value<\/strong> field<\/li>\n<li>Click the \u201c<strong id=\"\">plus<\/strong>\u201d icon\u00a0<\/li>\n<li>Enter \u201caria-label\u201d in the <strong id=\"\">Name<\/strong> field and a descriptive value for the logo link\u2019s purpose (e.g., \u201cBack to homepage,\u201d \u201cBack to main,\u201d etc.) in the <strong id=\"\">Value<\/strong> field<\/li>\n<\/ol>\n<p id=\"\">Discover more about creating custom attributes.<\/p>\n<h3 id=\"\">Incorporating navigation links<\/h3>\n<p id=\"\">The secondary element of the menu is the navigation menu. This element houses our navigation links. By default, the menu contains 3 navigation link placeholders that are modifiable, removable, or addable.<\/p>\n<p id=\"\">To introduce additional navigation links:<\/p>\n<ol id=\"\">\n<li id=\"\">Select any element within the <strong id=\"\">Menu<\/strong><\/li>\n<li id=\"\">Access the <strong id=\"\">Element settings panel<\/strong> &gt; <strong id=\"\">Menu settings<\/strong><\/li>\n<li id=\"\">Click <strong id=\"\">Add link<\/strong><\/li>\n<\/ol>\n<figure id=\"\" class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1501px\">\n<div id=\"\"><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94a5d8e472b88c7da8bd5_62b3880cde30cdad94905d12_o0lpiuyqneqps6un-_lbprmm5-jxvna8extreccgwhedokfcpqorqn1yqgrpuvsnn3qvq3legoceaqtvu3mk6fw1pq1wqg4trfiblnqtpicdsik3c1ph2ty6jg7olwx8fw2_mvubbesvmyb4ya.png\" width=\"auto\" height=\"auto\" loading=\"auto\" alt=\"The Add link button is highlighted in the Menu settings.\" id=\"\" title=\"64b94a5d8e472b88c7da8bd5_62b3880cde30cdad94905d12_o0lpiuyqneqps6un-_lbprmm5-jxvna8extreccgwhedokfcpqorqn1yqgrpuvsnn3qvq3legoceaqtvu3mk6fw1pq1wqg4trfiblnqtpicdsik3c1ph2ty6jg7olwx8fw2_mvubbesvmyb4ya\"><\/div>\n<\/figure>\n<p id=\"\">Another method to insert navigation links is to duplicate and paste a navigation link that already has a class assigned to it. This is a fantastic time-saving approach when styling multiple navigation links. Follow these steps:<\/p>\n<ol id=\"\">\n<li id=\"\">Clear all but one navigation link<\/li>\n<li id=\"\">Access the <strong id=\"\">Style panel<\/strong> &gt; <strong id=\"\">Selector field <\/strong>and attach a class to the navigation link<\/li>\n<li id=\"\">Duplicate and paste the navigation link as needed<\/li>\n<\/ol>\n<p id=\"\">Upon duplicating this navigation link, the class is automatically applied to each new instance pasted. You can modify the text inside the navigation link by double-clicking it.<\/p>\n<figure id=\"\" class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1501px\">\n<div id=\"\"><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94a5d8e472b88c7da8bb8_62b3880cc380a530d9d56524_sj0nepyyfojtamzj0iemzfjmi3t87g-oaqsiby50xi3mu0vsctlmjvlckzcugqxsedz1sdvp6kq6tfb78qtnlt0lv4jwlaza5ujhypkyp56k58buptii8r66rfq0jfzqy9hzlultk8yjxzvs4q.png\" width=\"auto\" height=\"auto\" loading=\"auto\" alt=\"The Nav link class is shown in the Selector field of the Style panel.\" id=\"\" title=\"64b94a5d8e472b88c7da8bb8_62b3880cc380a530d9d56524_sj0nepyyfojtamzj0iemzfjmi3t87g-oaqsiby50xi3mu0vsctlmjvlckzcugqxsedz1sdvp6kq6tfb78qtnlt0lv4jwlaza5ujhypkyp56k58buptii8r66rfq0jfzqy9hzlultk8yjxzvs4q\"><\/div>\n<\/figure>\n<h3 id=\"\">Linking navigation links<\/h3>\n<p id=\"\">To attach each navigation link to a distinct destination:<\/p>\n<ol id=\"\">\n<li id=\"\">Choose the <strong id=\"\">navigation link<\/strong><\/li>\n<li id=\"\">Access the <strong id=\"\">Element settings panel<\/strong> &gt; <strong id=\"\">Link settings<\/strong><\/li>\n<li id=\"\">Pick a link type<\/li>\n<\/ol>\n<figure id=\"\" class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1500px\">\n<div id=\"\"><img decoding=\"async\" alt=\"The Link settings section is displayed.\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b94a5d8e472b88c7da8bc3_62b3880cb7293668d7eb9379_bzofrb9w4tvjnbk44k7krnhvxentjn4b0c12eouc5n-adfhm28tsa1vynq4bmnu07jv2frs2twqepeueheevmgss2kz4dnbgsej7foss1mzxxkwryt3leelojvkvmztxq7e9t_n0t25vit7lqa\" width=\"auto\" height=\"auto\" loading=\"auto\" id=\"\" title=\"64b94a5d8e472b88c7da8bc3_62b3880cb7293668d7eb9379_bzofrb9w4tvjnbk44k7krnhvxentjn4b0c12eouc5n-adfhm28tsa1vynq4bmnu07jv2frs2twqepeueheevmgss2kz4dnbgsej7foss1mzxxkwryt3leelojvkvmztxq7e9t_n0t25vit7lqa\"><\/div>\n<\/figure>\n<h6 id=\"\"><strong id=\"\">Important: <\/strong>The File link type is only accessible on select premium Workspace or Site plans.\u00a0<\/h6>\n<h2 id=\"\">Design a top navigation bar<\/h2>\n<figure id=\"\" class=\"w-richtext-figure-type-video w-richtext-align-fullwidth\" data-rt-type=\"video\" data-rt-align=\"fullwidth\" data-rt-max-width=\"\" data-rt-max-height=\"56.206088992974244%\" data-rt-dimensions=\"854:480\" data-page-url=\"https:\/\/youtu.be\/z5cT0y6dsy0\">\n<div id=\"\"><iframe allowfullscreen frameborder scrolling=\"no\" src=\"https:\/\/www.youtube.com\/embed\/z5cT0y6dsy0\"><\/iframe><\/div>\n<\/figure>\n<p id=\"\">The top navigation bar component provides ample flexibility for customization.<\/p>\n<p id=\"\">Within this segment, we&#8217;ll emphasize three key aspects that empower us in managing its appearance:<\/p>\n<ul id=\"\">\n<li id=\"\">Dimensions of the navigation bar and menu<\/li>\n<li id=\"\">Customizing navigation links<\/li>\n<li id=\"\">States of navigation links<\/li>\n<\/ul>\n<h3 id=\"\">Dimensions of the navigation bar and menu<\/h3>\n<p id=\"\">The navigation bar lacks predefined measurements for width or height. These parameters can be altered within the Styling panel.<\/p>\n<h4 id=\"\">Navigation bar width<\/h4>\n<p id=\"\">Placing the navigation bar within body, section, or another element extends its width to match the encompassing element. To restrict the horizontal space occupied by the navigation bar, set a <strong id=\"\">width<\/strong> directly or adjust the width of the parent element while centering the navigation bar using <strong id=\"\">auto margin<\/strong>. Introducing <strong id=\"\">margin<\/strong> to the navigation bar (coupled with a <strong id=\"\">max width<\/strong> or <strong id=\"\">auto width<\/strong>) alters its positioning in relation to neighboring elements.<\/p>\n<h4 id=\"\">Navigation bar height<\/h4>\n<p id=\"\">The height of the navigation bar corresponds to its contents \u2014 either the brand logo&#8217;s height or the navigation links&#8217; height. Modifications to the navigation bar&#8217;s height can be made by:<\/p>\n<ul id=\"\">\n<li id=\"\">Assigning a <strong id=\"\">height<\/strong> value to the navigation bar<\/li>\n<li id=\"\">Incorporating top and bottom <strong id=\"\">padding<\/strong> to the navigation bar itself<\/li>\n<li id=\"\">Incorporating top and bottom <strong id=\"\">padding<\/strong> to the elements within the navigation bar<\/li>\n<\/ul>\n<p id=\"\">Adjusting padding on navigation links by modifying the top and bottom padding properties. The sizing of links and the navigation bar adapts accordingly. Introducing margin achieves a similar effect.<\/p>\n<p id=\"\">Alternatively, modify the navigation bar&#8217;s padding for consistent adjustments. Augmenting padding increases the height by inserting additional space between the navigation bar and the container housing its elements.<\/p>\n<h6 id=\"\"><strong id=\"\">Handy tip:<\/strong> For simultaneous adjustments to margin or padding on corresponding sides of an element, utilize <strong id=\"\">Option<\/strong> + Drag (Mac) or <strong id=\"\">Alt<\/strong> + Drag (Windows). Learn more about margin and padding.<\/h6>\n<h4 id=\"\">Menu height in navigation bar<\/h4>\n<p id=\"\">Similar modifications can be applied to the dropdown menu that emerges upon selecting the navigation menu on smaller breakpoints. Access the dropdown menu by opting for the navigation bar in tablet view and selecting <strong id=\"\">Menu<\/strong> &gt; <strong id=\"\">Show<\/strong> within the <strong id=\"\">Element settings panel<\/strong>.<\/p>\n<p id=\"\">Adjusting the height of navigation links on touch-enabled devices ensures adequate tap target size for fingertip interactions. Explore further on the navigation bar&#8217;s menu button.<\/p>\n<h3 id=\"\">Customizing navigation links<\/h3>\n<p id=\"\">Utilizing classes simplifies the customization process. Classes save styling details applicable to numerous elements site-wide. Upon commencing styling, a class is automatically generated and applied to the selected element, preserving all style adjustments. Alternatively, create a class manually beforehand \u2014 without applying styles \u2014 by typing a class name into the <strong id=\"\">Selector field<\/strong> within the <strong id=\"\">Style panel<\/strong>.<\/p>\n<figure id=\"\" class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1501px\">\n<div id=\"\"><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b94a5d8e472b88c7da8bb8_62b3880cc380a530d9d56524_sj0nepyyfojtamzj0iemzfjmi3t87g-oaqsiby50xi3mu0vsctlmjvlckzcugqxsedz1sdvp6kq6tfb78qtnlt0lv4jwlaza5ujhypkyp56k58buptii8r66rfq0jfzqy9hzlultk8yjxzvs4q\" width=\"auto\" height=\"auto\" loading=\"auto\" alt=\"The Nav link class is displayed in the Selector field of the Style panel.\" id=\"\" title=\"64b94a5d8e472b88c7da8bb8_62b3880cc380a530d9d56524_sj0nepyyfojtamzj0iemzfjmi3t87g-oaqsiby50xi3mu0vsctlmjvlckzcugqxsedz1sdvp6kq6tfb78qtnlt0lv4jwlaza5ujhypkyp56k58buptii8r66rfq0jfzqy9hzlultk8yjxzvs4q\"><\/div>\n<\/figure>\n<p id=\"\">Access the <strong id=\"\">Selector field<\/strong> through three methods:<\/p>\n<ul id=\"\">\n<li id=\"\">Select the <strong id=\"\">Selector field<\/strong> within the <strong id=\"\">Style panel<\/strong><\/li>\n<li id=\"\">Press <strong id=\"\">Command <\/strong>+ <strong id=\"\">Return <\/strong>(Mac) or <strong id=\"\">Control <\/strong>+<strong id=\"\"> Enter<\/strong> (Windows)<\/li>\n<li id=\"\">Right-click the element and opt for <strong id=\"\">Add class<\/strong> in the context menu<\/li>\n<\/ul>\n<p id=\"\">Applying the same class to all navigation links ensures consistent style modifications across the entire navigation bar.<\/p>\n<h3 id=\"\">States of navigation links<\/h3>\n<p id=\"\">Differentiate interaction states of navigation links through visual cues, such as altering appearances in various states like default and hover states. To access the <strong id=\"\">States<\/strong> menu, select a navigation link, navigate to the <strong id=\"\">Style panel <\/strong>&gt; <strong id=\"\">Selector field<\/strong>, and click the dropdown menu (available if a class is already assigned to the navigation link). Learn more about states.<\/p>\n<p id=\"\">A simple method to indicate a hover state on a navigation link is by changing the color on hover, either the background or text color. Follow these steps to add a background color to a navigation link in the <strong id=\"\">Hover<\/strong> state:<\/p>\n<ol id=\"\">\n<li id=\"\">Access the <strong id=\"\">Style panel<\/strong> &gt; <strong id=\"\">Selector field<\/strong><\/li>\n<li id=\"\">Assign a class to the navigation link if not already applied<\/li>\n<li id=\"\">Open the <strong id=\"\">Selector field<\/strong> dropdown<\/li>\n<li id=\"\">Select <strong id=\"\">Hover<\/strong><\/li>\n<li id=\"\">Navigate to <strong id=\"\">Style panel<\/strong> &gt;<strong id=\"\"> Backgrounds<\/strong> and set the background color by clicking the color swatch<\/li>\n<\/ol>\n<p id=\"\">The defined background color will be visible when a user hovers over the navigation link.<\/p>\n<p id=\"\">Implement the same class across all navigation links to synchronize changes for all links within the navigation bar.<\/p>\n<h2 id=\"\">Unraveling the functionality of the menu button within the navigation bar<\/h2>\n<p id=\"\">The <strong id=\"\">menu button<\/strong> resides within the navigation bar, organizing navigation links when space is limited, typically on mobile devices, also known as a hamburger menu. This element and its functionality are integral components of the navigation bar, configurable in various ways.<\/p>\n<p id=\"\">By default, the navigation menu button appears on tablet breakpoints and below. During preview mode, observe the menu within the navigation bar upon switching to these devices. Clicking the menu button enables expansion of the navigation menu. Clicking theThe menu toggle once again collapses the navigation menu.<\/p>\n<p id=\"\">Within the desktop breakpoint, you&#8217;ll observe that the navigation links are nested inside the navigation menu element. This specific navigation menu element functions the same way, displaying navigation links in a vertical format when the menu toggle is activated on smaller breakpoints.<\/p>\n<h3 id=\"\">Initiate the menu within the Designer<\/h3>\n<p id=\"\">To reveal the navigation menu within the Designer, follow these steps:<\/p>\n<ol id=\"\">\n<li id=\"\">Choose the <strong id=\"\">Navbar<\/strong> or any element contained within it<\/li>\n<li id=\"\">Access <strong id=\"\">Element settings panel <\/strong>&gt; <strong id=\"\">Navbar settings<\/strong><\/li>\n<li id=\"\">Select <strong id=\"\">Menu <\/strong>&gt; <strong id=\"\">Show<\/strong><\/li>\n<\/ol>\n<p id=\"\">The Designer will automatically switch to the tablet breakpoint to unveil the navigation menu.<\/p>\n<figure id=\"\" class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1501px\">\n<div id=\"\"><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b948b2dfa61522c5344eb6_62742286a03eb221691fcef8_jli5ckl-ehqt-dz8q34y1s4xwhf7zt6bzrppkslhaujj9vduw7ttsyo6lu30py-g0kle6en_zax7ibjnkhk9tubypmb-yivfbdws6pmnexlvm_zjhmgyd0r0tjm9mie9eijdbcpbhijnytep2q.png\" width=\"auto\" height=\"auto\" loading=\"auto\" alt=\"The Menu Show\/Hide options are highlighted in the Navbar settings.\" id=\"\" title=\"64b948b2dfa61522c5344eb6_62742286a03eb221691fcef8_jli5ckl-ehqt-dz8q34y1s4xwhf7zt6bzrppkslhaujj9vduw7ttsyo6lu30py-g0kle6en_zax7ibjnkhk9tubypmb-yivfbdws6pmnexlvm_zjhmgyd0r0tjm9mie9eijdbcpbhijnytep2q\"><\/div>\n<\/figure>\n<h3 id=\"\">Modify button visibility for distinct breakpoints<\/h3>\n<p id=\"\">Initially, the navbar menu button is visible within the tablet breakpoint, but you can alter this behavior to make the button visible on all breakpoints or none at all:<\/p>\n<ol id=\"\">\n<li id=\"\">Click on the <strong id=\"\">Navbar<\/strong> or any contained element<\/li>\n<li id=\"\">Access <strong id=\"\">Element settings panel<\/strong> &gt;<strong id=\"\"> Navbar settings<\/strong><\/li>\n<li id=\"\">Utilize the device options slider to determine when the <strong id=\"\">menu button<\/strong> is initially displayed<\/li>\n<\/ol>\n<figure id=\"\" class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1501px\">\n<div id=\"\"><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94a5d8e472b88c7da8bc7_62abaae1f7da336594a5fcd8_ysruimwx_l0rt3cwe2rshgrxf-mjpyslwaag2qlo90rj4te_3ktxnmjgk_tkzknq9obvajcyfimljav_slzmzot8cafgrugc8eme3iqkhgdmd6ubqhg0aimvpk7mo53hnlphntgqn6hoj_bp9a.png\" width=\"auto\" height=\"auto\" loading=\"auto\" alt=\"The device options slider is highlighted in the Navbar settings.\" id=\"\" title=\"64b94a5d8e472b88c7da8bc7_62abaae1f7da336594a5fcd8_ysruimwx_l0rt3cwe2rshgrxf-mjpyslwaag2qlo90rj4te_3ktxnmjgk_tkzknq9obvajcyfimljav_slzmzot8cafgrugc8eme3iqkhgdmd6ubqhg0aimvpk7mo53hnlphntgqn6hoj_bp9a\"><\/div>\n<\/figure>\n<h2 id=\"\">Reutilize a navbar across multiple pages<\/h2>\n<p id=\"\">Transforming a navbar into a component is advantageous as it allows you to use the same navbar design across various pages. By converting the navbar into a component, you can efficiently reuse and modify all instances of the navbar.<\/p>\n<p id=\"\">To create your navbar component:<\/p>\n<ol id=\"\">\n<li>Select the <strong id=\"\">Navbar<\/strong> on the canvas<\/li>\n<li>Right-click on the <strong id=\"\">Navbar<\/strong> and select <strong id=\"\">Create component<\/strong><\/li>\n<li>Assign a name to the component and click \u201c<strong id=\"\">Create<\/strong>\u201d<\/li>\n<\/ol>\n<p id=\"\">Once the component is established, you will be directed to the editing mode for the primary component. Any alterations made to the main component will automatically reflect across all instances of that component. To customize the main component, double-click on any component instance. Find more information about components.<\/p>\n<h3 id=\"\">Reusing the navbar design<\/h3>\n<p id=\"\">Given that our navbar now exists as a component, it becomes feasible to reuse the navbar design on any section of our site.<\/p>\n<p id=\"\">Initially, access the Components panel, then drag and drop the navbar component onto any page within your site. Similar to other elements, you can position the component directly on the canvas or within the Navigator for precise placement.<\/p>\n<p id=\"\">Upon selecting an instance of a component, the component will be highlighted and displayed in green. Navigate to the <strong id=\"\">Components panel<\/strong> to track the total count of times the navbar component has been utilized within your website.<\/p>\n<h2 id=\"\">Affixing the navbar to the top of a page<\/h2>\n<p id=\"\">The first step is to confirm that the navbar is a direct child of the body element. This approach ensures that the navbar stays fixed at the top while scrolling. Sticky positioning enables the navbar to remain fixed at the top as other content scrolls, and when you scroll back to the top, the navbar reverts to its original position at the top of the page.<\/p>\n<p id=\"\">To implement sticky positioning for the navbar:<\/p>\n<ol id=\"\">\n<li id=\"\">Choose the <strong id=\"\">Navbar<\/strong><\/li>\n<li id=\"\">Access <strong id=\"\">Style panel<\/strong> &gt; <strong id=\"\">Position<\/strong><\/li>\n<li id=\"\">Opt for<strong id=\"\"> sticky <\/strong>from the <strong id=\"\">position <\/strong>dropdown<\/li>\n<li id=\"\">Specify a top value of 0 pixels to maintain the fixed positioning of the navbar at the top during scrolling<\/li>\n<li id=\"\">Incorporate a higher <strong id=\"\">z-index<\/strong> value (e.g., 2147483647, commonly recognized as the highest z-index value supported by most browsers)<\/li>\n<\/ol>\n<figure id=\"\" class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1501px\">\n<div id=\"\"><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94a5d8e472b88c7da8bbf_62b388793ea4ee1be6d6f19e_em7xoqnjn_tzomsdrdmhe99kkrc61wwwrmhvqxxzhg9t1enwzgsrej1kobd-qlbbohhym4mvhrfbspja_azucvtm2jtunugn7aka9rsy2rsktq9opamz-vu4thsqnf24y8vmhpridnuvl8db4w.png\" width=\"auto\" height=\"auto\" loading=\"auto\" alt=\"The sticky position is highlighted in the position dropdown menu.\" id=\"\" title=\"64b94a5d8e472b88c7da8bbf_62b388793ea4ee1be6d6f19e_em7xoqnjn_tzomsdrdmhe99kkrc61wwwrmhvqxxzhg9t1enwzgsrej1kobd-qlbbohhym4mvhrfbspja_azucvtm2jtunugn7aka9rsy2rsktq9opamz-vu4thsqnf24y8vmhpridnuvl8db4w\"><\/div>\n<\/figure>\n<blockquote id=\"\"><p><strong id=\"\">Note:<\/strong> Ensure at least one side of the sticky element has a specified value to ensure proper functionality of the sticky positioning.<\/p><\/blockquote>\n<figure id=\"\" class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1501px\">\n<div id=\"\"><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94a5d8e472b88c7da8bd2_62b388792a56347e4c17f94d_zgs-jzndfexqv62zpwg7bakza8tl_sw1q9pu6n4v5ib4aoehjfkqrvif5hhit28i2z6znp7gxbb8j1o8xx8hbbksm5fhrfzvihnnml4cw_urxdsttlo9jepb0xfvxq2w_vxhopmz43ncf2l7ww.png\" width=\"auto\" height=\"auto\" loading=\"auto\" alt=\"The position is set to sticky and the top value is set to zero pixels in the Position section.\" id=\"\" title=\"64b94a5d8e472b88c7da8bd2_62b388792a56347e4c17f94d_zgs-jzndfexqv62zpwg7bakza8tl_sw1q9pu6n4v5ib4aoehjfkqrvif5hhit28i2z6znp7gxbb8j1o8xx8hbbksm5fhrfzvihnnml4cw_urxdsttlo9jepb0xfvxq2w_vxhopmz43ncf2l7ww\"><\/div>\n<\/figure>\n<h3 id=\"\">Differentiate between position fixed and sticky<\/h3>\n<p id=\"\">Position fixed removes the element from the document flow, causing the navbar to hover above the entire page. This behavior is undesirable when the navbar remains in its original position since it may overlap other elements. The aim is for the navbar to remain fixed and above other elements only during scrolling.<\/p>\n<p id=\"\">Conversely, position sticky retains the element within the document flow unless the element&#8217;s initial position scrolls out of view. Consequently, the navbar remains in place without intersecting adjacent elements, transitioning to a fixed position as you scroll past it.<\/p>\n<h3 id=\"\">Resolve issues related to position sticky<\/h3>\n<p id=\"\">Occasionally, position sticky may fail to function even after configuring it to sticky and specifying a distance value for one side of the element. Various reasons might account for this issue:<\/p>\n<ul id=\"\">\n<li>Position sticky may not function properly if the overflow property is set to hidden, scroll,\n<li>Either automatic or manual on any of the ancestors of the element<\/li>\n<li>If any ancestor element has a specified height, the sticky positioning may not function properly<\/li>\n<li>Position: sticky is still unsupported by many browsers \u2014 <a href=\"https:\/\/caniuse.com\/#search=sticky\" id=\"\">check which browsers support position:sticky<\/a><\/li>\n<\/ul>\n<p id=\"\">If the distance value for the position is set on a side unaffected by scrolling, sticky positioning might not work as expected. For instance, setting the distance on the left or right while vertically scrolling through the page will prevent the element from sticking.<\/p>\n<p id=\"\">Similarly, setting a distance to the bottom instead of the top might hinder the sticky functionality, especially if the element is aligned to the top of the parent container as the first element or aligned using flex or grid properties.<\/p>\n<figure id=\"\" class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1501px\">\n<div id=\"\"><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94a5d8e472b88c7da8bcd_62b38879c380a56709d5a1a6_amztegtcnyowzqruqexbz_8j0phgcbl31cbpdjcm5qwbzon0222q0svove2wpdspvmqkgaewuga0fo-djfo1labqvlucfeq8aohn06q8i8-0w-xvrcsnjq6v0keeat5kjwdjxlimpxl0nowk3a.png\" width=\"auto\" height=\"auto\" loading=\"auto\" alt=\"The position is set to sticky and the bottom value is set to 30 pixels in the Position section.\" id=\"\" title=\"64b94a5d8e472b88c7da8bcd_62b38879c380a56709d5a1a6_amztegtcnyowzqruqexbz_8j0phgcbl31cbpdjcm5qwbzon0222q0svove2wpdspvmqkgaewuga0fo-djfo1labqvlucfeq8aohn06q8i8-0w-xvrcsnjq6v0keeat5kjwdjxlimpxl0nowk3a\"><\/div>\n<\/figure>\n<h2 id=\"\">Include a dropdown in the navigation bar<\/h2>\n<p id=\"\">A dropdown menu is a predesigned navigation feature that can be integrated into almost any section of a website. Typically, a dropdown component is found within the navigation bar of a website.<\/p>\n<p id=\"\">In <strong id=\"\">Add panel<\/strong> > <strong id=\"\">Advanced<\/strong>, you can position the dropdown feature in your site as needed.<\/p>\n<h3 id=\"\">Dropdown configuration<\/h3>\n<p id=\"\">The dropdown list remains hidden until the dropdown is activated by a click. To display the list, navigate to the <strong id=\"\">Element settings panel<\/strong> and select <strong id=\"\">Menu<\/strong> > <strong id=\"\">Show<\/strong>. For additional details on the dropdown feature, refer to the source.<\/p>\n<p id=\"\">By default, the dropdown list unveils when the toggle is clicked, but you can modify this behavior to reveal the list when the user <em id=\"\">hovers<\/em> over the toggle by activating the <strong id=\"\">Open menu on hover<\/strong> option. Furthermore, adjust the <strong id=\"\">close delay<\/strong> period (the time it takes for the list to retract after the hover) in milliseconds.<\/p>\n<p id=\"\">That concludes the setup of a navigation bar featuring a dropdown menu. Great job!<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Add, customize, and reuse a navbar.","protected":false},"author":2,"featured_media":6702,"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":[290],"tags":[],"class_list":{"0":"post-6701","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-elements","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6701","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=6701"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6701\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/6702"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=6701"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=6701"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=6701"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}