Creating a Simple Navigation Bar using Flexbox

Hey Everyone!!!

My name is Atharva and I am an engineering student who is passionate about programming, content writing and open-source. I am curious about the world of technology and how it can be used to make a difference in the world.

In this blog, I will be explaining how to create a simple flexbox navbar using HTML and CSS only!!!

Let's Begin !!!

Introduction

When it comes to designing a responsive and visually appealing navigation bar for your website, using Flexbox can be a game-changer. Flexbox, short for Flexible Box Layout, is a CSS layout model that allows you to create complex layouts with ease.

In this blog post, we'll explore how to create a navigation bar using Flexbox, step by step. The final result will look something like this:

https://codepen.io/atharva_s/pen/ExGQrWx

I know it's not the best-looking navbar, but for beginners, this will suffice!

Understanding the HTML Structure

Before we dive into the CSS Flexbox magic, let's take a look at the HTML structure we'll be working with. We have a basic structure with a header containing a logo, a navigation menu, and a call-to-action button.

<body>
    <header>
        <p class="logo">FLEXBOX</p>
        <nav>
            <ul class="nav_links">
                <li><a href="#">Projects</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">FAQ</a></li>
            </ul>
        </nav>
        <a href="#" class="cta"><button>Contact</button></a>
    </header>
</body>

Step 1: Setting Up the Flex Container

Flexbox is our trusty tool for creating flexible and responsive layouts effortlessly. To start, we'll designate the header as our flex container:

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 10%;
}

display: flex; magically transforms the header into a flex container, giving us the superpower to control its children with ease.
justify-content: space-between; works like magic, evenly distributing the elements within the header. The logo sits proudly on the left, while the navigation links and the enticing call-to-action button cosy up on the right.
align-items: center; vertically aligns everything in the center, adding a touch of elegance to our navigation bar.
padding: 30px 10%; gives our header some breathing space and a touch of style.

Step 2: Styling the Logo

Our logo deserves to shine, doesn't it? Let's sprinkle some CSS fairy dust on it:

.logo {
    color: #fff;
    font-weight: bold;
    font-size: x-large;
    cursor: pointer;
}

color: #fff; turns the logo white, making it pop against the dark background.
font-weight: bold; adds an air of importance to it.
font-size: x-large; makes the logo larger than life.
cursor: pointer; gives it that delightful interactive feel, as if beckoning users to click.

A navigation bar isn't complete without snazzy links. Let's give them some personality:

.nav_links {
    list-style: none;
}

.nav_links li {
    display: inline-block;
    padding: 0px 20px;
}

.nav_links li a:hover {
    color: aqua;
}

list-style: none; removes those pesky list bullet points.
display: inline-block; makes our list items flow horizontally.
padding: 0px 20px; adds just the right amount of space between the links.
color: aqua; adds a delightful color change when the links are hovered over.

Step 4: Styling the Call-to-Action Button

Last but not least, let's make our call-to-action button irresistible:

button {
    padding: 9px 25px;
    background-color: rgb(126, 186, 238);
    border: none;
    border-radius: 50px;
    cursor: pointer;
}

padding: 9px 25px; defines the button's size, making it comfortable to click.
background-color: rgb(126, 186, 238); gives it a friendly and inviting hue.
border: none; removes any unnecessary borders.
border-radius: 50px; rounds the corners for a polished finish.
cursor: pointer; tells users that this button is meant to be clicked – it's like a virtual handshake.

Wrapping It Up

Congratulations, fellow coder! You've just crafted a gorgeous navigation bar using the magical Flexbox. Flexbox's simplicity and flexibility empower you to create stunning layouts effortlessly.

Now, go ahead and customize your navigation bar to match your website's style and personality.

Stay determined, stay focused and keep pushing forward !!!

Liked This Blog?

Do react and comment with your thoughts on the points discussed above.

Make sure to follow me :

Atharva Salitri's Blog