Set transparency to Main menu (Employee center navigation widget)

[Muthulakshmi Vi]

Hi All,

I am trying to set transparency to main menu in ESC portal. How do I set transparency without affecting the header color. Header should be in black but main menu should be in transparent (Opacity 0.5). I tried cloning "Employee center navigation widget" and added transparency but the widget has an issue with width, it doesnt fit the image width. I have set to Fluid in width settings too.

I want the first main menu in transparent as the second one. Or second one should fit the widht of the screen. If anyone has faced this please help.

[GarethH1]

In the Employee Center Navigation widget, under CSS, adjust the following in the background-color:

.mega-menu__items {
display: flex;
padding: $sp-space--lg 0 $sp-space--lg $sp-space--lg;
color: $navbar-inverse-link-color;
overflow-x: hidden;
overflow-y: auto;
max-height: calc($mega-menu-max-height - $browse-container-height);
background-color: rgba($sp-navbar-divider-color, 1); //1 is no transparency

==========================================

For the Browse button container, change the following:

.browse-button-container {
border-top: 1px solid darken($sp-navbar-divider-color, 12%);
display: flex;
align-items: center;
padding: $sp-space--lg $sp-space--xl;
background-color: rgba($sp-navbar-divider-color, 0.98); //0.98 is slightly transparent, and the default.