100 Days of Code Journey: Day 17 — Navigation Bars

Aamir Hussain
Jul 23, 2017 · 2 min read

What I did on Day 17?

I started building my second web project, and have almost completed the navigation bar with scroll animation and added a background image. Result:

How do I feel about my progress on Day 16?

I have made the navigation bar transparent at the top of the screen, and added a background to it when the page is scrolled down. I am having a bit of difficulty making the background, stretch the full width of the page and stay at the top when scrolling. Like I said yesterday there is a lot of trying things to see what looks best (different opacity, font sizes, padding etc). Although progress is slow, I am enjoying seeing things turn out the way I want them and sometimes even better. For example, for the background image, I layered an opaque black background on the image to reduce its brightness, as the white text was washing out in the background, and I feel the result is decent.

Plan for Day 18.

  1. Improve the navigation bar making it scrollable, full width and fixed to the top.
  2. Add more sections to the page (testimonials, pricing, team, footer).
  3. Add back to top arrow button in the footer.

Thanks for following my 100 days of code journey.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade