Less Than 10 Lines of CSS to Create a Responsive Nav Menu

Mandeep Debnath — Sat, 12 Oct 2019 13:34:24 +0000

Creating navigation menus are now as easy as swiping right on Tinder :P with only less than 10 lines of CSS.

Thanks to FlexBox! FlexBox is a 1D property and that's enough for a nav menu. No more floating lefts and rights, all you need is a list of menu items inside 'ul' tag. Add your logo in that list too.

Here's the HTML:

Now comes the CSS part. You just have to set the display property of the ul to 'flex' and the necessary padding.

Here's the CSS:

Now we want to push the menu to the right and the logo to the left, right? But we can't use float. We will just use one line of CSS for the '.logo' class.

Do you see that 'margin-right: auto' property??
That is doing the whole magic. That is filling all the white-spaces to the right of the logo with the menu items. That gives us the logo on the left and the menu items on the right. Isn't that awesome?

Here's the output

And that was all. That's all you need to know to create a responsive nav menu. Now to go to the next level, you can add media queries to change the menu for different devices.

Here's a simple media query for an iPad device

You can also check it out on my CodePen profile

Thanks for reading it to this far. I'm still working on my explanations. I know, I'm no expert. I'm just a learner.
You can share any of your feedback, I appreciate all. Thanks!

5 Useful Tools Every Front-end Developer Should Know About

Mandeep Debnath — Fri, 11 Oct 2019 15:06:40 +0000

As a front-end developer, your job is to take care of the look and feel of a website by adding cool interactions, color combinations, animations, and great visual designs. But not all of us are very creative when we are on the text editor, right? (I'm not).

So, sometimes we need to shift ourselves from the editor to other tools so that we can see the design possibilities before actually writing it.

So, here I'm gonna list 5 tools that will boost your creativity and inspire you to create more beautiful and interactive designs.

5. REMOVE.BG

I can understand that when you ask for a transparent PNG image from your client, but you end up getting a JPEG? This tool is a time-saver unless you wanna use photoshop to manually remove the background of an image. With this tool, you can remove the image background for FREE.

4. Clippy

I'm sure you know about the clip-path property. The clip-path property allows you to make complex shapes in CSS by clipping an element to a basic shape (circle, ellipse, polygon, or inset), or to an SVG source. But isn't it quite frustrating to imagine the shape and then code it?? This tool will allow you to create the shape and give you the CSS snippet for it.

3 GradPad

Nowadays gradients are in trend (I'm personally not so fond of it :p). And if you like gradients but confused about the right combinations, this tool will be very helpful for you. GradPad allows you to generate CSS color gradients and then gives you the CSS snippet for it.

2 Trianglify.IO

Trianglify.IO is a low-poly pattern generator. You can choose the available color palette or make a custom palette for your pattern. Just choose the variance and cell-size. You can then export the low-res preview of the pattern. You can get it in high-res PNG and SVG by paying $4.

1 Keyframes

Creating animations has got a lot easier. Keyframes gives you a visual timeline to help you create, view, and run animations without having to go back and forth between your browser and editor. And it gives you the CSS snippet when you're done. You can either use the extension or the web app. With the extension, you can animate any element of any website you are on.

Thanks for reading it to the end

This was my first post and I'm still understanding this editor.

I'll love it if you give your feedback. Thank you!

DEV Community: Mandeep Debnath