Issue with child menu items width restricted by parent menu item width

Developer Support CMS Development
1

I’m having issues with allowing the child menu list to display on 1 line, instead of wrapping to the witdh of the parent menu item.

Any idea how to amend the css to allow the submenu page title to show full width and not wrap over 2 lines? thanks in advance!

the default-module css code is as follows:

.hs-menu-wrapper ul {
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding-left: 0;
}

/* Horizontal menu */

.hs-menu-wrapper.hs-menu-flow-horizontal .hs-menu-children-wrapper {
flex-direction: column;
}

@media (max-width: 767px) {
.hs-menu-wrapper.hs-menu-flow-horizontal ul {
flex-direction: column;
}
}

/* Vertical menu */

.hs-menu-wrapper.hs-menu-flow-vertical ul {
flex-direction: column;
}

/* Flyouts */

.hs-menu-wrapper.hs-menu-flow-vertical.flyouts ul {
display: inline-flex;
}

@media (max-width: 767px) {
.hs-menu-wrapper.hs-menu-flow-vertical ul {
display: flex;
}
}

.hs-menu-wrapper.flyouts .hs-item-has-children {
position: relative;
max-width: 200px;
}

.hs-menu-wrapper.flyouts .hs-menu-children-wrapper {
left: -9999px;
opacity: 0;
position: absolute;
}

.hs-menu-wrapper.flyouts .hs-menu-children-wrapper a {
display: block;
white-space: nowrap;
}

.hs-menu-wrapper.hs-menu-flow-horizontal.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper {
left: 0;
opacity: 1;
top: 100%;
}

.hs-menu-wrapper.hs-menu-flow-vertical.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper {
left: 100%;
opacity: 1;
top: 0;
}

@media (max-width: 767px) {
.hs-menu-wrapper.flyouts .hs-menu-children-wrapper,
.hs-menu-wrapper.hs-menu-flow-horizontal.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper,
.hs-menu-wrapper.hs-menu-flow-vertical.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper {
left: 0;
opacity: 1;
position: relative;
top: auto;
}
}

2

Hi, @JLeach18 :waving_hand: Thanks for your question.

Have you tried removing the max-width: 200px; rule in the .hs-menu-wrapper.flyouts .hs-item-has-children class? Or using min-width: 200px; instead?

Please let us know if you have any additional questions.

Best,

Jaycee

3

Thanks! I removed it and then added the min-width as well in another instance and it worked as I wanted, thanks for your input!