You are currently viewing Navigation menu with flexbox

Navigation menu with flexbox

Let’s design a navigation menu with Flexbox. I have spent this whole week and Sunday too learning and make this professional-looking menu using flexbox. Because new things/concepts take time to understand.

Navigation menu with flexbox

So without wasting much time let’s get started.

First of all open your code editor(Sublime Text 3) and create a HTML file with some basic HTML boiler plate which looks something like this.

HTML boiler plate for navbar design

Now we have to create our navbar skeleton, for that write this HTML code in your HTML file. Which looks like this.

HTML code for navbar design

In this HTML file we have just created a main header tag in which we have added image tag for logo, menu links and call to action button.

Now we will decorate our HTML navbar skeleton.

First of all i’m going to import a font, named “Montserrat” from Google fonts library in CSS file which looks like this.

Google font CDN link

Now you must have to remove default margin padding from this navbar HTML document, so to make that add this styling in your CSS file.

HTML document styling

There is some common styling we need in our list tag, anchor tag and button(like font, color and text decoration) so we will design this all tag at once like this

list anchor and button styling

In this CSS code we are applying font family “Montserrat”, font weight 500, font size 16px, font color “#edf0f1” and text decoration will be none which will hide the underline from links.

Now we will design Header tag

header styling

In header styling we are using display flex(FlexBox) to take alignment control on child element of header. justify-content will give space between all this child element like logo, nav links and call to action button.

Navbar logo design
Navbar list design
logo and link styling

Now we are going to give some styling to our logo and nav links. You can see logo cursor is set to pointer which will give pointer effect to our mouse cursor.

In nav link list-style “none” will remove underline from menu link texts.

Nav links li we have applied display “inline-block” will set all links in one line which is by default coming in three different lines and padding will set 0 padding from top bottom and 20px from left and right.

We set a (link anchor tags) to transition effect of all 0.3s ease 0s which will give smooth effect on hover color switch means when color change from first color to second color.

In last, on link hover default color will change to “#0088a9”.


Navbar CTA design
menu CTA CSS styling

In last we will give some beautiful CSS styling to our CTA(call to action) button. So the padding is applied 9px from top & bottom and 25px from left & right. Background color is set to rgba color. Border color is none because we don’t want border but we want rounded corner of button that’s why we have applied 50px border radius from all corner’s. Cursor pointer as you know it will give cursor effect on hover. And transition effect will give smooth effect of 0.3s ease.

For button hover we will just change button color.

So, Congratulations you have just learned how to make the professional looking navigation menu. Which looks like this.

You have just learned how to design navigation menu with flexbox

See the Pen Navbar design 1 by Atul Prajapati (@atulcodex) on CodePen.

By the way, I’m not a born web developer. I have also learned this menu design from skillsthrive youtube video, you can also learn to make this professional looking menu design from that video. Here it is.

Hey dear, if you are completed learning and practising all the steps, So congratulation you have invested your time to learn something valuable. Very few peoples are there who invest their time and effort to learn something, you can also waste your time by watching Netflix and some porn videos too but you are not that kind of guy. Keep learning, keep growing. And you can follow me on my Instagram @atulcodex where I share my skills and pieces of knowledge daily.

atulcodex

Working as a full-time WordPress CMS Developer, learning core languages like HTML, CSS and JavaScript. Started learning web development in 2016 interested in backend development learned PHP very well got a job as a PHP Developer and fired in one week 🙂 Again got a job as a WordPress CMS Developer. Learned JavaScript 4 times yet not understand properly. Now started learning Web Development again from scratch, sharing my journey and knowledge in the form of blog articles. I’m on a mission to learn and share daily.

Leave a Reply