{"id":20947,"date":"2016-09-04T08:06:54","date_gmt":"2016-09-04T07:06:54","guid":{"rendered":"https:\/\/fifteen-staging.fifteen.dev\/blog\/dissecting-a-website-sticky-navigations\/"},"modified":"2016-09-04T08:06:54","modified_gmt":"2016-09-04T07:06:54","slug":"dissecting-a-website-sticky-navigations","status":"publish","type":"post","link":"https:\/\/www.fifteendesign.co.uk\/blog\/dissecting-a-website-sticky-navigations\/","title":{"rendered":"Dissecting a Website: Sticky Navigations"},"content":{"rendered":"

Navigations are the key to a user’s journey through a website. The best outcome you can possibly receive from a website that you have created is the user having a great experience. This is vital. That is why many designers and developers consider the navigation to be the most critical component of a website.<\/p>\n

When designing the navigation for your site, the designer has multiple options. You can have a standard navigation, lying horizontally across the top of the page. Alternatively, you have a vertical navigation, with the choice of which side you have it being entirely up to you. However, there is another option\u2026<\/p>\n

A sticky navigation, or a \u2018fixed\u2019 nav, is just like a standard nav, but with one major difference. With a normal navigation, when you scroll, \u00ad\u00ad\u00ad\u00ad\u00adthe menu stays at the top of the page. With a sticky navigation, when you scroll your way down the site, the menu stays with you. This saves the user from pointlessly scrolling back to the top of the page to go to a different area of the site. With the fixed navigation, they can view a page and not have to go back to the beginning.<\/p>\n

Here are some examples:<\/p>\n

\"stickynavexamples\"<\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

The left image shows the top of a page with a standard navigation, with the second image showing a site with a standard navigation after it has been scrolled down. As you can see, the navigation is not there and is still at the top of the page. However, the right-hand image shows a site that has a sticky navigation. In contrast to the other two images, when you scroll through the site, the navigation remains with you.<\/p>\n

\"Sticky<\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

Sticky navigations have produced good results since their creation, with research showing that they are 22% quicker to navigate, compared to standard top-of-the-page menus. Although they couldn\u2019t state a reason why, 100% (yes, 100%) of people found they preferred the fixed navigation.<\/p>\n

Here at Fifteen, we love a sticky navigation. As well as using one on our own site, we have used this style menu on Bodychef\u2019s brand new site, Tracking My Car\u2019s project, Elsie\u2019s Attic\u2019s new e-commerce site and of course, the Fifteen site itself! Go to www.fifteendesign.co.uk\/blog<\/a> to read more about these sites going live and to see what they said themselves about their project!<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"Navigations are the key to a user’s journey through a website. The best outcome you can possibly receive from a website that you have created is the user having a great experience. This is vital. That is why many designers and developers consider the navigation to be the most critical component of a website. When […]","protected":false},"author":84,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[],"tags":[],"class_list":["post-20947","post","type-post","status-publish","format-standard","hentry"],"acf":[],"yoast_head":"\nDissecting a Website: Sticky Navigations - Fifteen<\/title>\n<meta name=\"description\" content=\"Navigations are the key to a user's journey through a website. A sticky navigation, is just like a standard nav, but with one major difference.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.fifteendesign.co.uk\/blog\/dissecting-a-website-sticky-navigations\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Dissecting a Website: Sticky Navigations\" \/>\n<meta property=\"og:description\" content=\"Navigations are the key to a user's journey through a website. A sticky navigation, is just like a standard nav, but with one major difference.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.fifteendesign.co.uk\/blog\/dissecting-a-website-sticky-navigations\/\" \/>\n<meta property=\"og:site_name\" content=\"Fifteen\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/FifteenDesign\" \/>\n<meta property=\"article:published_time\" content=\"2016-09-04T07:06:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.fifteendesign.co.uk\/wp-content\/uploads\/2016\/09\/stickynavexamples.jpg\" \/>\n<meta name=\"author\" content=\"Kyle Lindsay\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kyle Lindsay\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Dissecting a Website: Sticky Navigations - Fifteen","description":"Navigations are the key to a user's journey through a website. A sticky navigation, is just like a standard nav, but with one major difference.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.fifteendesign.co.uk\/blog\/dissecting-a-website-sticky-navigations\/","og_locale":"en_GB","og_type":"article","og_title":"Dissecting a Website: Sticky Navigations","og_description":"Navigations are the key to a user's journey through a website. A sticky navigation, is just like a standard nav, but with one major difference.","og_url":"https:\/\/www.fifteendesign.co.uk\/blog\/dissecting-a-website-sticky-navigations\/","og_site_name":"Fifteen","article_publisher":"https:\/\/www.facebook.com\/FifteenDesign","article_published_time":"2016-09-04T07:06:54+00:00","og_image":[{"url":"https:\/\/www.fifteendesign.co.uk\/wp-content\/uploads\/2016\/09\/stickynavexamples.jpg","type":"","width":"","height":""}],"author":"Kyle Lindsay","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kyle Lindsay","Estimated reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.fifteendesign.co.uk\/blog\/dissecting-a-website-sticky-navigations\/#article","isPartOf":{"@id":"https:\/\/www.fifteendesign.co.uk\/blog\/dissecting-a-website-sticky-navigations\/"},"author":{"name":"Kyle Lindsay","@id":"https:\/\/www.fifteendesign.co.uk\/#\/schema\/person\/7ed95bc67f5f57b732bf2a5870cb4714"},"headline":"Dissecting a Website: Sticky Navigations","datePublished":"2016-09-04T07:06:54+00:00","mainEntityOfPage":{"@id":"https:\/\/www.fifteendesign.co.uk\/blog\/dissecting-a-website-sticky-navigations\/"},"wordCount":417,"commentCount":0,"image":{"@id":"https:\/\/www.fifteendesign.co.uk\/blog\/dissecting-a-website-sticky-navigations\/#primaryimage"},"thumbnailUrl":"https:\/\/www.fifteendesign.co.uk\/wp-content\/uploads\/2016\/09\/stickynavexamples.jpg","inLanguage":"en-GB"},{"@type":"WebPage","@id":"https:\/\/www.fifteendesign.co.uk\/blog\/dissecting-a-website-sticky-navigations\/","url":"https:\/\/www.fifteendesign.co.uk\/blog\/dissecting-a-website-sticky-navigations\/","name":"Dissecting a Website: Sticky Navigations - Fifteen","isPartOf":{"@id":"https:\/\/www.fifteendesign.co.uk\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.fifteendesign.co.uk\/blog\/dissecting-a-website-sticky-navigations\/#primaryimage"},"image":{"@id":"https:\/\/www.fifteendesign.co.uk\/blog\/dissecting-a-website-sticky-navigations\/#primaryimage"},"thumbnailUrl":"https:\/\/www.fifteendesign.co.uk\/wp-content\/uploads\/2016\/09\/stickynavexamples.jpg","datePublished":"2016-09-04T07:06:54+00:00","author":{"@id":"https:\/\/www.fifteendesign.co.uk\/#\/schema\/person\/7ed95bc67f5f57b732bf2a5870cb4714"},"description":"Navigations are the key to a user's journey through a website. A sticky navigation, is just like a standard nav, but with one major difference.","breadcrumb":{"@id":"https:\/\/www.fifteendesign.co.uk\/blog\/dissecting-a-website-sticky-navigations\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.fifteendesign.co.uk\/blog\/dissecting-a-website-sticky-navigations\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.fifteendesign.co.uk\/blog\/dissecting-a-website-sticky-navigations\/#primaryimage","url":"https:\/\/www.fifteendesign.co.uk\/wp-content\/uploads\/2016\/09\/stickynavexamples.jpg","contentUrl":"https:\/\/www.fifteendesign.co.uk\/wp-content\/uploads\/2016\/09\/stickynavexamples.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.fifteendesign.co.uk\/blog\/dissecting-a-website-sticky-navigations\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.fifteendesign.co.uk\/"},{"@type":"ListItem","position":2,"name":"Dissecting a Website: Sticky Navigations"}]},{"@type":"WebSite","@id":"https:\/\/www.fifteendesign.co.uk\/#website","url":"https:\/\/www.fifteendesign.co.uk\/","name":"Fifteen","description":"Creative. Digital. Marketing.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.fifteendesign.co.uk\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Person","@id":"https:\/\/www.fifteendesign.co.uk\/#\/schema\/person\/7ed95bc67f5f57b732bf2a5870cb4714","name":"Kyle Lindsay","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/secure.gravatar.com\/avatar\/5ff545c843da22e360dda49e4548bb9eed66d8b0c5f8b1a89afb5ee6ba4d44f3?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5ff545c843da22e360dda49e4548bb9eed66d8b0c5f8b1a89afb5ee6ba4d44f3?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5ff545c843da22e360dda49e4548bb9eed66d8b0c5f8b1a89afb5ee6ba4d44f3?s=96&d=mm&r=g","caption":"Kyle Lindsay"},"url":"https:\/\/www.fifteendesign.co.uk\/blog\/author\/kyle\/"}]}},"_links":{"self":[{"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/posts\/20947","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/users\/84"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/comments?post=20947"}],"version-history":[{"count":0,"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/posts\/20947\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/media?parent=20947"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/categories?post=20947"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/tags?post=20947"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}