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

SOLVE
saustwick
Member

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:

saustwick_0-1607610291037.png

 

 

I've set up the menu item like this:

 

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

 

flightouts is a booleen.

0 Upvotes
1 Accepted solution

Accepted Solutions
Philip_Marsh
Solution
Contributor

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

 

 

 

View solution in original post

10 Replies 10
dennisedson
Community Manager

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 😀

Thanks,

Dennis



Check out our Community Developer Blog
where we feature our Community driven developer podcast and how to content
0 Upvotes
Philip_Marsh
Contributor

Can you provide a link to the page, please?

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

Thanks

jonchim
Top Contributor | Diamond Partner

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






Jon Chim
Design Director
Morey Creative Studios


check Did my post help answer your query? Help the Community by marking it as a solution
saustwick
Member

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.

0 Upvotes
Philip_Marsh
Contributor

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
Member

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.

0 Upvotes
Philip_Marsh
Contributor

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

0 Upvotes
saustwick
Member

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.

 

0 Upvotes
Philip_Marsh
Solution
Contributor

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

 

 

 

View solution in original post

saustwick
Member

Thanks Philip! Perfect!