![\"How](\"https:\/\/cssnewbie.com\/wp-content\/uploads\/2020\/10\/Dark-map-1024x683.jpg\")
<\/p>\n<\/p>\n
A good website is the one that provides visitors easy and quick access to information. This can be achieved by simply adding a navigation bar on your website.<\/p>\n
What is a navigation bar? It is a part of GUI within your website that helps users to easily navigate various pages of your website. It contains links to other pages on your website.<\/p>\n
A website without a navigation bar makes it difficult to locate various pages within the website. Navigation bar helps you to easily find pages you need. It is very important to have a navigation bar that is easy to use and attractive.<\/p>\n
Are you looking for transforming your simple HTML navigation bar into an interesting one? Then adding CSS to your HTML code is the best way to change your simple HTML navigation bar to a good-looking navigation bar<\/a>.<\/p>\n In our tutorial we will create navigation bar using the <ul> and <li> elements as it requires standard HTML as a base.<\/p>\n Here is how a good navigation bar is:<\/p>\n Some examples of Navigation Bar:<\/p>\n Navigation bar<\/a> is a significant part of your website which is placed on almost all webpages of your website. Navigation bars are usually placed horizontally at the top of your webpages. Sometimes it is also placed vertically on the left or right side of your webpage.<\/p>\n There are mainly two types of navigation bar in CSS:<\/p>\n A Horizontal Navigation Bar is placed at the top of the website. It is usually always placed before the main content of your webpage. The horizontal navigation bar can be created using inline and floating list items.<\/p>\n Let us see an example of creating a horizontal navigation bar with <ul> and <li> tags, right text floating, and background color black.<\/p>\n Example:<\/strong><\/p>\n CSS File will be as follows:<\/strong><\/p>\n Here\u2019s how the output will be:<\/strong><\/p>\n A Vertical Navigation bar is placed on the right or left side of your webpage. Since it is placed at the side of your website it is also called Sidebar. A lot of websites use the vertical navigation bar on their webpages. Let us see an example to create a vertical navigation bar using <ul> and <li> tags, hover to display current page, and black background.<\/p>\n Example:<\/strong><\/p>\n \u00a0<\/strong>CSS File will be as follows:<\/strong><\/p>\n Here\u2019s how the output will look like:<\/strong><\/p>\n In this tutorial, we learned how to add a navigation bar in CSS. We also learned what is horizontal navigation bar and vertical navigation bar in CSS and how to add them. In the above examples, we used an external CSS file to link CSS to HTML. You can do this in another by adding CSS code in your HTML file using the <style> tag.<\/p>\n By the way if you are not that technical and don’t have engineering resources at\u00a0 your disposal. I would recommend to use standard website builders like square space and show it. If you are confused between the two, check out Squarespace vs Showit<\/a> comparison to make a better buying decision.<\/p>\n To learn such CSS techniques, subscribe to our blog<\/a>!<\/p>\n To see how to add forms in CSS, visit our previous article!<\/p>\n\n
\n
\n
1.CSS Horizontal Navigation Bar<\/strong><\/h3>\n
<html>\n<head>\n<title>How to Add Horizontal Navigation Bar in CSS<\/title>\n<\/head>\n\n<body>\n<ul>\n\u00a0 <li><a href=\"#aboutus\">About Us<\/a><\/li>\n\u00a0 <li><a href=\"#contact\">Contact<\/a><\/li>\n\u00a0 <li><a href=\"#services\">Services<\/a><\/li>\n\u00a0 <li><a href=\"#home\">Home<\/a><\/li>\n<\/ul>\n<\/body>\n<\/html><\/pre>\n
#ul {\n list-style-type: none;\n margin: 0;\n padding: 0;\n overflow: hidden;\n background-color: black;\n}<\/pre>\n#li {\n float: right;\n}\n\n#li a {\n display: block;\n color: white;\n text-align: center;\n padding: 14px 16px;\n text-decoration: none;\n}<\/pre>\n![\"How](\"https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2020\/10\/NAVIGATION1.png\")
<\/p>\n2.CSS Vertical Navigation Bar<\/strong><\/h3>\n
<html>\n<head>\n<title>\nHow to Add Horizontal Navigation Bar in CSS\n<\/title>\n\n<\/head>\n<body>\n<ul>\n \u00a0<li><a href=\"#home\">Home<\/a><\/li>\n \u00a0<li><a href=\"#servicees\">Services<\/a><\/li>\n \u00a0<li><a href=\"#contact\">Contact<\/a><\/li>\n \u00a0<li><a href=\"#aboutus\">About Us<\/a><\/li>\n<\/ul>\n<\/body>\n\n<\/html><\/pre>\n
#ul {\n \u00a0list-style-type: none;\n \u00a0margin: 0;\n \u00a0padding: 0;\n \u00a0width: 200px;\n \u00a0background-color: black;\n}\n\n#li a {\n \u00a0display: block;\n \u00a0color: white;\n \u00a0padding: 8px 16px;\n \u00a0text-decoration: none;\n}\n#li a:hover {\n \u00a0background-color: #555;\n \u00a0color: white;\n}<\/pre>\n![\"How](\"https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2020\/10\/NAVIGATION2.png\")
<\/p>\nConclusion<\/strong><\/h3>\n