Help with Hiding Horizontal Scroll in Menu Bar Component

Ignition
,
1

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

2

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

3

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

4

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

5

This is my CSS stylesheet code,

image
image833×274 8.08 KB

and here is the applied component property style.

image
image815×499 31.6 KB

6

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
Menu-Tree-Inspect1310×195 18.1 KB

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

Menu-Tree-Style
Menu-Tree-Style503×108 2.86 KB

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:

.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.

7

Sure @Zachary Thank you!!

1 Like