Building a Blog website: #1 Create a Responsive CSS Navigation Bar With Drop Down using Flexbox
I started coding back in 2019, and up to this point, one of those parts that I have been having a rough time grasping is CSS. Yeah, that's right; I don't know how good your CSS skills but man, I got to have to confess that it humbles me; maybe that's why I have never liked coding as a group for a very long time, but after long hours of practicing, I'm happy to share with you my knowledge in Programming.
So ill be starting with something small as we advance at later stages. I am trying to build and Blog website, and this is the first part of this excellent tutorial
Start by Creating a Basic Structure.
To start building our navigation bar, let's first set up some basic structure. We'll begin by creating our header element and then have a couple of classes inside it, followed by our Menu items in the form of unordered Lists. We will add one more unordered list inside the parent list, and a concept referred to as Nesting of Elements
Add Some Styling.
Now that we've got our basic structure laid out, we need to style it. First, we'll give our header background color and set a couple of Global styling that we will use later to create other page sections. Next, we'll look at the parent list and a display of Flex, and then the first chile, we position it as relative while giving its direct element a position of absolute to create the beautiful drop-down Menu.
Build the Menu Items.
We will start by creating a list of links inside the header. To do so, we'll use the ul tag. Inside the ul tag, we'll place li tags containing each link. We have also assigned class names to our UL tag and li tags, allowing us to style each list individually later.
Style the Drop-down Menus.
Now that we've set up our main navigation bar let's add some styling. As mentioned before, we will give our child a position of relative and head-on to provide the elements under the first child a position of absolute with a couple of styling. Now to make sure that its contents do not appear unless hovered on, make sure to give visibility hidden. To show the contents back, your Code should look like this.
Finish off with Mobile Responsive
Some prefer doing the Mobile-first before heading to desktop later, but I guess the latter works perfectly for me. However, depending on your comfy, you can choose to go either. Doing Mobile responsive allows your website to resonate with various Screen Sizes(Desktop, Mobile, and Tablets)
Check the source code of this particular article on my Github profile