An Interest In:
Web News this Week
- April 20, 2024
- April 19, 2024
- April 18, 2024
- April 17, 2024
- April 16, 2024
- April 15, 2024
- April 14, 2024
Some of Our Sources
- Engadget
- The Logo Smith
- Smashing Magazine
- Six Revisions
- Inspiredology
- Naldz Graphics
- Web Design Ledger
- CSS Globe
- Specky Boy
- TechPowerUp
Help Webnuz
Referal links:
Code a Responsive Navbar with HTML and CSS Flexbox: Pt. 1
This post was originally featured on debugacademy.com.
Navigation bars are one of the main components of a website. Thats where the important things are that help people navigate your site (hence the name). That being said, they can be pretty intimidating for beginners.
Not too long ago, we created a navbar as part of my Debug Academy class. In all honesty, that wasnt too difficult for me. Then we had to make it responsive. And I literally hated it. I understand why responsive design is so important but actually making a website responsive can be a real pain.
But, as I said earlier, its important that all websites be responsive. You will have users visiting your site from both desktop computers and mobile phones. And the number of mobile users is steadily increasing. So, as a web developer, its your job to make sure that your website looks good no matter what device your audience is using.
So lets start at the very top of our webpage by creating a responsive navbar. For now, we will just code the navbar. In my next post, Ill walk you through the process of making your navbar responsive.
Before we get started
Before we start coding, there are a few things you need to know. You will need to have a decent understanding of HTML. If youre an absolute beginner, no need to fear. I recently wrote a comprehensive guide to HTML. So you can check that out before you begin creating your navbar with me.
Here are some other things youll need:
A Text Editor or Codepen
A desire to learn
Some CSS experience (not absolutely necessary)
Step 0: The <head>
Most of this should be familiar to you, especially if youve already read my HTML 101 post. This is how every HTML document is started off. The <title> tag might be something new to you. Since its placed within our <head>, our users are not able to see this <title> on their screen. But their browser does display it on the page tab.
Now its time to add the HTML for the navbar.
Step 1: Navbar HTML
The main attraction in this section is the <nav>. This is the HTML element that stores our navigation links. We then create a list within our <nav>using an unordered list aka a <ul>. Using <a href> tags, we place our links within an <li>.
As you can see below, I just used Tab as a placeholder for my menu items. But you can put whatever you like here. Go crazy. Ive also given the title of our page (Nav Bar Tutorial )an id set equal to title. This is for use later on in our CSS.
At this point, its pretty far from what our end goal is. Thats where CSS comes in.
Step 2: <header> CSS
First, lets start by giving our navigation bar background color. We use the background-color property to do this. You can use Hex Color Codes to help choose any color you like to define this property. If you dont feel like a hex color, you can just type in the name of a basic color like red or blue.
Now were going to define the dimensions of our navbar. We want it to stretch all the way across our browser horizontally. Well accomplish this by setting our width to 100%. I also set the height to 60px.
As you can see, theres still some progress to be made so lets keep working.
Step 3: <ul> CSS
We dont want our menu items to be stacked on top of each other like that. There are many ways we can fix this. But I find the simplest way is by changing our display to flex. Without defining this property, display defaults to block. This is why the list items are all stacked up on top of each other like blocks. Using display: flex instead will make them align horizontally the way we want. Using the keyword flex implements a special style of CSS called Flexbox. I wont get into detail about that right now. But if you would like to learn more about Flexbox you can check out this article from CSS-Tricks.
We also want to get rid of those bullet points. We use the list-style-type property set to none to do this. We can increase the font-size of our menu items so that users can read them more easily. The font-size allows us to do this. I set my font-size to 20px. You can use a different value if you like. Just keep in mind that the value needs to be in pixels aka px.
I want every <li> to be pushed to the right side of the navbar. I can do this by using a Flexbox property called justify-content. Were going to give this the value of flex-end. This will move all <li> elements to the right (or end) of our navbar.
Step 4: <li> CSS
All of our <li> elements are scrunched up together. They need some space. To do this we use the margin property. Setting this to 20px puts 20 pixels of space to the left, right, top, and bottom of each <li> element. Again, if you would like them to be closer or farther apart, you can change the number of pixels to whatever figure you want. I also decided to change the font to Arial. We can do this with the font-family property.
Were getting a lot closer to our end goal. With just a little more CSS, well be there!
Step 5: #title CSS
I like it when the title of the page is set to the left on the navigation bar. We can do that by changing the right margin of our title. This is where the title id we made in our HTML comes in. With this id, we can apply CSS to just our page title. Using a hashtag, we can call on our title id in our CSS. We now add the margin-right property set to auto to move our title to the left side of our navigation bar.
Step 6: <a href> CSS
As you can see, our links are all blue. I dont know about you, but Im not in love with how that looks. So Im going to target the anchor tags within our li using the code to follow. Im going to set the color to black and using the text-decoration property, Im going to remove the underline with none.
We want the user to know that our list items are links. The way we can do this is by adding a property for when a user hovers over our list items. This is done using the :hover selector. Were going to use the text-decoration property again, setting it to underline this time. This code will underline our list items whenever the user hovers over them.
You can try this out yourself.
Step 7: Remove default margin with CSS
We are so close to completing our navigation bar! One thing that really bothers me is the white space around our navbar. As a beginner, I could never figure out why there always seemed to be some white space sitting around the content I had coded. Turns out, browsers add a bit of margin to our <body> by default. Many other HTML elements also have a default margin.
This is why our navbar has so much space around it. Thankfully, its very easy to remove this space. We have to set the margin of our body to 0 pixels. We also have a default margin for our ul. Again, we fix this by setting the margin of our ul to 0px.
Conclusion
This is our final product.
It looks really great. But, we still have some work to do. Our navigation bar isn't responsive just yet. In my next post, we'll go through the step-by-step process of making our navbar responsive.
As always, please feel free to leave any additional comments or feedback below. I always appreciate it.
Original Link: https://dev.to/ceeoreo/code-a-responsive-navbar-with-html-and-css-flexbox-pt-1-21p1
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To