{"id":26552,"date":"2018-06-29T02:02:39","date_gmt":"2018-06-28T16:02:39","guid":{"rendered":"https:\/\/codemyui.com\/?p=26552"},"modified":"2018-06-29T02:02:39","modified_gmt":"2018-06-28T16:02:39","slug":"simple-sticky-navigation-menu","status":"publish","type":"post","link":"https:\/\/codemyui.com\/simple-sticky-navigation-menu\/","title":{"rendered":"Simple Sticky Navigation Menu"},"content":{"rendered":"

A very simple sticky header<\/a> for your navigation menu designed by Marco Biedermann<\/a>. When you scroll down<\/a> the navigation menu<\/a> gets stuck to the top of the page. <\/p>\n

If you are having trouble with the pen, try the archived copy on GitHub<\/a><\/p>\n

Sticky Navigation Snippet<\/h2>\n

\nSee the Pen Sticky Header on Scroll by Marco Biedermann (@marcobiedermann) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"

A very simple sticky header for your navigation menu designed by Marco Biedermann. When you scroll down the navigation menu gets stuck to the top of the page.<\/p>\nRead More<\/a>","protected":false},"author":1,"featured_media":26553,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1],"tags":[5357,1520705,138009468],"class_list":["post-26552","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-header","tag-navigation-menu","tag-scroll-animation","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/06\/Simple-Sticky-Navigation-Menu.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":291,"url":"https:\/\/codemyui.com\/sticky-header-navigation-menu\/","url_meta":{"origin":26552,"position":0},"title":"Sticky Header Navigation Menu","author":"Hima Vincent","date":"May 21, 2016","format":false,"excerpt":"Sticky header navigation menu for your web projects. When you scroll down with this header menu it sticks itself to the top of the browser. Designed by Michael. If you are having trouble with the pen, try the archived copy on GitHub","rel":"","context":"In \"navigation menu\"","block_context":{"text":"navigation menu","link":"https:\/\/codemyui.com\/tag\/navigation-menu\/"},"img":{"alt_text":"Sticky Header Navigation Menu","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/05\/sticky-header-navigation-menu.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/05\/sticky-header-navigation-menu.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/05\/sticky-header-navigation-menu.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/05\/sticky-header-navigation-menu.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":26777,"url":"https:\/\/codemyui.com\/sticky-sidebar-navigation-on-scroll\/","url_meta":{"origin":26552,"position":1},"title":"Sticky Sidebar Navigation on Scroll","author":"Saijo George","date":"August 21, 2018","format":false,"excerpt":"With this amazing snippet by Chris Coyier you have a sticky sidebar with jump links to the various sections on the page. When you scroll down the page and hit the section with this menu it sticks on the right-hand side till that content block runs out. If you are\u2026","rel":"","context":"In \"navigation menu\"","block_context":{"text":"navigation menu","link":"https:\/\/codemyui.com\/tag\/navigation-menu\/"},"img":{"alt_text":"Sticky Sidebar Navigation on Scroll","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/08\/Sticky-Sidebar-Navigation-on-Scroll.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/08\/Sticky-Sidebar-Navigation-on-Scroll.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/08\/Sticky-Sidebar-Navigation-on-Scroll.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/08\/Sticky-Sidebar-Navigation-on-Scroll.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":26562,"url":"https:\/\/codemyui.com\/hide-header-navigation-on-scroll-down-and-show-on-scroll-up\/","url_meta":{"origin":26552,"position":2},"title":"Hide Header Navigation on Scroll down and Show on Scroll Up","author":"Saijo George","date":"July 4, 2018","format":false,"excerpt":"In this simple code snippet, we see how we can hide the navigation menu when a user scrolls down and reveal it when they try to scroll up. This is a great UX trick to make use of all the available real estate on the screen for your content. This\u2026","rel":"","context":"In \"mobile optimised\"","block_context":{"text":"mobile optimised","link":"https:\/\/codemyui.com\/tag\/mobile-optimised\/"},"img":{"alt_text":"Hide Header Navigation on Scroll down and Show on Scroll Up","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/Hide-Header-Navigation-on-Scroll-down-and-Show-on-Scroll-Up.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/Hide-Header-Navigation-on-Scroll-down-and-Show-on-Scroll-Up.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/Hide-Header-Navigation-on-Scroll-down-and-Show-on-Scroll-Up.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/Hide-Header-Navigation-on-Scroll-down-and-Show-on-Scroll-Up.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":12148,"url":"https:\/\/codemyui.com\/responsive-fullscreen-section-navigation-menu\/","url_meta":{"origin":26552,"position":3},"title":"Responsive Fullscreen Section Navigation Menu","author":"Hima Vincent","date":"February 28, 2017","format":false,"excerpt":"A fullscreen responsive section navigation menu designed by Ettrics. The menu is stuck to the bottom of the page and when you scroll down the menu moves up and sticks to the top. If you are having trouble with the pen, try the archived copy on GitHub Fullscreen Section Navigation\u2026","rel":"","context":"In \"hero section\"","block_context":{"text":"hero section","link":"https:\/\/codemyui.com\/tag\/hero-section\/"},"img":{"alt_text":"Responsive Fullscreen Section Navigation Menu","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/responsive-fullscreen-section-navigation-menu-1.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/responsive-fullscreen-section-navigation-menu-1.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/responsive-fullscreen-section-navigation-menu-1.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/responsive-fullscreen-section-navigation-menu-1.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":126,"url":"https:\/\/codemyui.com\/highlight-sticky-navigation-on-scroll\/","url_meta":{"origin":26552,"position":4},"title":"Highlight Sticky Navigation On Scroll","author":"Hima Vincent","date":"October 21, 2015","format":false,"excerpt":"Highlight your main navigation bar when you scroll down by changing the color. Designed by Ashley Porciuncula. If you are having trouble with the pen, try the archived copy on GitHub","rel":"","context":"In \"navigation menu\"","block_context":{"text":"navigation menu","link":"https:\/\/codemyui.com\/tag\/navigation-menu\/"},"img":{"alt_text":"Highlight Sticky Navigation On Scroll","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/10\/highlight-sticky-navigation-on-scroll.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/10\/highlight-sticky-navigation-on-scroll.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/10\/highlight-sticky-navigation-on-scroll.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/10\/highlight-sticky-navigation-on-scroll.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":200,"url":"https:\/\/codemyui.com\/sticky-navigation-jump-links-on-scroll\/","url_meta":{"origin":26552,"position":5},"title":"Sticky Navigation\u00a0Jump-links\u00a0on Scroll","author":"Hima Vincent","date":"August 6, 2015","format":false,"excerpt":"This allows you to show a sticky navigation menu that acts as a jumplist to various section of your content. It will be a great addition to long form content where users can jump between different sections. This was designed by\u00a0Alex Bergin. If you are having trouble with the pen,\u2026","rel":"","context":"In \"navigation menu\"","block_context":{"text":"navigation menu","link":"https:\/\/codemyui.com\/tag\/navigation-menu\/"},"img":{"alt_text":"Sticky Navigation Jump-links on Scroll","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/08\/sticky-navigation-jump-links-on-scroll.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/08\/sticky-navigation-jump-links-on-scroll.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/08\/sticky-navigation-jump-links-on-scroll.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/08\/sticky-navigation-jump-links-on-scroll.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/26552","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/comments?post=26552"}],"version-history":[{"count":2,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/26552\/revisions"}],"predecessor-version":[{"id":26555,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/26552\/revisions\/26555"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/26553"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=26552"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=26552"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=26552"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}