in the employee center Topic Menu, I'm having this Scroll bar beside all child topics irrespective o

MohitSaxena
Tera Contributor

2 hours ago

in the employee center Topic Menu, I'm having this Scroll bar beside all child topics irrespective of the number of child topic-1 (even in two, it is showing the scroll bar)

This configuration is coming from :Employee Center Navigation Widget, Can someone help me to remove this scroll bar, And it should expend till the last Child Topic in the container.

 

03089e2c-0605-4acd-9c38-e8ef1dff041b.jpg

 

0 Helpfuls
  • 88 Views
3 REPLIES 3

Matthew_13
Tera Guru

49m ago

 

The scrollbar appears because the Employee Center Navigation widget container has a fixed height and overflow-y: auto.

Fix:

Add a CSS override to let the container expand with its content:

.child-topics-container {
  max-height: none !important;
  overflow-y: visible !important;
}

  • Add this in your portal/theme CSS (not the widget code) to stay upgrade-safe.

  • Now the container will grow to fit all child topics, and the scrollbar disappears.

Note while doing: For very long lists, consider collapsible submenus for usability.

 

@MohitSaxena  - Give a Thumbs up and Accepted Solution if you find Helpful!

0 Helpfuls

MohitSaxena
Tera Contributor
In response to Matthew_13

15m ago

Hi @Matthew_13  thanks for the reply,

I don't know why, But this is not working.

I tried to use this all of below class in Theme's CSS

.child-topics-container
also .sub-topics-container
mega-menu_items

MohitSaxena_0-1766421792511.png

MohitSaxena_1-1766421919733.png

 

reference pic from my PDI

 

0 Helpfuls

Matthew_13
Tera Guru
In response to MohitSaxena

7m ago - last edited 5m ago

 

Two issues jump out from your screenshot/config: 🤔

  1. You’re missing the “.” (class selector) on the mega menu class

  • You have mega-menu_items but it must be:

 

.mega-menu_items { ... }

  1. Your Theme CSS may be getting overridden (specificity/order)
    Even with the correct selector, Service Portal widgets (especially header/mega-menu) often ship with more-specific selectors, so your rule loads but loses in the cascade. Do this:

A) Combine and increase specificity

#sp-nav-bar .child-topics-container,
#sp-nav-bar .sub-topics-container,
#sp-nav-bar .mega-menu_items {
  /* your styles */
}

If you still see your rule crossed out in DevTools, temporarily confirm override with:

#sp-nav-bar .child-topics-container,
#sp-nav-bar .sub-topics-container,
#sp-nav-bar .mega-menu_items {
  /* your styles */
  background: rgba(255,0,0,.1) !important;
}

(Then remove !important once you’ve found the right selector/specificity.)

B) Validate it’s actually loading

  • Open DevTools → Sources (or Network) and confirm your theme CSS file is loading.

  • Hard refresh (Ctrl+F5) / open an incognito session to bypass cached portal assets.

C) If it’s a widget-scoped header/mega-menu

If the element is rendered by the Header / Mega Menu widget, the most reliable place is often that widget’s CSS (or a clone of the widget), not Theme CSS—because the widget’s CSS can be loaded later and win by default.

@MohitSaxena  - Give a Thumbs up and Accepted Solution if you find Helpful!

0 Helpfuls