In this article, we will continue to build our website by creating the navigation bar.
To create the navigation bar, we will first create a
- element with the class nav and the
- elements will be the links in our navigation bar.
The code for our navigation bar is as follows:
We can then style our navigation bar by adding some CSS. We will give the
element the class navbar and we will give the- element the class nav. We will also give the
- elements the class nav-item. We can then style the text and the links in our navigation bar.
The code for our CSS is as follows:
.navbar {
background-color: #333;
border-radius: 5px;
}
.nav {
list-style-type: none;
margin: 0;
padding: 0;
}
.nav-item {
background-color: #fff;
border-radius: 5px;
color: #000;
display: inline-block;
font-size: 14px;
padding: 10px;
text-align: center;
}
We can then see our navigation bar in action by running our website.
Related Post
“Discover the Future of Resume Building: CV Making AI Websites! 🚀 #trending #cvs #ai #viral“Discover the Future of Resume Building: CV Making AI Websites! 🚀 #trending #cvs #ai #viral
Welcome Back to MMLS YouTube channel ✨ “Discover the Future of Resume Building: CV Making AI Websites! In this …
The Ultimate Solution to Site-Built Pocket FramesThe Ultimate Solution to Site-Built Pocket Frames
Need the CS Ultimate for your next project? Find a dealer: …
Learn Bootstrap 5 and SASS by Building a Portfolio Website – Full CourseLearn Bootstrap 5 and SASS by Building a Portfolio Website – Full Course
In this course, we’re going to learn Bootstrap 5 by building a complete portfolio website. We’ll be using SASS to help us write clean, maintainable CSS code. Bootstrap is the
- elements the class nav-item. We can then style the text and the links in our navigation bar.