Streaming live at 10am (PST)

Design Help: Transparent Navigation

Hi All,

I am looking for design tips for my websites navigation. I really like the look of transparent navigation on the top of my page but I have to choose my images incredibly carefully to make it standout/visible/readable. I am going to have close to 700 CMS items when I am up and running so carefully choosing every image is out of the question.

How can I make the nav bar stand out while still maintaining the essence of the transparent effect?


Test Site Homepage:

Test Site Package Page:

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

You have a number options here depending on the look your going for. You could give the text aglow, add a white to transparent gradient within the header container going from top to bottom, add a transparent color within the header container (like your doing now) or you could give the entire background image an overlay of semi-transparent color.

I like where your going now with the solid color only within the naviagtion container, but I feel like you could smooth out the harsh transition a bit by either going with an overlay over the entire background image (maybe like a 10-20% white) or by using a white to transparent gradient instead.

@mikeyevin Thanks for the advice! I will give that a try!