CMS Development

saustwick
メンバー

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

解決

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 いいね!
1件の承認済みベストアンサー
Philip_Marsh
解決策
投稿者

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

解決

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

 

 

 

元の投稿で解決策を見る

10件の返信
saustwick
メンバー

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

解決

Thanks Philip! Perfect!

saustwick
メンバー

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

解決

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 いいね!
Philip_Marsh
解決策
投稿者

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

解決

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
メンバー

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

解決

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 いいね!
Philip_Marsh
投稿者

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

解決

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
メンバー

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

解決

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 いいね!
Philip_Marsh
投稿者

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

解決

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

0 いいね!
jonchim
ガイド役 | Diamond Partner
ガイド役 | Diamond Partner

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

解決

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
投稿者

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

解決

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製品開発チーム
HubSpot製品開発チーム

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

解決

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 いいね!