Craft theme - how to change dropdown menu width

Technical Q&A
1

Hello there,

Hope somebody can help me.

I am adding dropdown menus but when I have more items, the menu is just keeping growing downside and it’s getting quite long (please refer to the attached screenshot).

Is there an option to display the dropdown menu in a different way?

Thank you!

2

Hi @Renko2022 ,

Go to Assets > base.css and paste this at the bottom of the file:

.header__submenu.list-menu--disclosure details {
	position: relative;
}
.header__submenu:not(.list-menu--disclosure) {
	position: absolute;
    left: 100%;
    top: 0;
    width: 100%;
    background: #fff !important;
    margin-left: 1px;
}

Hope it helps!

1 Like
3

Thank you, @LitExtension ! In addition, I would like to ask you one more question, regarding this solution. Is it possible to somehow set this menu configuration so the menu options won’t overlap when the user clicks on one option and then, without clicking the arrow to collapse it, clicks on the other option to expand it?
The solution could be that if the user clicks on one option to expand it, the other options should be automatically collapsed. Also, the solution could be to make the menu wider, displaying the options through the sides (please refer to the other screenshot, to see what I mean).

Please find attached a zip file, with the screenshot so you can better understand the issue.

Regards,

Renko

4

Hi @Renko2022 ,

It will be a complicated request, you need to add Javascript for it. Therefore, it will be difficult for me to guide you in detail.

I recommend hiring a professional for this.

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.

1 Like
5

@LitExtension Got it, thank you for your help!

1 Like