My first responsive navigation bar.

Through the past one month, I had a mentor and a partner I was accountable for through the SCA Unilag Accountability program. I am most thankful for the opportunity as I wasn't really an implementer before the program.

I started practicing and learning thanks to the aforementioned and freecodecamp.

Today, I'll be sharing my experience on working with navigation bars.

Navigation bars are the first things you see. They are one item that prove the responsiveness of your page. So far, I had tried various things on my own but many didn't work because I possessed knowledge without the understanding of courses I had taken.

I'm not going to be giving steps on how to make a responsive navbar but I'm going to be giving tips on what and how you navbar should look like on both a desktop site and a mobile device.

1. The display of your navigation should be either inline or the flex-direction should be in the row format.

2. There should be three groups namely, the logo and/or name in one, the list items in another and a button in the last.

3. The navigation bar should be a considerable light colour with a small height.

4. The font weight of the bar should be bold and 300 isn't really advised.

5. The fonts must be visible.

6. The present page should be highlighted using a class active and some CSS.

7. When hovering over the items, there should be colour changes and a box shadow below or around the bar.

8. In mobile view, the navigation bar should only contain the first group and the last. The second group should be hidden.

The mobile view's navigation bar requires some jQuery and CSS.

Here's a link to a blog post that can help with the mobile view of the navigation bar. The link: [itnext.io/how-to-create-a-responsive-naviga..

Bye everyone, I hope to share more tips next time.