Set transparency to Main menu (Employee center navigation widget)

Muthulakshmi Vi
Tera Contributor

‎06-27-2024 11:28 AM

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.

MuthulakshmiVi_0-1719512768743.png

 

0 Helpfuls
  • 414 Views
1 REPLY 1

GarethH1
Tera Contributor

‎04-10-2025 10:13 AM - edited ‎04-10-2025 10:14 AM

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.

0 Helpfuls