Translucent navbar options

HTML & CSS
1

The site header includes a full width banner image, a floating navigation bar and a headline. The responsive navigation uses the checkbox hack to toggle the visibility of the navigation bar.
The navigation bar background opacity reveals the headline when the navigation bar is visible.

Normally this would not be a problem if the navigation bar background was a solid color. However the background opacity reveals the headline diluting the emphasis of the navigation bar menu items.

How can I hide the headline when the responsive navigation bar is visible?
In other words when the navbar toggle check box reveals the menu items the headline disappears, when the menu bar is hidden the headline displays.

Please let me know if the explanation is clear. Please see the test link with a viewport of max 980px.

test link: http://photoshopace.com/transfer/PS/translucent-navbar/partials/template-header1.html

2

I solved it by adding the onclick event to the checkbox hack. The onclick event calls a javascript function with an if statement. If the headline is visible fade out, else fade in the headline.

3

Yes it would have been awkward to solve using CSS and would have required a different html structure to do it anyway.

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.