{"id":2774,"date":"2021-06-15T07:36:48","date_gmt":"2021-06-15T07:36:48","guid":{"rendered":"https:\/\/learnscripting.org\/?p=2774"},"modified":"2021-06-15T07:36:48","modified_gmt":"2021-06-15T07:36:48","slug":"css-navigation-bar","status":"publish","type":"post","link":"https:\/\/learnscripting.org\/css-navigation-bar\/","title":{"rendered":"CSS Navigation Bar"},"content":{"rendered":"\n

A navigation bar is a user interface element within a webpage that contains links to other sections of the website. In most cases, the navigation bar is part of the main website template, which means it is displayed on most, if not all, pages within the website. This means that no matter what page you are viewing, you can use the navigation bar to visit other sections of the website.<\/p>\n\n\n\n

A website navigation bar is most commonly displayed as horizontal list of links at the top of each page. It may be below the header or logo, but it is always placed before the main content of the page. In some cases, it may make sense to place the navigation bar vertically on the left side of each page. This type of navigation bar is also called a sidebar, since it appears to the side of the primary content. Some websites have both a horizontal navigation bar at the top and a vertical navigation bar on the left side of each page.<\/p>\n\n\n\n

The navigation bar is an important element of a website’s design since it allows users to quickly visit any section within the site. If we’ve ever visited a website without a navigation bar, we may have found it is difficult to locate the page you need. We may have also had to click “Back” several times in order to find a link to the next section we wanted to visit. Thankfully, web design has become more standardized in recent years and nearly every website now includes a navigation bar.<\/p>\n\n\n\n

Horizontal Navigation Bar:<\/h2>\n\n\n\n

The horizontal navigation bar is the horizontal list of links, which is generally on the top of the page.<\/p>\n\n\n\n

Example:<\/h2>\n\n\n\n
<!DOCTYPE html>\n<html>\n<head>\n<style>\nul {\n  list-style-type: none;\n  margin: 0;\n  padding: 0px;\n  overflow: hidden;\n  background-color: lightgray;\n}\n\nli {\n  float: left;\n}\n\nli a {\n  display: block;\n  color: blue;\n font-size:20px;\n  text-align: center;\n  padding: 10px 20px;\n  text-decoration: none;\n}\n.active{\nbackground-color: gray;\ncolor: white;\n}\nli a:hover {\n  background-color: orange;\n  color: white;\n}\n<\/style>\n<\/head>\n<body>\n\n<ul>\n  <li><a class=\"active\" href=\"#home\">Home<\/a><\/li>\n  <li><a href=\"#\">Java<\/a><\/li>\n  <li><a href=\"#\">HTML<\/a><\/li>\n  <li><a href=\"#\">CSS<\/a><\/li>\n<\/ul>\n\n<\/body>\n<\/html>\n\n \n<\/code><\/pre>\n\n\n\n
Output:<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Vertical Navigation Bar:<\/h2>\n\n\n\n
<!DOCTYPE html>\n<html>\n\n<head>\n    <style>\n        ul {\n            list-style-type: none;\n            margin: 0;\n            padding: 0;\n        }\n\n        li a {\n            display: block;\n            width: 60px;\n            background-color: #dddddd;\n        }\n    <\/style>\n<\/head>\n\n<body>\n\n    <ul>\n        <li><a href=\"#home\">Home<\/a><\/li>\n        <li><a href=\"#news\">News<\/a><\/li>\n        <li><a href=\"#contact us\">Contact us<\/a><\/li>\n        <li><a href=\"#about\">About<\/a><\/li>\n    <\/ul>\n\n    <p>A background color is added to the links to show the link area.<\/p>\n    <p>Notice that the whole link area is clickable, not just the text.<\/p>\n\n<\/body>\n\n<\/html><\/code><\/pre>\n\n\n\n
Output:<\/h2>\n\n\n\n
\"\"<\/figure>\n","protected":false},"excerpt":{"rendered":"
A navigation bar is a user interface element within a webpage that contains links to other sections of the website. In most cases, the navigation bar is part of the main website template, which means it is displayed on most, if not all, pages within the website. This means that no matter what page you are …<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rop_custom_images_group":[],"rop_custom_messages_group":[],"rop_publish_now":"initial","rop_publish_now_accounts":{"facebook_2613112545524186_272996453239123":"","twitter_aTo5NzY3MTIyNTIwMzEwNTM4MjQ7_976712252031053800":""},"rop_publish_now_history":[],"rop_publish_now_status":"pending","footnotes":""},"categories":[7],"tags":[],"class_list":["post-2774","post","type-post","status-publish","format-standard","hentry","category-css"],"yoast_head":"\nCSS Navigation Bar - Learn Scripting<\/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:\/\/learnscripting.org\/css-navigation-bar\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Navigation Bar - Learn Scripting\" \/>\n<meta property=\"og:description\" content=\"A navigation bar is a user interface element within a webpage that contains links to other sections of the website. In most cases, the navigation bar is part of the main website template, which means it is displayed on most, if not all, pages within the website. This means that no matter what page you are …\" \/>\n<meta property=\"og:url\" content=\"https:\/\/learnscripting.org\/css-navigation-bar\/\" \/>\n<meta property=\"og:site_name\" content=\"Learn Scripting\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/profile.php?id=100064270142636\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-15T07:36:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/learnscripting.org\/wp-content\/uploads\/2021\/06\/navbarh.png\" \/>\n<meta name=\"author\" content=\"master\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"master\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. 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\":\"Article\",\"@id\":\"https:\\\/\\\/learnscripting.org\\\/css-navigation-bar\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/learnscripting.org\\\/css-navigation-bar\\\/\"},\"author\":{\"name\":\"master\",\"@id\":\"https:\\\/\\\/learnscripting.org\\\/#\\\/schema\\\/person\\\/bf3c4da686af137370060664be0d6d23\"},\"headline\":\"CSS Navigation Bar\",\"datePublished\":\"2021-06-15T07:36:48+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/learnscripting.org\\\/css-navigation-bar\\\/\"},\"wordCount\":296,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/learnscripting.org\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/learnscripting.org\\\/css-navigation-bar\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/learnscripting.org\\\/wp-content\\\/uploads\\\/2021\\\/06\\\/navbarh.png\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/learnscripting.org\\\/css-navigation-bar\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/learnscripting.org\\\/css-navigation-bar\\\/\",\"url\":\"https:\\\/\\\/learnscripting.org\\\/css-navigation-bar\\\/\",\"name\":\"CSS Navigation Bar - Learn Scripting\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/learnscripting.org\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/learnscripting.org\\\/css-navigation-bar\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/learnscripting.org\\\/css-navigation-bar\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/learnscripting.org\\\/wp-content\\\/uploads\\\/2021\\\/06\\\/navbarh.png\",\"datePublished\":\"2021-06-15T07:36:48+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/learnscripting.org\\\/css-navigation-bar\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/learnscripting.org\\\/css-navigation-bar\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/learnscripting.org\\\/css-navigation-bar\\\/#primaryimage\",\"url\":\"https:\\\/\\\/learnscripting.org\\\/wp-content\\\/uploads\\\/2021\\\/06\\\/navbarh.png\",\"contentUrl\":\"https:\\\/\\\/learnscripting.org\\\/wp-content\\\/uploads\\\/2021\\\/06\\\/navbarh.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/learnscripting.org\\\/css-navigation-bar\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/learnscripting.org\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS Navigation Bar\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/learnscripting.org\\\/#website\",\"url\":\"https:\\\/\\\/learnscripting.org\\\/\",\"name\":\"Learn Scripting\",\"description\":\"Coding Knowledge Unveiled: Empower Yourself\",\"publisher\":{\"@id\":\"https:\\\/\\\/learnscripting.org\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/learnscripting.org\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/learnscripting.org\\\/#organization\",\"name\":\"Learn Scripting\",\"url\":\"https:\\\/\\\/learnscripting.org\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/learnscripting.org\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/learnscripting.org\\\/wp-content\\\/uploads\\\/2022\\\/03\\\/cropped-ls-600x600-1-512x512.jpg?fit=512%2C512&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/learnscripting.org\\\/wp-content\\\/uploads\\\/2022\\\/03\\\/cropped-ls-600x600-1-512x512.jpg?fit=512%2C512&ssl=1\",\"width\":512,\"height\":512,\"caption\":\"Learn Scripting\"},\"image\":{\"@id\":\"https:\\\/\\\/learnscripting.org\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/profile.php?id=100064270142636\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/learnscripting.org\\\/#\\\/schema\\\/person\\\/bf3c4da686af137370060664be0d6d23\",\"name\":\"master\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/1a1a1b8874d703e67ae938d527c63bbdf31a167356dc0754dd70439744ff5bba?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/1a1a1b8874d703e67ae938d527c63bbdf31a167356dc0754dd70439744ff5bba?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/1a1a1b8874d703e67ae938d527c63bbdf31a167356dc0754dd70439744ff5bba?s=96&d=mm&r=g\",\"caption\":\"master\"},\"url\":\"https:\\\/\\\/learnscripting.org\\\/author\\\/master\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Navigation Bar - Learn Scripting","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:\/\/learnscripting.org\/css-navigation-bar\/","og_locale":"en_US","og_type":"article","og_title":"CSS Navigation Bar - Learn Scripting","og_description":"A navigation bar is a user interface element within a webpage that contains links to other sections of the website. In most cases, the navigation bar is part of the main website template, which means it is displayed on most, if not all, pages within the website. This means that no matter what page you are …","og_url":"https:\/\/learnscripting.org\/css-navigation-bar\/","og_site_name":"Learn Scripting","article_publisher":"https:\/\/www.facebook.com\/profile.php?id=100064270142636","article_published_time":"2021-06-15T07:36:48+00:00","og_image":[{"url":"https:\/\/learnscripting.org\/wp-content\/uploads\/2021\/06\/navbarh.png","type":"","width":"","height":""}],"author":"master","twitter_card":"summary_large_image","twitter_misc":{"Written by":"master","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/learnscripting.org\/css-navigation-bar\/#article","isPartOf":{"@id":"https:\/\/learnscripting.org\/css-navigation-bar\/"},"author":{"name":"master","@id":"https:\/\/learnscripting.org\/#\/schema\/person\/bf3c4da686af137370060664be0d6d23"},"headline":"CSS Navigation Bar","datePublished":"2021-06-15T07:36:48+00:00","mainEntityOfPage":{"@id":"https:\/\/learnscripting.org\/css-navigation-bar\/"},"wordCount":296,"commentCount":0,"publisher":{"@id":"https:\/\/learnscripting.org\/#organization"},"image":{"@id":"https:\/\/learnscripting.org\/css-navigation-bar\/#primaryimage"},"thumbnailUrl":"https:\/\/learnscripting.org\/wp-content\/uploads\/2021\/06\/navbarh.png","articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/learnscripting.org\/css-navigation-bar\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/learnscripting.org\/css-navigation-bar\/","url":"https:\/\/learnscripting.org\/css-navigation-bar\/","name":"CSS Navigation Bar - Learn Scripting","isPartOf":{"@id":"https:\/\/learnscripting.org\/#website"},"primaryImageOfPage":{"@id":"https:\/\/learnscripting.org\/css-navigation-bar\/#primaryimage"},"image":{"@id":"https:\/\/learnscripting.org\/css-navigation-bar\/#primaryimage"},"thumbnailUrl":"https:\/\/learnscripting.org\/wp-content\/uploads\/2021\/06\/navbarh.png","datePublished":"2021-06-15T07:36:48+00:00","breadcrumb":{"@id":"https:\/\/learnscripting.org\/css-navigation-bar\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/learnscripting.org\/css-navigation-bar\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/learnscripting.org\/css-navigation-bar\/#primaryimage","url":"https:\/\/learnscripting.org\/wp-content\/uploads\/2021\/06\/navbarh.png","contentUrl":"https:\/\/learnscripting.org\/wp-content\/uploads\/2021\/06\/navbarh.png"},{"@type":"BreadcrumbList","@id":"https:\/\/learnscripting.org\/css-navigation-bar\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/learnscripting.org\/"},{"@type":"ListItem","position":2,"name":"CSS Navigation Bar"}]},{"@type":"WebSite","@id":"https:\/\/learnscripting.org\/#website","url":"https:\/\/learnscripting.org\/","name":"Learn Scripting","description":"Coding Knowledge Unveiled: Empower Yourself","publisher":{"@id":"https:\/\/learnscripting.org\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/learnscripting.org\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/learnscripting.org\/#organization","name":"Learn Scripting","url":"https:\/\/learnscripting.org\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/learnscripting.org\/#\/schema\/logo\/image\/","url":"https:\/\/i0.wp.com\/learnscripting.org\/wp-content\/uploads\/2022\/03\/cropped-ls-600x600-1-512x512.jpg?fit=512%2C512&ssl=1","contentUrl":"https:\/\/i0.wp.com\/learnscripting.org\/wp-content\/uploads\/2022\/03\/cropped-ls-600x600-1-512x512.jpg?fit=512%2C512&ssl=1","width":512,"height":512,"caption":"Learn Scripting"},"image":{"@id":"https:\/\/learnscripting.org\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/profile.php?id=100064270142636"]},{"@type":"Person","@id":"https:\/\/learnscripting.org\/#\/schema\/person\/bf3c4da686af137370060664be0d6d23","name":"master","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/1a1a1b8874d703e67ae938d527c63bbdf31a167356dc0754dd70439744ff5bba?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/1a1a1b8874d703e67ae938d527c63bbdf31a167356dc0754dd70439744ff5bba?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1a1a1b8874d703e67ae938d527c63bbdf31a167356dc0754dd70439744ff5bba?s=96&d=mm&r=g","caption":"master"},"url":"https:\/\/learnscripting.org\/author\/master\/"}]}},"_links":{"self":[{"href":"https:\/\/learnscripting.org\/wp-json\/wp\/v2\/posts\/2774","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/learnscripting.org\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/learnscripting.org\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/learnscripting.org\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/learnscripting.org\/wp-json\/wp\/v2\/comments?post=2774"}],"version-history":[{"count":0,"href":"https:\/\/learnscripting.org\/wp-json\/wp\/v2\/posts\/2774\/revisions"}],"wp:attachment":[{"href":"https:\/\/learnscripting.org\/wp-json\/wp\/v2\/media?parent=2774"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/learnscripting.org\/wp-json\/wp\/v2\/categories?post=2774"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/learnscripting.org\/wp-json\/wp\/v2\/tags?post=2774"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}