[Resolved] How to automatically set submenu width?

[Luiz Guilherme]

Hello.
In the Generatepress Pro settings, it is possible to define the width of the Submenu.

I would like something more.

Would it be possible to set the menu so that its width is automatically changed according to the size of the texts?

I tried some things like: width:100% and it didn’t work.

[Leo]

Hi there,

Here are some common options:
https://docs.generatepress.com/article/menu-item-height-width/#sub-menu-item-width

[Luiz Guilherme]

Hey Leo.
Thanks so much for the quick turnaround.

I tested the solution in the link you sent me and it partially worked.

The first item of my sub-menu also had sub-menus,
and in this case the arrow on the right was going down.

The code only worked the way I wanted when I opened this first sub-menu.
It could be because I’m using the menu type:
[Click – menu item].

I didn’t get to test another type because I needed this one.

So I solved the issue by adapting the code you gave me.
It was like this:

.main-navigation ul ul {
  inline-size: max-content;
}

But since I use a different color in the sub-levels of the menu,
I had to add another snippet so that the color fills the entire width:

.main-navigation ul ul ul {
  inline-size: max-content;
  width: auto;
}

Finally, I added this snippet that limits the maximum width of the menu.

.main-navigation:not(.slideout-navigation) ul.sub-menu {
  max-width: 380px;
}

I hope can help others.

If you want see results, see private link below.

[Leo]

Thanks for sharing!

[Author]

Posts