Increase the width of child

[ageevmark]

How can I increase the width of the block with child links when the sidebar is collapsed? I am adding the following in the component's styles:

.v-sidebar-menu .vsm--child { width: 500px !important; }

But it doesn't help.

[yaminncco]

You could try

.v-sidebar-menu .vsm--child_mobile {
  width: 500px !important;
}
.v-sidebar-menu .vsm--link_mobile .vsm--title {
  width: 500px !important;
}
.v-sidebar-menu .vsm--mobile-bg {
  /* width + sidebar width on collapse mode */
  width: calc(500px + 65px) !important;
}

[ageevmark]

Thank you for your help. I am now closing this issue.

[ageevmark]

The styles you suggested worked, but I've encountered a new problem. After adding the styles, there is now a delay in the animation. (Attached a video)

This delay doesn't occur if I comment out the following lines: .v-sidebar-menu .vsm--mibile-bg { width: calc(500px + 75px) !important; } However, without these lines, the width of the ”child" title reverts to the standard width.

Help me please.

https://github.com/user-attachments/assets/f6ea8eab-8c25-4ac2-9721-641ab2e7ec2f

Uploading VID_20240731_160752.mp4…

[yaminncco]

!important is overring the width transition so you need to re-add this after:

.v-sidebar-menu .slide-animation-enter-from,
.v-sidebar-menu .slide-animation-leave-to {
  width: 0 !important;
}

[ageevmark]

thank you