DEV Community

Cover image for How to Create a Navigation using Flexbox
Pinky Lalwani
Pinky Lalwani

Posted on • Updated on

How to Create a Navigation using Flexbox

Here’s what we’ll be creating:

Alt Text
Hey!👋

In this post, we are going to create a navigation using Flexbox property.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navigation</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/41adfddec4.js" crossorigin="anonymous"></script>

</head>
<body>
    <div class="container">
        <header>
            <div class="logo">logo</div>
            <nav>
                <a href="#">about</a>
                <a href="#"><i class="fas fa-user"></i>team</a>
                <a href="#"><i class="fas fa-th"></i>work</a>
                <a href="#"><i class="fas fa-dollar-sign"></i>pricing</a>
                <a href="#"><i class="fas fa-envelope"></i>contact</a>
            </nav>
        </header>
    </div>
Enter fullscreen mode Exit fullscreen mode

CSS:

*{
    box-sizing: border-box;
}
body{
    margin:0;
    padding:0;
    font-family: 'Montserrat', sans-serif;
    font-size:1.125rem;
}
.container{
    max-width:1366px;
    margin:0 auto;
}
header{
    display:flex;
    align-items: center;
    padding:15px 0;
}
.logo{
    margin-right:auto;
    text-transform: uppercase;
    font-weight: 300;
    font-size:1.5rem;
}
a{
    text-decoration: none;
    color:#000000;
    text-transform:uppercase;
    font-weight: 400;
    font-size: 1rem;
    margin-left: 1rem;
}
i{
    padding-right: 5px;
}
Enter fullscreen mode Exit fullscreen mode

If you have any questions feel free to ask.

Happy Coding!🙌😉

Discussion (11)

Collapse
jamesncox profile image
James Cox • Edited

Hi Pinky, this is a really cool idea!!

I do have one suggestion, especially if you plan on doing a series of posts like this, I suggest using the built in markdown for code block with three backticks. I included a screen shot for reference. This way a user can highlight and copy portions of your code examples!!

dev-to-uploads.s3.amazonaws.com/i/...

If you have any questions let me know!

Collapse
link2twenty profile image
Andrew Bone

In that same vein you host your code somewhere like JSFiddle then take the URL and put it in a tag like this.

{% jsfiddle lhttps://jsfiddle.net/ink2twenty/f16voc7q/ result html css %}

There's lots of tags like this you might find helpful in the Editor Guide. 😊

Collapse
jamesncox profile image
James Cox

Oh this is great!!! I assume Ican do this with my Codesandbox examples also.

Thread Thread
link2twenty profile image
Andrew Bone

Yep! That one's just:

{% codesandbox sandbox_name %}
Thread Thread
jamesncox profile image
James Cox

Nice one, thanks Andrew!

Collapse
pinkylalwani profile image
Pinky Lalwani Author

Thanks Andrew! This is a very cool way to put code in my post.🥺
How to put YouTube video link in my post?

Thread Thread
link2twenty profile image
Andrew Bone
{% youtube dQw4w9WgXcQ %}

Thread Thread
pinkylalwani profile image
Pinky Lalwani Author

🙌

Collapse
pinkylalwani profile image
Pinky Lalwani Author

I was actually confused how to use build in markdown in my post as this is my very first post. Thank you! I will keep this in mind next time. 🙌

Collapse
jamesncox profile image
James Cox

You’re welcome! I didn’t know how to do it my first post either and someone else had to show me as well 😅

Collapse
romanparaskiva profile image
Роман Параскива

Вау, я в шоке! А нет, показалось... Стоило ради этого пост пилить? Это же элементарно