{"id":6960,"date":"2024-04-14T16:26:07","date_gmt":"2024-04-14T08:26:07","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=6960"},"modified":"2024-04-14T16:26:07","modified_gmt":"2024-04-14T08:26:07","slug":"show-and-conceal-navigation-bar-upon-scrolling","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/show-and-conceal-navigation-bar-upon-scrolling\/","title":{"rendered":"Show and conceal navigation bar upon scrolling"},"content":{"rendered":"\n
\n

Within this tutorial:<\/strong><\/p>\n

    \n
  1. Conceal the navigation bar<\/li>\n
  2. Uncover the navigation bar <\/li>\n<\/ol>\n

    Conceal the navigation bar<\/h2>\n
      \n
    1. Choose the navigation bar and ensure its position is fixed to the viewport<\/li>\n
    2. Within the Interactions panel, opt for Initiating an Animation from the Upon Scrolling Down menu<\/li>\n
    3. Assign a title to it (e.g., \u201chide nav\u201d)<\/li>\n
    4. Click on the addition symbol beside Timed actions<\/li>\n
    5. In the Movement section, alter the Y-axis until the navigation bar is located outside the viewport<\/li>\n
    6. Tailor your easing curve and timing<\/li>\n<\/ol>\n

      Uncover the navigation bar<\/h2>\n
        \n
      1. Pick the navigation bar<\/li>\n
      2. In the Interactions panel, select Initiating an Animation from the Upon Scrolling Up menu<\/li>\n
      3. Assign a title to it (e.g., \u201cshow nav\u201d)<\/li>\n
      4. Click on the addition symbol beside Timed actions<\/li>\n
      5. In the Movement section, bring back the Y-axis to 0<\/li>\n
      6. Customize your easing curve and timing<\/li>\n<\/ol>\n

        Review your progress in the preview.<\/p>\n

        <\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Build a navbar interaction that responds on scroll.","protected":false},"author":2,"featured_media":6961,"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":[301],"tags":[],"class_list":{"0":"post-6960","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-interactions-animations","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6960","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=6960"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6960\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/6961"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=6960"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=6960"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=6960"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}