CMS Development

saustwick
Mitglied

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

lösung

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 Akzeptierte Lösung
Philip_Marsh
Lösung
Mitwirkender/Mitwirkende

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

lösung

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

 

 

 

Lösung in ursprünglichem Beitrag anzeigen

10 Antworten
saustwick
Mitglied

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

lösung

Thanks Philip! Perfect!

saustwick
Mitglied

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

lösung

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
Lösung
Mitwirkender/Mitwirkende

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

lösung

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
Mitglied

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

lösung

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
Mitwirkender/Mitwirkende

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

lösung

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
Mitglied

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

lösung

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
Mitwirkender/Mitwirkende

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

lösung

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

0 Upvotes
jonchim
Ratgeber/-in | Diamond Partner
Ratgeber/-in | Diamond Partner

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

lösung

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






Jon Chim
VP of Design & Development
Hypha HubSpot Development


check Did my post help answer your query? Help the Community by marking it as a solution
Philip_Marsh
Mitwirkender/Mitwirkende

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

lösung

Can you provide a link to the page, please?

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

Thanks

dennisedson
HubSpot-Produktteam
HubSpot-Produktteam

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

lösung

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 😀

0 Upvotes