Menu Background Colorfade?

Hi everybody,

is it possible to have the background of the main menu not one color in a certain opacity but a opacity fade from 1 to 0 at the bottom? So there is enough background to read the menu properly but it fades into the site without creating that harsh line?

Best, Tobias

Hi Tobias,

If I could get your query correctly, you would add the below CSS code to Appearance > Customize > Additional CSS from dashboard.

    .site .site-header.float-header {
      background: rgba(0,0,0,0.67);
      background: -moz-linear-gradient(top, rgba(0,0,0,0.67) 0%, rgba(255,255,255,0) 100%);
      background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0.67)), color-stop(100%, rgba(255,255,255,0)));
      background: -webkit-linear-gradient(top, rgba(0,0,0,0.67) 0%, rgba(255,255,255,0) 100%);
      background: -o-linear-gradient(top, rgba(0,0,0,0.67) 0%, rgba(255,255,255,0) 100%);
      background: -ms-linear-gradient(top, rgba(0,0,0,0.67) 0%, rgba(255,255,255,0) 100%);
      background: linear-gradient(to bottom, rgba(0,0,0,0.67) 0%, rgba(255,255,255,0) 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff', GradientType=0 );
      border-bottom: none;
    }

Regards,
Kharis
aThemes Support

Hi Kharis,

this worked, thanks so much!

Regards,
Tobias

1 Like

You’re welcome Tobias!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis
aThemes Support