# Help with Hiding Horizontal Scroll in Menu Bar Component

**URL:** <https://forum.inductiveautomation.com/t/help-with-hiding-horizontal-scroll-in-menu-bar-component/103202>\
**Category:** Ignition\
**Tags:** scripting, perspective\
**Created:** [March 4, 2025, 12:09pm UTC](https://forum.inductiveautomation.com/t/help-with-hiding-horizontal-scroll-in-menu-bar-component/103202 "2025-03-04T12:09:53Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![ARIFRAHUMAN\_A](https://avatars.discourse-cdn.com/v4/letter/a/e19b73/32.png) [@ARIFRAHUMAN\_A](https://forum.inductiveautomation.com/u/ARIFRAHUMAN_A)\
**Post date:** [March 4, 2025, 12:09pm UTC](https://forum.inductiveautomation.com/t/help-with-hiding-horizontal-scroll-in-menu-bar-component/103202/1 "2025-03-04T12:09:53Z")

</div>

I have used a menu bar component, but a horizontal scrollbar appears. I want to hide the scrollbar, but I tried setting `overflow-x: hidden` using css style, and it’s not working.

Does anyone know how to resolve this? Please share your suggestions!

Thanks & Regards,  
Arifrahuman A

---

<div class="post-metadata">

**Author:** ![Zachary](https://avatars.discourse-cdn.com/v4/letter/z/90db22/32.png) [@Zachary](https://forum.inductiveautomation.com/u/Zachary)\
**Post date:** [March 4, 2025, 12:24pm UTC](https://forum.inductiveautomation.com/t/help-with-hiding-horizontal-scroll-in-menu-bar-component/103202/2 "2025-03-04T12:24:53Z")

</div>

Are you placing the CSS style in the advance stylesheet? Or are you using the style property on the component its self?

---

<div class="post-metadata">

**Author:** ![ARIFRAHUMAN\_A](https://avatars.discourse-cdn.com/v4/letter/a/e19b73/32.png) [@ARIFRAHUMAN\_A](https://forum.inductiveautomation.com/u/ARIFRAHUMAN_A)\
**Post date:** [March 5, 2025, 3:58am UTC](https://forum.inductiveautomation.com/t/help-with-hiding-horizontal-scroll-in-menu-bar-component/103202/3 "2025-03-05T03:58:56Z")

</div>

I have tried both styles, but they are not working.

---

<div class="post-metadata">

**Author:** ![Zachary](https://avatars.discourse-cdn.com/v4/letter/z/90db22/32.png) [@Zachary](https://forum.inductiveautomation.com/u/Zachary)\
**Post date:** [March 5, 2025, 12:11pm UTC](https://forum.inductiveautomation.com/t/help-with-hiding-horizontal-scroll-in-menu-bar-component/103202/4 "2025-03-05T12:11:14Z")

</div>

Okay, could you provide some screen shots of your styling? With advanced style sheets and on the style property itself?

---

<div class="post-metadata">

**Author:** ![ARIFRAHUMAN\_A](https://avatars.discourse-cdn.com/v4/letter/a/e19b73/32.png) [@ARIFRAHUMAN\_A](https://forum.inductiveautomation.com/u/ARIFRAHUMAN_A)\
**Post date:** [March 6, 2025, 6:20am UTC](https://forum.inductiveautomation.com/t/help-with-hiding-horizontal-scroll-in-menu-bar-component/103202/5 "2025-03-06T06:20:45Z")

</div>

This is my CSS stylesheet code,

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/1/21dd753c5f252c3239c682bece4d6c32c216cd2a.png)

and here is the applied component property style.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/8/38a7a4c52791e70a4f9d0c1c51e0f258dce6e62b.png)

---

<div class="post-metadata">

**Author:** ![Zachary](https://avatars.discourse-cdn.com/v4/letter/z/90db22/32.png) [@Zachary](https://forum.inductiveautomation.com/u/Zachary)\
**Post date:** [March 6, 2025, 12:45pm UTC](https://forum.inductiveautomation.com/t/help-with-hiding-horizontal-scroll-in-menu-bar-component/103202/6 "2025-03-06T12:45:59Z")

</div>

Okay so I recreated your scenario and found what the issue was. On the menu tree component there is a div called menu-wrapper wrapper root.

 ![Menu-Tree-Inspect](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/5/e586411b639bd9b6494d67c7c373d5d20ffaa8e0.png)

There was a style being applied to this root which was over riding the style you had made.

 ![Menu-Tree-Style](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/4/247065c81d7d8fc155aa267b8df4de11fe729bd6.png)  
As you can see the overflow was being set to auto. ~~And because you where targeting the overflow-x, this overflow was not being overridden.~~ Edit: It's because overflow is not inherited by child HTML components in CSS

In your advanced stylesheet you can target this class like so:

```python
.menu-tree .menu-wrapper {
	overflow-y: auto;
	overflow-x: hidden;
}

```

For future reference, always inspect the element if there is a style that is not being applied. It's certainly tripped me up a couple of times.

---

<div class="post-metadata">

**Author:** ![ARIFRAHUMAN\_A](https://avatars.discourse-cdn.com/v4/letter/a/e19b73/32.png) [@ARIFRAHUMAN\_A](https://forum.inductiveautomation.com/u/ARIFRAHUMAN_A)\
**Post date:** [March 7, 2025, 4:56am UTC](https://forum.inductiveautomation.com/t/help-with-hiding-horizontal-scroll-in-menu-bar-component/103202/7 "2025-03-07T04:56:26Z")

</div>

Sure @Zachary Thank you!!