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

[saustwick]

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.

[saustwick]

Thanks Philip! Perfect!

[saustwick]

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.

[Philip_Marsh · Accepted solution]

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;
}

[saustwick]

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.

[Philip_Marsh]

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;
}

[saustwick]

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.

[Philip_Marsh]

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

[jonchim]

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

[Philip_Marsh]

Can you provide a link to the page, please?

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

Thanks

[dennisedson]

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 @Philip_Marsh  are some super stars and probably can help you out once we get that link 😀