# Custom Module Navigation - Child Items always visible and effects parent nav width.

**URL:** <https://community.hubspot.com/t/custom-module-navigation-child-items-always-visible-and-effects-parent-nav-width/29013>\
**Category:** CMS Development\
**Created:** [December 10, 2020, 2:25pm UTC](https://community.hubspot.com/t/custom-module-navigation-child-items-always-visible-and-effects-parent-nav-width/29013 "2020-12-10T14:25:25Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![saustwick](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/saustwick/32/59606_2.png) [@saustwick](https://community.hubspot.com/u/saustwick)\
**Post date:** [December 10, 2020, 2:25pm UTC](https://community.hubspot.com/t/custom-module-navigation-child-items-always-visible-and-effects-parent-nav-width/29013/1 "2020-12-10T14:25:25Z")

</div>

I’ve created a custom module which includes a nav menu. The nav includes a parent item with some child items. When viewed the child items always display and the child items make the parent item width huge!

This is what it looks like:

![35239i60CE8BC6D83F63C4.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/2/9/29eacb7bde66bf223db9689747a24598e5fbce5d.png)

I’ve set up the menu item like this:

{% menu id=“{{ module.menu\_field }}”, flyouts=“{{ module.flyouts }}” %}

flightouts is a booleen.

---

<div class="post-metadata">

**Author:** ![dennisedson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dennisedson/32/28044_2.png) [@dennisedson](https://community.hubspot.com/u/dennisedson)\
**Post date:** [December 11, 2020, 2:23pm UTC](https://community.hubspot.com/t/custom-module-navigation-child-items-always-visible-and-effects-parent-nav-width/29013/2 "2020-12-11T14:23:35Z")

</div>

Hi @saustwick!

Welcome to the Community!

It would help if you could provide a link to an example page (preview link would be perfect!)

@jonchim and @pm8rsh88 are some super stars and probably can help you out once we get that link 😀

---

<div class="post-metadata">

**Author:** ![pm8rsh88](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/pm8rsh88/32/78471_2.png) [@pm8rsh88](https://community.hubspot.com/u/pm8rsh88)\
**Post date:** [December 11, 2020, 2:31pm UTC](https://community.hubspot.com/t/custom-module-navigation-child-items-always-visible-and-effects-parent-nav-width/29013/3 "2020-12-11T14:31:16Z")

</div>

Can you provide a link to the page, please?

I’ll take a look and try and help as best I can.

Thanks

---

<div class="post-metadata">

**Author:** ![jonchim](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jonchim/32/88818_2.png) [@jonchim](https://community.hubspot.com/u/jonchim)\
**Post date:** [December 11, 2020, 3:37pm UTC](https://community.hubspot.com/t/custom-module-navigation-child-items-always-visible-and-effects-parent-nav-width/29013/4 "2020-12-11T15:37:08Z")

</div>

Thanks @pm8rsh88! my guess with the menu is probably few tweaks in the CSS

---

<div class="post-metadata">

**Author:** ![saustwick](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/saustwick/32/59606_2.png) [@saustwick](https://community.hubspot.com/u/saustwick)\
**Post date:** [January 21, 2021, 12:17pm UTC](https://community.hubspot.com/t/custom-module-navigation-child-items-always-visible-and-effects-parent-nav-width/29013/5 "2021-01-21T12:17:08Z")

</div>

Hi guys

Sorry for the delays - I was pulled over to another project. This is he link to the project

[http://www-corvid-co-uk.sandbox.hs-sites.com/](http://www-corvid-co-uk.sandbox.hs-sites.com/)  
Thanks in advance.

---

<div class="post-metadata">

**Author:** ![pm8rsh88](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/pm8rsh88/32/78471_2.png) [@pm8rsh88](https://community.hubspot.com/u/pm8rsh88)\
**Post date:** [January 21, 2021, 12:26pm UTC](https://community.hubspot.com/t/custom-module-navigation-child-items-always-visible-and-effects-parent-nav-width/29013/6 "2021-01-21T12:26:10Z")

</div>

Try CSS Styling like this

```lia-code-sample
.main-nav ul ul {
 display: none;
 flex-direction: column;
 padding-left: 0;
}

.main-nav ul li:hover>ul {
 display: block;
}

```

---

<div class="post-metadata">

**Author:** ![saustwick](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/saustwick/32/59606_2.png) [@saustwick](https://community.hubspot.com/u/saustwick)\
**Post date:** [January 21, 2021, 12:35pm UTC](https://community.hubspot.com/t/custom-module-navigation-child-items-always-visible-and-effects-parent-nav-width/29013/7 "2021-01-21T12:35:06Z")

</div>

Thanks - this solves my dropdown not being a drop down but when I hover over the parent the whole menu item shifts to fit the width of the a links.

---

<div class="post-metadata">

**Author:** ![pm8rsh88](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/pm8rsh88/32/78471_2.png) [@pm8rsh88](https://community.hubspot.com/u/pm8rsh88)\
**Post date:** [January 21, 2021, 12:36pm UTC](https://community.hubspot.com/t/custom-module-navigation-child-items-always-visible-and-effects-parent-nav-width/29013/8 "2021-01-21T12:36:31Z")

</div>

Glad that worked. Leave it with me and I’ll modify the code a little

---

<div class="post-metadata">

**Author:** ![saustwick](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/saustwick/32/59606_2.png) [@saustwick](https://community.hubspot.com/u/saustwick)\
**Post date:** [January 21, 2021, 12:39pm UTC](https://community.hubspot.com/t/custom-module-navigation-child-items-always-visible-and-effects-parent-nav-width/29013/9 "2021-01-21T12:39:43Z")

</div>

Thanks - I’ve just popped something in which seems to be part way there but if feels a bit rough! I’ve added white-space:nowrap to the \<a\> and set a specific width to the parent (hs-item-has-children) but this causes the dropdown to push the centrally aligned tagline to move when the child menu opens.

---

<div class="post-metadata">

**Author:** ![pm8rsh88](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/pm8rsh88/32/78471_2.png) [@pm8rsh88](https://community.hubspot.com/u/pm8rsh88)\
**Post date:** [January 21, 2021, 12:45pm UTC](https://community.hubspot.com/t/custom-module-navigation-child-items-always-visible-and-effects-parent-nav-width/29013/10 "2021-01-21T12:45:07Z")

</div>

A position absolute will resolve this.

Remove the Width and White-space and try this.

```lia-code-sample
.main-nav ul ul {
 display: none;
 flex-direction: column;
 padding-left: 0;
}

.main-nav ul li:hover>ul {
 display: block;
 position: absolute;
}

```

---

<div class="post-metadata">

**Author:** ![saustwick](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/saustwick/32/59606_2.png) [@saustwick](https://community.hubspot.com/u/saustwick)\
**Post date:** [January 21, 2021, 12:59pm UTC](https://community.hubspot.com/t/custom-module-navigation-child-items-always-visible-and-effects-parent-nav-width/29013/11 "2021-01-21T12:59:08Z")

</div>

Thanks Philip! Perfect!