Change the navbar position in portal which is built via UI Builder

priyankar umesh
Tera Contributor

Hello Everyone 

 

I am stuck in one requirement where I need to shift the navbar of portal which is build via UI Bulder. I tried but not able to do it. 

Attaching the screenshot of that nav bar which need to be shifted to right.

7 REPLIES 7

pratikjagtap
Giga Guru

Hi @priyankar umesh ,

try below steps.

1.Identify the Navbar Component
Open UI Builder in ServiceNow.

Select the Navbar component inside your layout.

2. Modify the Layout in UI Builder
If the navbar is inside a Container, try changing the alignment settings:

Select the Navbar Component

Look for Alignment or Justification settings

Set it to "End" or "Right"

3. Apply Custom CSS (If UI Builder Doesn't Have Direct Alignment)
You can manually add CSS to shift the navbar to the right.

Try adding this CSS inside your theme style settings:

 

.navbar-class {
display: flex;
justify-content: flex-end; /* Moves navbar to the right */
width: 100%;
}

If the navbar is inside a flexbox container, try:

 

.navbar-container {
margin-left: auto;
}

 

4.Check Parent Container Settings
If the navbar is inside another component (like a Grid or Flex container), make sure its alignment allows shifting.

Set Justification to End/Right in the parent container.

5. Save and Publish
Save the changes in UI Builder.

Publish the experience to see the effect.

 

If this solution helps you then, mark it as accepted solution ‌‌✔️ and give thumbs up 👍 !

 

Regards,

Pratik

Hello Jagtap 
Accidently I accepted the solution but its not correct.
Apologise  for replying late. This nav bar is not a component. Its coming from somewhere else. and I am not able to target CSS there.

Shivalika
Mega Sage

Hello @priyankar umesh 

 

Did you try changing the CSS of this navbar ? Can you share your CSS ?

 

Kindly mark my answer as helpful and accept solution if it helped you in anyway. This will help me be recognized for the efforts and also move this questions from unsolved to solved bucket. 

 

Regards,

 

Shivalika 

 

My LinkedIn - https://www.linkedin.com/in/shivalika-gupta-540346194

 

My youtube - https://youtube.com/playlist?list=PLsHuNzTdkE5Cn4PyS7HdV0Vg8JsfdgQlA&si=0WynLcOwNeEISQCY QQ

Hello Shivalika 
I am not able to find where to write CSS of this nav bar as this nav bar is not a part of component.