{"id":65,"date":"2012-05-29T00:33:30","date_gmt":"2012-05-29T00:33:30","guid":{"rendered":"https:\/\/learnwebcode.com\/?p=65"},"modified":"2016-03-29T02:00:36","modified_gmt":"2016-03-29T02:00:36","slug":"css-navigation-tutorial","status":"publish","type":"post","link":"https:\/\/learnwebcode.com\/css-navigation-tutorial\/","title":{"rendered":"CSS Navigation Tutorial"},"content":{"rendered":"<p><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"http:\/\/www.youtube.com\/embed\/o7uZnlF9aM8?rel=0\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n<p>In this CSS Video Tutorial we learn how to apply very basic styles (including hover effects) to our navigation.  For quick reference, you may also watch the <a href=\"https:\/\/learnwebcode.com\/css-two-column-layout-tutorial\/\" title=\"Two Column CSS Layout Tutorial\">tutorial where we created the Two Column Layout<\/a>.<\/p>\n<p>If you would rather learn from a single, unified video course instead of individual one-off video tutorials check out <a href=\"\/web-design-for-beginners-real-world-coding-html-css\/\">my 8 hour video course<\/a> and learn pro-level HTML, CSS, and responsive design. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this CSS Video Tutorial we learn how to apply very basic styles (including hover effects) to our navigation. For quick reference, you may also watch the tutorial where we created the Two Column Layout. If you would rather learn from a single, unified video course instead of individual one-off video tutorials check out my [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-65","post","type-post","status-publish","format-standard","hentry","category-css-video-tutorial"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>CSS Navigation Tutorial - LearnWebCode<\/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:\/\/learnwebcode.com\/css-navigation-tutorial\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Navigation Tutorial - LearnWebCode\" \/>\n<meta property=\"og:description\" content=\"In this CSS Video Tutorial we learn how to apply very basic styles (including hover effects) to our navigation. For quick reference, you may also watch the tutorial where we created the Two Column Layout. If you would rather learn from a single, unified video course instead of individual one-off video tutorials check out my [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/learnwebcode.com\/css-navigation-tutorial\/\" \/>\n<meta property=\"og:site_name\" content=\"LearnWebCode\" \/>\n<meta property=\"article:published_time\" content=\"2012-05-29T00:33:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-03-29T02:00:36+00:00\" \/>\n<meta name=\"author\" content=\"Brad\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Brad\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/learnwebcode.com\/css-navigation-tutorial\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/learnwebcode.com\/css-navigation-tutorial\/\"},\"author\":{\"name\":\"Brad\",\"@id\":\"https:\/\/learnwebcode.com\/#\/schema\/person\/db825ebc5a08e39b01de31771e4c7fe6\"},\"headline\":\"CSS Navigation Tutorial\",\"datePublished\":\"2012-05-29T00:33:30+00:00\",\"dateModified\":\"2016-03-29T02:00:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/learnwebcode.com\/css-navigation-tutorial\/\"},\"wordCount\":69,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\/\/learnwebcode.com\/#\/schema\/person\/db825ebc5a08e39b01de31771e4c7fe6\"},\"articleSection\":[\"CSS Video Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/learnwebcode.com\/css-navigation-tutorial\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/learnwebcode.com\/css-navigation-tutorial\/\",\"url\":\"https:\/\/learnwebcode.com\/css-navigation-tutorial\/\",\"name\":\"CSS Navigation Tutorial - LearnWebCode\",\"isPartOf\":{\"@id\":\"https:\/\/learnwebcode.com\/#website\"},\"datePublished\":\"2012-05-29T00:33:30+00:00\",\"dateModified\":\"2016-03-29T02:00:36+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/learnwebcode.com\/css-navigation-tutorial\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/learnwebcode.com\/css-navigation-tutorial\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/learnwebcode.com\/css-navigation-tutorial\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/learnwebcode.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS Navigation Tutorial\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/learnwebcode.com\/#website\",\"url\":\"https:\/\/learnwebcode.com\/\",\"name\":\"LearnWebCode\",\"description\":\"Become a Web Developer\",\"publisher\":{\"@id\":\"https:\/\/learnwebcode.com\/#\/schema\/person\/db825ebc5a08e39b01de31771e4c7fe6\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/learnwebcode.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/learnwebcode.com\/#\/schema\/person\/db825ebc5a08e39b01de31771e4c7fe6\",\"name\":\"Brad\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/learnwebcode.com\/wp-content\/uploads\/0UWl0Tet_400x400.jpg\",\"url\":\"https:\/\/learnwebcode.com\/wp-content\/uploads\/0UWl0Tet_400x400.jpg\",\"contentUrl\":\"https:\/\/learnwebcode.com\/wp-content\/uploads\/0UWl0Tet_400x400.jpg\",\"width\":400,\"height\":400,\"caption\":\"Brad\"},\"logo\":{\"@id\":\"https:\/\/learnwebcode.com\/wp-content\/uploads\/0UWl0Tet_400x400.jpg\"},\"url\":\"https:\/\/learnwebcode.com\/author\/lwcadmin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Navigation Tutorial - LearnWebCode","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:\/\/learnwebcode.com\/css-navigation-tutorial\/","og_locale":"en_US","og_type":"article","og_title":"CSS Navigation Tutorial - LearnWebCode","og_description":"In this CSS Video Tutorial we learn how to apply very basic styles (including hover effects) to our navigation. For quick reference, you may also watch the tutorial where we created the Two Column Layout. If you would rather learn from a single, unified video course instead of individual one-off video tutorials check out my [&hellip;]","og_url":"https:\/\/learnwebcode.com\/css-navigation-tutorial\/","og_site_name":"LearnWebCode","article_published_time":"2012-05-29T00:33:30+00:00","article_modified_time":"2016-03-29T02:00:36+00:00","author":"Brad","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Brad"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/learnwebcode.com\/css-navigation-tutorial\/#article","isPartOf":{"@id":"https:\/\/learnwebcode.com\/css-navigation-tutorial\/"},"author":{"name":"Brad","@id":"https:\/\/learnwebcode.com\/#\/schema\/person\/db825ebc5a08e39b01de31771e4c7fe6"},"headline":"CSS Navigation Tutorial","datePublished":"2012-05-29T00:33:30+00:00","dateModified":"2016-03-29T02:00:36+00:00","mainEntityOfPage":{"@id":"https:\/\/learnwebcode.com\/css-navigation-tutorial\/"},"wordCount":69,"commentCount":2,"publisher":{"@id":"https:\/\/learnwebcode.com\/#\/schema\/person\/db825ebc5a08e39b01de31771e4c7fe6"},"articleSection":["CSS Video Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/learnwebcode.com\/css-navigation-tutorial\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/learnwebcode.com\/css-navigation-tutorial\/","url":"https:\/\/learnwebcode.com\/css-navigation-tutorial\/","name":"CSS Navigation Tutorial - LearnWebCode","isPartOf":{"@id":"https:\/\/learnwebcode.com\/#website"},"datePublished":"2012-05-29T00:33:30+00:00","dateModified":"2016-03-29T02:00:36+00:00","breadcrumb":{"@id":"https:\/\/learnwebcode.com\/css-navigation-tutorial\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/learnwebcode.com\/css-navigation-tutorial\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/learnwebcode.com\/css-navigation-tutorial\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/learnwebcode.com\/"},{"@type":"ListItem","position":2,"name":"CSS Navigation Tutorial"}]},{"@type":"WebSite","@id":"https:\/\/learnwebcode.com\/#website","url":"https:\/\/learnwebcode.com\/","name":"LearnWebCode","description":"Become a Web Developer","publisher":{"@id":"https:\/\/learnwebcode.com\/#\/schema\/person\/db825ebc5a08e39b01de31771e4c7fe6"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/learnwebcode.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/learnwebcode.com\/#\/schema\/person\/db825ebc5a08e39b01de31771e4c7fe6","name":"Brad","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/learnwebcode.com\/wp-content\/uploads\/0UWl0Tet_400x400.jpg","url":"https:\/\/learnwebcode.com\/wp-content\/uploads\/0UWl0Tet_400x400.jpg","contentUrl":"https:\/\/learnwebcode.com\/wp-content\/uploads\/0UWl0Tet_400x400.jpg","width":400,"height":400,"caption":"Brad"},"logo":{"@id":"https:\/\/learnwebcode.com\/wp-content\/uploads\/0UWl0Tet_400x400.jpg"},"url":"https:\/\/learnwebcode.com\/author\/lwcadmin\/"}]}},"_links":{"self":[{"href":"https:\/\/learnwebcode.com\/wp-json\/wp\/v2\/posts\/65","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/learnwebcode.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/learnwebcode.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/learnwebcode.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/learnwebcode.com\/wp-json\/wp\/v2\/comments?post=65"}],"version-history":[{"count":9,"href":"https:\/\/learnwebcode.com\/wp-json\/wp\/v2\/posts\/65\/revisions"}],"predecessor-version":[{"id":1022,"href":"https:\/\/learnwebcode.com\/wp-json\/wp\/v2\/posts\/65\/revisions\/1022"}],"wp:attachment":[{"href":"https:\/\/learnwebcode.com\/wp-json\/wp\/v2\/media?parent=65"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/learnwebcode.com\/wp-json\/wp\/v2\/categories?post=65"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/learnwebcode.com\/wp-json\/wp\/v2\/tags?post=65"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}