{"id":6138,"date":"2024-04-14T14:10:08","date_gmt":"2024-04-14T06:10:08","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=6138"},"modified":"2024-04-14T14:10:08","modified_gmt":"2024-04-14T06:10:08","slug":"establish-a-fixed-navigation-bar","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/establish-a-fixed-navigation-bar\/","title":{"rendered":"Establish a\u2008fixed\u2008navigation bar"},"content":{"rendered":"\n<div class=\"docs_rich-text w-richtext\">\n<p>Typically, you might opt to utilize the fixed placement with a navigation bar. When you desire the navigation bar to remain fixed in place on your screen as you scroll through the page.<\/p>\n<p>To incorporate the fixed positioning to a navigation bar:<\/p>\n<ol>\n<li>Integrate a navigation bar into your project<\/li>\n<li>Choose the primary navigation bar element<\/li>\n<li>Within the <strong>Layout<\/strong> category of the <strong>Styles<\/strong> panel, adjust the <strong>Position<\/strong> to <strong>Fixed<\/strong><\/li>\n<li>Select the predefined position as <strong>Top<\/strong><\/li>\n<li>Pick the <strong>body<\/strong><\/li>\n<li>Include top padding to prevent the navigation bar from overlapping content<\/li>\n<\/ol>\n<p>You have the freedom to select any predefined setting, or manually modify the placement of the navigation bar or any element you wish to position in this manner.<\/p>\n<p>Because any fixed element is taken out of the document flow, it will appear above auto-positioned elements. It might obstruct a portion of your content. In that scenario, you might consider utilizing some padding\/margins on the content that the fixed element is concealing.<\/p>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-center\" data-rt-type=\"video\" data-rt-align=\"center\" data-rt-max-width=\"80%\" data-rt-max-height=\"45%\" data-rt-dimensions=\"640:360\" data-page-url=\"https:\/\/vimeo.com\/228025828\">\n<div><iframe src=\"https:\/\/player.vimeo.com\/video\/228025828\" frameborder scrolling=\"no\"><\/iframe><\/div><figcaption>\u00a0<\/figcaption><\/figure>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Use the fixed position to keep elements pinned to the viewport while you scroll.","protected":false},"author":2,"featured_media":6139,"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":[284],"tags":[],"class_list":{"0":"post-6138","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-layout-design","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6138","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=6138"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6138\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/6139"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=6138"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=6138"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=6138"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}