{"id":8539,"date":"2021-11-01T15:56:40","date_gmt":"2021-11-01T15:56:40","guid":{"rendered":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/?p=8539"},"modified":"2023-07-11T14:14:31","modified_gmt":"2023-07-11T13:14:31","slug":"different-options-for-highlighting-the-navigation-bar","status":"publish","type":"post","link":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/different-options-for-highlighting-the-navigation-bar\/","title":{"rendered":"Different options for highlighting the navigation bar\u00a0"},"content":{"rendered":"<p>When it comes to the user experience, helping your website users find what they need quickly and easily is an important consideration. And as part of this, your navigation bar will need to be well designed and easy to understand. But how can you highlight the navigation bar to show users which page they are on? And what are the benefits of doing this? Well, here at <a href=\"https:\/\/www.pumpkinwebdesign.com\/website-designers-manchester\/\">Pumpkin Web Design Manchester<\/a>, we build websites specifically tailored to the requirements of companies and businesses across Manchester and the North West, including <a href=\"https:\/\/www.pumpkinwebdesign.com\/web-design-blackburn\/\">Blackburn<\/a> and <a href=\"https:\/\/www.pumpkinwebdesign.com\/web-design-chorley\/\">Chorley.<\/a> We provide the perfect <a href=\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/balancing-originality-and-practicality-in-web-design\/\">web design<\/a> solutions for clients in all areas of business and industry. As a result, we have produced this guide to everything you should know about highlighting the navigation bar effectively.<\/p>\n<h2><span style=\"font-weight: 400;\">What are the different options for highlighting the navigation bar?<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Highlighting the navigation bar is a great way to indicate to website users which page they are currently on and using. This is an important design consideration for improving the user experience and ensuring that your potential customers or clients do not become frustrated, or leave your website. But what are the different design options for highlighting the navigation bar? Well there are several including:<\/span><\/p>\n<ul>\n<li><span style=\"font-weight: 400;\">Changing the colour of the link text<\/span><\/li>\n<li><span style=\"font-weight: 400;\">Changing the colour of the navigation menu block<\/span><\/li>\n<li><span style=\"font-weight: 400;\">Adding a coloured line under the link text<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">Changing the colour of the link text<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Ever since the early days of web design, when a link is clicked on the link text would change colour as a visual indicator to the website user, and to provide visual feedback. This principle is still applied across websites to this day, and it can be used effectively as part of your navigation bar design. When a website user clicks on a link from the navigation bar, this link text can change colour. The colour you use should be relevant to your company branding, and to your website design overall. You can opt for a colour that is a lighter or darker shade to the rest of the navigation bar, but it can be more effective to choose a different colour completely.\u00a0<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Changing the colour of the navigation menu block<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Changing the colour of the link text may be one option but it can be easier to overlook than changing the colour of the navigation menu block completely.\u00a0 This is a design option that can really stand out. You should be sure to use a colour change that is clear and obvious to get the most from your design choice.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If your navigation menu is white, or the same colour as the website background, you could instead opt to colour just the navigation menu block that relates to the page. This allows the website users and potential customers and clients to see exactly which page they are on, with just a quick glance.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Adding a coloured line under the link text<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">By adding a colourful line underneath the link text you can draw attention immediately to the individual block on the navigation menu. This can be very effective as a more subtle way to indicate the page that the user is on, without drastically changing the colour scheme.<\/span><\/p>\n<p>For more information or advice, or for high quality, professional web design solutions, get in touch with the experts today, here at <a href=\"https:\/\/www.pumpkinwebdesign.com\/website-designers-manchester\/\">Pumpkin Web Design Manchester.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>When it comes to the user experience, helping your website users find what they need quickly and easily is an important consideration. And as part of this, your navigation bar will need to be well designed and easy to understand. But how can you highlight the navigation bar to show users which page they are [&#8230;]\n","protected":false},"author":2,"featured_media":1950,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[17],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.10 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Different options for highlighting the navigation bar\u00a0 - Pumpkin Web Design Manchester<\/title>\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.pumpkinwebdesign.com\/web-design-manchester\/different-options-for-highlighting-the-navigation-bar\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Different options for highlighting the navigation bar\u00a0 - Pumpkin Web Design Manchester\" \/>\n<meta property=\"og:description\" content=\"When it comes to the user experience, helping your website users find what they need quickly and easily is an important consideration. And as part of this, your navigation bar will need to be well designed and easy to understand. But how can you highlight the navigation bar to show users which page they are [...]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/different-options-for-highlighting-the-navigation-bar\/\" \/>\n<meta property=\"og:site_name\" content=\"Pumpkin Web Design Manchester\" \/>\n<meta property=\"article:published_time\" content=\"2021-11-01T15:56:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-11T13:14:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-content\/uploads\/2019\/02\/web-1738168_1920.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1440\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Pumpkin Web Design Manchester\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Pumpkin Web Design Manchester\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/different-options-for-highlighting-the-navigation-bar\/\",\"url\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/different-options-for-highlighting-the-navigation-bar\/\",\"name\":\"Different options for highlighting the navigation bar\u00a0 - Pumpkin Web Design Manchester\",\"isPartOf\":{\"@id\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#website\"},\"datePublished\":\"2021-11-01T15:56:40+00:00\",\"dateModified\":\"2023-07-11T13:14:31+00:00\",\"author\":{\"@id\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#\/schema\/person\/b2a999c4885984c18f9525b21a017d28\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/different-options-for-highlighting-the-navigation-bar\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/different-options-for-highlighting-the-navigation-bar\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/different-options-for-highlighting-the-navigation-bar\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Different options for highlighting the navigation bar\u00a0\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#website\",\"url\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/\",\"name\":\"Pumpkin Web Design Manchester\",\"description\":\"Full service digital agency\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#\/schema\/person\/b2a999c4885984c18f9525b21a017d28\",\"name\":\"Pumpkin Web Design Manchester\",\"description\":\"Providing top notch web design, across Manchester, since 2009\",\"url\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/author\/g4oyprjmpvh3epn\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Different options for highlighting the navigation bar\u00a0 - Pumpkin Web Design Manchester","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.pumpkinwebdesign.com\/web-design-manchester\/different-options-for-highlighting-the-navigation-bar\/","og_locale":"en_GB","og_type":"article","og_title":"Different options for highlighting the navigation bar\u00a0 - Pumpkin Web Design Manchester","og_description":"When it comes to the user experience, helping your website users find what they need quickly and easily is an important consideration. And as part of this, your navigation bar will need to be well designed and easy to understand. But how can you highlight the navigation bar to show users which page they are [...]","og_url":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/different-options-for-highlighting-the-navigation-bar\/","og_site_name":"Pumpkin Web Design Manchester","article_published_time":"2021-11-01T15:56:40+00:00","article_modified_time":"2023-07-11T13:14:31+00:00","og_image":[{"width":1920,"height":1440,"url":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-content\/uploads\/2019\/02\/web-1738168_1920.jpg","type":"image\/jpeg"}],"author":"Pumpkin Web Design Manchester","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Pumpkin Web Design Manchester","Estimated reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/different-options-for-highlighting-the-navigation-bar\/","url":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/different-options-for-highlighting-the-navigation-bar\/","name":"Different options for highlighting the navigation bar\u00a0 - Pumpkin Web Design Manchester","isPartOf":{"@id":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#website"},"datePublished":"2021-11-01T15:56:40+00:00","dateModified":"2023-07-11T13:14:31+00:00","author":{"@id":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#\/schema\/person\/b2a999c4885984c18f9525b21a017d28"},"breadcrumb":{"@id":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/different-options-for-highlighting-the-navigation-bar\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/different-options-for-highlighting-the-navigation-bar\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/different-options-for-highlighting-the-navigation-bar\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/"},{"@type":"ListItem","position":2,"name":"Different options for highlighting the navigation bar\u00a0"}]},{"@type":"WebSite","@id":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#website","url":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/","name":"Pumpkin Web Design Manchester","description":"Full service digital agency","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-GB"},{"@type":"Person","@id":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#\/schema\/person\/b2a999c4885984c18f9525b21a017d28","name":"Pumpkin Web Design Manchester","description":"Providing top notch web design, across Manchester, since 2009","url":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/author\/g4oyprjmpvh3epn\/"}]}},"_links":{"self":[{"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/posts\/8539"}],"collection":[{"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/comments?post=8539"}],"version-history":[{"count":4,"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/posts\/8539\/revisions"}],"predecessor-version":[{"id":12047,"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/posts\/8539\/revisions\/12047"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/media\/1950"}],"wp:attachment":[{"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/media?parent=8539"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/categories?post=8539"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/tags?post=8539"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}