A navbar, or navbar by definition, is one of the key components in website design that helps users easily navigate to different parts of the site. In this article, in simple and friendly language, we will explore the methods of designing a navbar using CSS. We will start with the CSS properties used in the structure of this component and then look at several code examples to understand the better way to structure a navbar.
A navbar can be designed in either vertical or horizontal form, and different elements such as site logos, links, and icons of social media can be included. In this guide, our focus will be on designing a simple and beautiful navbar created using CSS and HTML that can easily be modified and developed.
Please note that to create a good navbar, design principles such as simplicity, user-friendliness, and most importantly, responsiveness should be considered so that the navbar works well across all devices and screens.
Next, we will provide you with some code snippets that can help you design and implement your own navbar easily. These examples will be presented in simple language so that even if you are a beginner, you can use them in your projects.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {font-family: Arial, sans-serif; margin: 0;}
.navbar {display: flex; justify-content: space-between; background-color: #333; padding: 10px;}
.navbar a {color: white; text-decoration: none; padding: 14px 20px;}
.navbar a:hover {background-color: #ddd; color: black;}
</style>
</head>
<body>
<div class="navbar">
<a href="#home">Home</a>
<a href="#about">About Us</a>
<a href="#contact">Contact Us</a>
</div>
</body>
</html>
Line by Line Explanation of the Code
<!DOCTYPE html> This line specifies that the document is an HTML document corresponding to HTML5.
<html lang="en"> The html element indicates the root of the HTML document and specifies the language as English.
<meta charset="UTF-8"> This setting configures the character set to UTF-8 for proper display of text across different languages.
<meta name="viewport" content="width=device-width, initial-scale=1.0"> This meta tag ensures that the page is responsive and displays properly on different screen sizes.
<style>...</style> This section contains the CSS styling that will define the appearance of the navbar.
body {font-family: Arial, sans-serif; margin: 0;} These settings specify the font and default margin for the body of the page.
.navbar {display: flex; justify-content: space-between; ...} This line indicates that the navbar will use the Flexbox model for arranging its items and that the spacing between them will be controlled.
.navbar a {...} Styles related to the links in the navbar, including their color and padding.
.navbar a:hover {...} This style is applied when the links are hovered over, changing their appearance accordingly.