transparent menu / css - html

Question

I am working on a transparent menu for my site.This is my current code
nav{
display: inline-block;
position:overlay;
top:0;
left:0;
width:100%;
height:80px;
padding: 10px 90px;
box-sizing: border-box;
background: rgba(0,0,0,.5);
}
I want the menu to be transparent like this site
https://www.holeman-finch.com.
Thanks in advance

Answer 1

nav{
display: inline-block;
position:overlay;
top:0;
left:0;
width:100%;
height:80px;
padding: 10px 90px;
box-sizing: border-box;
background: rgba(0,0,0,.5);
margin-bottom:-80px
}

Answer 2

nav{
display: inline-block;
position: overlay;
top:0;
left:0;
width:100%;
height:80px;
padding: 10px 90px;
box-sizing: border-box;
background-color: transparent;
}

Answer 3

On your header element, you can use any transparent background color, for example a very light white transparent shade which will work fine as an overlay on a darker photo:
background-color: #ffffff42;
In order for your header to actually float on top of the photo behind it, add position: fixed; or position: sticky; to it, for example. The same effect can also be achieved with position: absolute; and some extra top, right and left properties.

Answer 4

nav {
max-width: 960px;
/* The mask-image gives us some extra fading. It is not necessary but without this, you can't face out the box-shadows. This clips our menu */
mask-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 25%, #ffffff 75%, rgba(255, 255, 255, 0) 100%);
margin: 0 auto;
/* Using padding instead of margin for the top and bottom here will keep our box-shadow visible and not affected by the mask-image */
padding: 75px 0;
}
nav ul {
text-align: center;
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0) 100%);
width: 100%;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);
}
nav ul li {
display: inline-block;
}
nav ul li a {
padding: 20px;
font-family: "Roboto";
color: rgba(0, 0, 0, 0.5);
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.4);
font-size: 25px;
text-decoration: none;
display: block;
}