{"id":558,"date":"2022-05-25T11:09:44","date_gmt":"2022-05-25T11:09:44","guid":{"rendered":"https:\/\/gyanipandit.com\/programming\/?p=558"},"modified":"2023-03-28T13:09:24","modified_gmt":"2023-03-28T13:09:24","slug":"css-navigation-bar","status":"publish","type":"post","link":"https:\/\/gyanipandit.com\/programming\/css-navigation-bar\/","title":{"rendered":"CSS Navigation Bar"},"content":{"rendered":"\n<p class=\"has-text-align-center\"><strong>CSS Navigation Bar<\/strong><\/p>\n\n\n\n<p>The navigation bar is basically a list of links, which can be easily represented as follows &#8211;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"322\" height=\"91\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Navigation-Bar.jpg\" alt=\"\" class=\"wp-image-559\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Navigation-Bar.jpg 322w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Navigation-Bar-300x85.jpg 300w\" sizes=\"auto, (max-width: 322px) 100vw, 322px\" \/><\/figure>\n<\/div>\n\n\n<p>So, building a navigation bar is so easy&#8230; we just need to have some list, which we will be styling step by step, and create a navigation bar.<\/p>\n\n\n\n<p>The first step is to remove the bullets from the list that we had created.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"CSS Navbar | Lecture 36 | CSS for Beginners\" width=\"696\" height=\"392\" src=\"https:\/\/www.youtube.com\/embed\/A59O891tYGQ?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>This can be done with a property called list-style-type. We need to set the value of the property to none.<\/p>\n\n\n\n<p>you can refer to the below code and output to understand this better. This will be done to the whole list(ul)<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"507\" height=\"114\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Navigation-Bar-1.jpg\" alt=\"\" class=\"wp-image-560\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Navigation-Bar-1.jpg 507w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Navigation-Bar-1-300x67.jpg 300w\" sizes=\"auto, (max-width: 507px) 100vw, 507px\" \/><\/figure>\n<\/div>\n\n\n<p>after doing this, your list will look something like this(if everything goes the right way) &#8211;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"652\" height=\"114\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Navigation-Bar-2.jpg\" alt=\"\" class=\"wp-image-561\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Navigation-Bar-2.jpg 652w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Navigation-Bar-2-300x52.jpg 300w\" sizes=\"auto, (max-width: 652px) 100vw, 652px\" \/><\/figure>\n<\/div>\n\n\n<p>Then we can do some miscellaneous things like changing the color of text, changing the background color, etc. You can DO IT YOURSELF!!!!!! because I want you to be more creative(basically the thing is that we have seen this a hundred times &#8230; so better if you give it a try now).<\/p>\n\n\n\n<p>Although, you can refer to the below code, which does the same thing &#8211;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"548\" height=\"395\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Navigation-Bar-3.jpg\" alt=\"\" class=\"wp-image-562\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Navigation-Bar-3.jpg 548w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Navigation-Bar-3-300x216.jpg 300w\" sizes=\"auto, (max-width: 548px) 100vw, 548px\" \/><\/figure>\n<\/div>\n\n\n<p>And, when you finish doing all this, your navigation bar is ready!!!.<\/p>\n\n\n\n<p>Here is what my navigation bar looks like &#8211;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"564\" height=\"63\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Navigation-Bar-4.jpg\" alt=\"\" class=\"wp-image-563\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Navigation-Bar-4.jpg 564w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Navigation-Bar-4-300x34.jpg 300w\" sizes=\"auto, (max-width: 564px) 100vw, 564px\" \/><\/figure>\n<\/div>\n\n\n<p>If you hover on some link, you will see that the background changes to white and the text color changes to black which is pretty awesome right?<\/p>\n\n\n\n<p>If you wish to create a vertical navigation bar? We can do that too easily. You have to do the same things, just this time the display will be blocked instead of inline.<\/p>\n\n\n\n<p>You can refer to the below code to understand the navigation bar(vertical) &#8211;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"606\" height=\"450\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Navigation-Bar-6.jpg\" alt=\"\" class=\"wp-image-565\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Navigation-Bar-6.jpg 606w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Navigation-Bar-6-300x223.jpg 300w\" sizes=\"auto, (max-width: 606px) 100vw, 606px\" \/><\/figure>\n<\/div>\n\n\n<p>After all this styling, our simple vertical navigation bar looks something like this &#8211;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"913\" height=\"389\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Navigation-Bar-5.jpg\" alt=\"\" class=\"wp-image-564\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Navigation-Bar-5.jpg 913w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Navigation-Bar-5-300x128.jpg 300w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Navigation-Bar-5-768x327.jpg 768w\" sizes=\"auto, (max-width: 913px) 100vw, 913px\" \/><\/figure>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>CSS Navigation Bar The navigation bar is basically a list of links, which can be easily represented as follows &#8211; So, building a navigation bar is so easy&#8230; we just need to have some list, which we will be styling step by step, and create a navigation bar. The first step is to remove the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[9,198,197,13],"class_list":{"0":"post-558","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-css-tutorial","7":"tag-css","8":"tag-css-navbar","9":"tag-css-navigation-bar","10":"tag-css-tutorial"},"_links":{"self":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts\/558","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/comments?post=558"}],"version-history":[{"count":3,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts\/558\/revisions"}],"predecessor-version":[{"id":5675,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts\/558\/revisions\/5675"}],"wp:attachment":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/media?parent=558"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/categories?post=558"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/tags?post=558"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}