The CreatorCon Call for Content is officially open! Get started here.

Center Header in UI Builder

Aaron Dalton
Tera Expert

Hello! I'm working on a portal using UI Builder in San Diego on my PDI. Similar to NowSupport, the Developer Site, and others I'd like to center the header and add margin so it isn't at the far ends of the screen. I've tried to do this using the Theme by adding various classes to it such as "canvas-heading-container--margin": "auto" or "canvas-heading-nav--margin": "auto", but neither provide the desired result.

I can add styling to things that have a variable on the css property already (var(--now-color--primary-0), for instance), but for css properties not controlled with a variable, does anyone know if it's possible to add/modify those?

Here's what it looks like out of the box:

find_real_file.png

Ideally, I'd want to make the classes sn-canvas-header-nav and sn-canvas-menu-nav look like this:

find_real_file.png

 find_real_file.png

find_real_file.png

 

1 ACCEPTED SOLUTION

Brad Tilton
ServiceNow Employee
ServiceNow Employee

Hi Aaron, I don't think this is currently possible through CSS, unfortunately.

View solution in original post

2 REPLIES 2

Brad Tilton
ServiceNow Employee
ServiceNow Employee

Hi Aaron, I don't think this is currently possible through CSS, unfortunately.

Ah, unfortunate - perhaps one day. Appreciate the reply, Brad!