I want to center the portal menu.

Minamizono
Tera Contributor

3 weeks ago

The portal menu is left-aligned by default, but I want it centered.
Can someone tell me how to implement this?

Minamizono_0-1757379396760.png

 

0 Helpfuls
  • 284 Views
1 REPLY 1

KrishnaMohan
Giga Sage

3 weeks ago

Hi @Minamizono 

Not if your pointing to mega menu. if you want align mega menu, follow below steps. 

Create a Style Sheet Record:

  1. Navigate to Service Portal > CSS.

  2. Click New.

  3. Give your stylesheet a descriptive Name (e.g., csm header menu custom style).


    KrishnaMohan_1-1757383300032.png

     

  4. Paste your custom CSS code into the CSS field. You can use standard CSS or SCSS.

@media (min-width: 768px) {
    .navbar-nav {
       float : none;
        margin: 0;
    }
.navbar-nav{
 display : flex;
 justify-content : center;
  }
}

KrishnaMohan_2-1757383381645.png

 

  • Save the record.

Add the Style Sheet to a Theme:

  1. Navigate to Service Portal > Themes.

  2. Open the theme record that is associated with your Service Portal (you can find this by going to Service Portal > Portals, opening your portal, and checking the Theme field).

    KrishnaMohan_3-1757383492775.png

     

  3. Scroll down to the CSS Includes related list.

  4. Click Edit.

    KrishnaMohan_4-1757383615618.png

     

  5. Move your newly created Style Sheet record from the slushbucket on the left to the CSS Includes list on the right.

     

KrishnaMohan_6-1757383729273.png

 


KrishnaMohan_5-1757383653966.png 

   6. set the Order for your CSS Include. Lower numbers load first. You'll want to ensure your custom CSS loads after the default theme CSS to override it effectively. A common practice is to use a higher number (e.g., 100 or more) to ensure it loads later or give the highest number to override the all css includes as shown below.

KrishnaMohan_7-1757383855828.png

 

7 . save 

 

 

Result :

KrishnaMohan_8-1757383944557.png

 

 

 

Note :  Instead of customizing/changing/modifying widgets directly , above steps centralizes your custom styles, making them easy to manage, update, and apply consistently across all pages and widgets within your portal. It follows best practices for web development by separating styling from the content and logic.

 

If this helped to answer your query, please mark it helpful & accept the solution.
Thanks!
Krishnamohan

 

0 Helpfuls