Portal CSS modification help

[snowcone]

I'm able to change CSS in browser (see image below), but how can I make this change in the Portal record - CSS Variables?

I tried this but it is not working

.navbar-brand span {
max-width: none
}

TIA

[wojasso]

Hi @snowcone

In the Service Portal, the CSS Variables field on a Portal record is only for setting Sass variables used by the out‑of‑box themes. It doesn’t inject arbitrary CSS into the page. To override styles like the brand text width you need to add custom CSS to the portal’s theme or page.

• Open Service Portal > Portals, open your portal record and follow the link to its Theme. In the theme record you’ll find a CSS or SCSS field where you can add global overrides.
• You can also add page‑specific CSS by editing the CSS field on an individual page record.
• Use the correct selector for the header and mark the style as important to override the framework’s max‑width. For example:

#header .navbar-brand span {
  max-width: none !important;
  white-space: normal;
}

After saving the theme or page, clear your browser cache or append ?sysparm_preview=true to force a fresh load. Your portal will then apply the new CSS without needing browser tweaks.

💥 Was this answer useful? 👉 If so, click 👍 Helpful 👍 or Accept as Solution ✅ 💡🛠️😀🙌

[snowcone]

@wojasso you are correct, I was trying to modify the CSS variables in the theme.

What you gave did not help. 

Here is what I'm trying to get working
.v35a1d6868759e250fd6c0f280cbb3560 .navbar-brand span {
margin-left: 0rem;
margin-right: 0rem;
margin-top: .5rem;
margin-bottom: .5rem;
display: block;
max-height: 4rem;
/* max-width: 36rem; */
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}

[iuris]

Hi @snowcone !

I had the same issue before — sometimes the CSS just doesn’t apply because of how the Service Portal loads theme and widget styles.

What worked for me was using !important in the CSS to force the override. For example:

.v35a1d6868759e250fd6c0f280cbb3560 .navbar-brand span {
margin-left: 0rem !important;
margin-right: 0rem !important;
margin-top: .5rem !important;
margin-bottom: .5rem !important;
display: block !important;
max-height: 4rem !important;
/* max-width: 36rem; */
position: relative !important;
top: 50% !important;
-webkit-transform: translateY(-50%) !important;
-ms-transform: translateY(-50%) !important;
transform: translateY(-50%)  !important;
}

Also, make sure you're adding your custom CSS either in a CSS Include that's linked to your portal theme, or directly in the widget (if it's something specific). The important thing is that the style needs to be more specific or loaded after the default styles — and !important really helps when nothing else works.

Hope that helps!