Meet Navio !
Tags: css, webdev, beginners, opensource
Published: 2023-02-10 23:04:41

Hello There !
Today's article is a little bit different than usual , it's not about .Net or C#. However , it's about CSS.

I've used CSS for quite a while and still up to this point , I struggle with it a lot , maybe because of the fact that I've been always procrastinating on watching a CSS course , but yeah , I can use CSS nevertheless , although , one part of the page I mostly focus too much on when starting a new project , is the **Navigation Bar** , and often times I find myself wasting plenty of time and energy in making that good looking Nav Bar , subsequently , I got bored from that , and I didn't also appreciate working with Bootstrap pre designed Nav Bars that kind of look a bit lame , despite the fact that it's also burdensome to customize Bootstrap , so , I decided to make a small **Github Repository** that goes by the name 
**Navio** , and in this article , I want to introduce you to that simple open source project.


## What is Navio ?
Put simply , Navio is a collection of Navigation bar designs that you can copy and paste straight into your project , but please keep in mind that the designs I've made aren't super professional , but they serve as decent templates that you could then build upon , at the time of writing this article , Navio has **5** Nav bar designs , which realistically isn't much to choose from , but I made a basic template that can be easily used as a blueprint to build far better designs , but it's a good starting point that you could use maybe as a placeholder to fill in the gap , or something to keep there , I also created a file called **SchemeConfiguration.css** , this is a **CSS** file that contains variables for customizing the colors, adjusting the font sizes , and altering the transition periods , the file is pretty easy and everything is self explanatory , in case you decided to use any of the designs , make sure to add this CSS file and link it to your HTML.

**Navio** is written using **HTML** and **Vanilla CSS** , only one design at this moment requires a **JS** file to make an interactive menu button.

 

![Navio Bars Collection](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h2wte8jq8ktob6aqo4su.jpg)


This is a quick depiction of the available designs at this moment , I tried to keep the styling and markup as simple as possible , so you can understand what's going easily without getting mad at who wrote all of that nonsense 😂


One design I like the most is the design with the **search button** , this search is completely animated and it looks lovely , additionally , the designs are responsive which means they adapt to different screen aspect ratios , I left a **read me** text file in the repository , it contains some useful info about how to customize things and the like , so make sure to see what's in it.

This project is not professional or industry level by any means , although the designs are good looking and useable in case you are a solo developer or a small team of devs that don't want to put much time in the design process , this could help speed things up a notch , but yeah , have fun with it and mess around with the designs , you might end up with something fascinating.

The repository link is here:
https://github.com/rasheed-k-mozaffar/Navio

That's about it for today's article , if you have any suggestions , please inform me in the comments , I would then attempt to correct any mistakes in case there's any.

Also , let me know what you think , and should I keep working on it or not ?