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

**URL:** <https://community.hubspot.com/t/issue-with-child-menu-items-width-restricted-by-parent-menu-item-width/85780>\
**Category:** CMS Development\
**Tags:** professional\
**Created:** [July 20, 2023, 3:26pm UTC](https://community.hubspot.com/t/issue-with-child-menu-items-width-restricted-by-parent-menu-item-width/85780 "2023-07-20T15:26:13Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![JLeach18](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@JLeach18](https://community.hubspot.com/u/JLeach18)\
**Post date:** [July 20, 2023, 3:26pm UTC](https://community.hubspot.com/t/issue-with-child-menu-items-width-restricted-by-parent-menu-item-width/85780/1 "2023-07-20T15:26:13Z")

</div>

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](https://community.hubspot.com/t5/user/viewprofilepage/user-id/83477) (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](https://community.hubspot.com/t5/user/viewprofilepage/user-id/83477) (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](https://community.hubspot.com/t5/user/viewprofilepage/user-id/83477) (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;  
}  
}

---

<div class="post-metadata">

**Author:** ![Jaycee\_Lewis](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jaycee_lewis/32/61352_2.png) [@Jaycee\_Lewis](https://community.hubspot.com/u/Jaycee_Lewis)\
**Post date:** [July 21, 2023, 9:13pm UTC](https://community.hubspot.com/t/issue-with-child-menu-items-width-restricted-by-parent-menu-item-width/85780/2 "2023-07-21T21:13:43Z")

</div>

Hi, @JLeach18 👋 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

---

<div class="post-metadata">

**Author:** ![JLeach18](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@JLeach18](https://community.hubspot.com/u/JLeach18)\
**Post date:** [July 24, 2023, 12:46pm UTC](https://community.hubspot.com/t/issue-with-child-menu-items-width-restricted-by-parent-menu-item-width/85780/3 "2023-07-24T12:46:02Z")

</div>

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!