topic Re: Custom Module Navigation - Child Items always visible and effects parent nav width. in CMS Development

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

saustwick — Thu, 10 Dec 2020 14:25:25 GMT

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:

I've set up the menu item like this:

{% menu id="{{ module.menu_field }}", flyouts="{{ module.flyouts }}" %}

flightouts is a booleen.

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

dennisedson — Fri, 11 Dec 2020 14:23:35 GMT

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 😀

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

pm8rsh88 — Fri, 11 Dec 2020 14:31:16 GMT

Can you provide a link to the page, please?

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

Thanks

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

jonchim — Fri, 11 Dec 2020 15:37:08 GMT

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

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

saustwick — Thu, 21 Jan 2021 12:17:08 GMT

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/

Thanks in advance.

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

pm8rsh88 — Thu, 21 Jan 2021 12:26:38 GMT

Try CSS Styling like this

.main-nav ul ul { display: none; flex-direction: column; padding-left: 0; } .main-nav ul li:hover>ul { display: block; }

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

saustwick — Thu, 21 Jan 2021 12:35:06 GMT

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.

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

pm8rsh88 — Thu, 21 Jan 2021 12:36:31 GMT

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

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

saustwick — Thu, 21 Jan 2021 12:39:43 GMT

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.

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

pm8rsh88 — Thu, 21 Jan 2021 12:46:42 GMT

A position absolute will resolve this.

Remove the Width and White-space and try this.

.main-nav ul ul { display: none; flex-direction: column; padding-left: 0; } .main-nav ul li:hover>ul { display: block; position: absolute; }

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

saustwick — Thu, 21 Jan 2021 12:59:08 GMT

Thanks Philip! Perfect!