I changed the main menu of my blog, because I wanted to get rid of the hamburger menu on the upper left, which was shown only for smartphones, but was not really reachable conveniently. Beside that it made no sense to have different navigations for different devices.
My choice was to implement a horizontal scrolling menu, which can grow over the time, without any need of customizing. As I have quite big header images and I wanted to place the new navigation in a more accessible zone, I decided to place it at the bottom, but above the header image.
Problem was, not to cover a big part of the image with a full-colored or even semitransparent bar, by using a RGBA background color. I wanted it more translucent, but with enough contrast on bright images for the menu items to read.
The recently introduced W3C feature
backdrop-filter was just the right thing for that. It is supported by most modern browsers, but it has to have a backup strategy for the rest of the bunch.
The HTML is simple:
<nav id="header-nav" role="navigation">
And here’s the Stylus code for my approach:
The navigation box is
absolute positioned on the image, is as wide as the screen and scrolls exclusively horizontal. The items are a unordered list, with default width and arranged by
In case a browser doesn’t understand
backdrop-filter, the navigation bar is shown with a classic alpha channel opacity.
When having a horizontal scroll feature, the scrollbar shown by the browser is beyond beautiful. To prevent this, I used the CSS pseudo element
::-webkit-scrollbar, which is supported by WebKit and Blink bowsers, with a fallback for all other browsers. Both strategies allows to be still able to scroll. If you want to have a scrollbar, but not the built-in, I can only recommend to read something about styling scrollbars, like here and here.