Vertical navigation bar & a responsive drop down menu
Zidan posted 2 months ago

Hello Chris,

First of, great job regarding this forum, love it!

& i'am watching a lot of your videos, great stuff.

Second, I've been practicing frond end (HTML, CSS & JS) for about 2 months now, and so far I have 2 front end problems in my test project that will most likely sound silly xD.

1: i'm trying to make a vertical navigation bar inspired from windows 10 groove music application, not sure if you're familiar with it and it seems i cant attach an image to the post so you can always just google the app if its not so much of a hassle xD, the problem is, I cant seem to create the blurred transparent background and cant have the buttons next to the icons appear smoothly while the div width expands from 3% to 10% and vice versa, I can send you an image or a video for clarification via whatever if you wish.

2: i have a set of icons that on click they show a menu, so each icon shows a different menu and the hole thing is inside a responsive div with each menu appearing on click under its icon, the problem is that when the div width decreases, the menus no longer appear perfectly under their corresponding icon, am using "left" to position the menus with a percentage.

your help is very much appreciated.

chris posted 2 months ago

Hey man, glad you like things so far! Can help you out a bit for sure:

1. To get a nice background blur, you'll want to use a blur texture as a background image, then ensure its semi-transparent with opacity:


Code example here:

Typically for sidebars like the Groove app, I keep them at a fixed width, because if you think about it, what use does a responsive sidebar really have when something always looks good at one particular size?

Usually I shrink my main content, but keep something small like a sidebar static, then re-arrange things on mobile once I'm below 768 pixels.

Let me know if that helps!

Zidan posted 2 months ago

helps big time!, the code example link is not working tho, am getting a 404 (Page Not Found)

chris posted 2 months ago

Oh woops, I think I added a period by accident, try


Want to participate?

Create a free Chris Courses account to begin

Sign In
Cheat Sheet Preview

Download The Official Chris Courses HTML5 Canvas Cheat Sheet

Essential canvas syntax at your fingertips.

Download Cheat Sheet

Providing the lift to launch your development career

© 2020 Chris Courses. All rights reserved.