Service Portal Configuration - Transparent Menu Bar

SupraEdd
Tera Contributor

‎12-20-2024 02:30 AM

Hi all, continuing to re-design our Service Portal, I'm trying to make the Menu Bar transparent, so the background image continues to the top of the screen.

We are on Washington, and have the SP Enterprise Service Management and La Jolla Branding plugins installed.

 

I've found some info out there but its a few years old (Madrid version from what I can tell), mostly around adding this CCS to the page

 

/* Transparent Menu Bar */
.navbar-inverse.navbar {
    background-color: transparent;
    border-bottom: 0px;
    position: absolute;
    width: 99%;
    z-index: 200;
}
/* Menu Item Background */
#sp-nav-bar {
    background-color: rgba(46, 46, 46, .80);
    border-radius: 0 0 0 8px;
    padding-right: 8px;
    margin-right: 0 !important;
}
div.ng-scope.hidden-xs.cbe98a8d2cb20020000f8d856634c9c63 {
    margin-top: -70px;
  	padding-top:150px;
}
/* Logo Background */
div.navbar-header {
  background-color: rgba(46, 46, 46, .80);
  border-radius: 0 0 8px 0;
}


But I am struggling to work out where this CSS should be added to, perhaps the La Jolla them page or SP Header Menu.
Perhaps someone may have a more up to date way to achieve this?

Any help would be appreciated. Thanks in advance.

0 Helpfuls
  • 557 Views
2 REPLIES 2

Community Alums
Not applicable

‎12-23-2024 08:12 PM

Hi @SupraEdd ,

The main issues with your implementation were:

  1. Placement of CSS: You were unsure where to add the CSS. The correct locations are the Theme's CSS field or the CSS Includes for a specific page, not scattered in multiple places.

  2. Incomplete or Outdated Selectors: Some selectors you used (e.g., .cbe98a8d2cb20020000f8d856634c9c63) were likely auto-generated class names from older instances, which might not apply to your version (Washington).

  3. Missing !important Tags: Without !important, your custom styles may not override ServiceNow’s default or plugin-applied styles.

  4. Box Shadow and Spacing: You didn't address unnecessary box shadows, spacing, or other visual elements, which can interfere with transparency.

 try with this CSS code.

 

/* Transparent Menu Bar */
.navbar-inverse.navbar {
    background-color: transparent !important;
    border: none;
    position: absolute;
    width: 100%;
    z-index: 200;
    box-shadow: none;
}

/* Menu Item Background */
#sp-nav-bar {
    background-color: rgba(46, 46, 46, 0.8) !important; /* Adjust opacity as needed */
    border-radius: 0 0 8px 8px;
    margin: 0 !important;
    padding: 10px;
}

/* Adjust for Background Image */
div.ng-scope.hidden-xs {
    margin-top: -70px;
    padding-top: 150px;
}

/* Logo Background */
div.navbar-header {
    background-color: rgba(46, 46, 46, 0.8) !important;
    border-radius: 0 0 8px 0;
}

/* Remove default menu spacing */
.navbar-header img {
    margin: 0 !important;
    padding: 5px !important;
}

/* Ensure Content Below Menu */
body {
    margin-top: 100px; /* Adjust based on menu bar height */
}

 

 

 

0 Helpfuls

Community Alums
Not applicable

‎12-23-2024 08:23 PM

Hi @SupraEdd ,

Here’s an updated CSS script with a clean and modern design using a decent color combination:

/* Transparent Menu Bar */
.navbar-inverse.navbar {
    background-color: rgba(255, 255, 255, 0.7); /* Light transparent white */
    border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* Subtle border for separation */
    position: absolute;
    width: 100%;
    z-index: 200;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Light shadow for depth */
}

/* Menu Items */
#sp-nav-bar {
    background-color: rgba(0, 123, 255, 0.8); /* Light transparent blue */
    border-radius: 0 0 8px 8px; /* Rounded bottom corners */
    padding: 8px 16px;
    margin: 0;
    font-family: 'Arial', sans-serif;
    color: #fff; /* White text */
}

#sp-nav-bar a {
    color: #fff; /* Ensure links are white */
    font-weight: bold;
    padding: 8px 16px;
    transition: color 0.3s, background-color 0.3s;
}

#sp-nav-bar a:hover {
    background-color: rgba(255, 255, 255, 0.2); /* Subtle hover effect */
    color: #007bff; /* Blue hover text */
}

/* Logo Background */
div.navbar-header {
    background-color: rgba(0, 123, 255, 0.9); /* Solid blue background for the logo */
    border-radius: 0 0 8px 0;
    padding: 8px;
}

/* Spacing and Layout Adjustments */
div.ng-scope.hidden-xs {
    margin-top: -50px;
    padding-top: 100px;
}

/* General Page Background */
body {
    background: linear-gradient(120deg, #007bff, #ffffff); /* Blue to white gradient */
    color: #333; /* Neutral text color for better readability */
}

/* Box Shadow for Buttons */
button,
.navbar .btn {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}

/* Responsiveness */
@media (max-width: 768px) {
    #sp-nav-bar {
        background-color: rgba(0, 123, 255, 1); /* Solid blue for smaller screens */
    }
}
0 Helpfuls