<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css" style="display:none;"> P {margin-top:0;margin-bottom:0;} </style>
</head>
<body dir="ltr">
<div style="font-family: Calibri, Arial, Helvetica, sans-serif; font-size: 12pt; color: rgb(0, 0, 0);">
It isn't possible to do so. <span style="background-color:rgb(255, 255, 255);display:inline !important">Most notably because it wouldn't work well on tablets.</span></div>
<div style="font-family: Calibri, Arial, Helvetica, sans-serif; font-size: 12pt; color: rgb(0, 0, 0);">
<br>
</div>
<div style="font-family: Calibri, Arial, Helvetica, sans-serif; font-size: 12pt; color: rgb(0, 0, 0);">
</div>
<div style="font-family: Calibri, Arial, Helvetica, sans-serif; font-size: 12pt; color: rgb(0, 0, 0);">
On tablets you wouldn't be able to trigger the dropdown but would instead follow the link. </div>
<div style="font-family: Calibri, Arial, Helvetica, sans-serif; font-size: 12pt; color: rgb(0, 0, 0);">
We could of course then try to differentiate between touching the arrow vs touching the text, but the click target area would be really small and make for a bad UI in my opinion.</div>
<div style="font-family: Calibri, Arial, Helvetica, sans-serif; font-size: 12pt; color: rgb(0, 0, 0);">
<br>
</div>
<div style="font-family: Calibri, Arial, Helvetica, sans-serif; font-size: 12pt; color: rgb(0, 0, 0);">
On laptops/desktop there is the opposite issue, where there is a fair chance no one will ever notice that the top level item is clickable. This isn't an issue if all you do on that page is a short intro with links to the subpages, but if you have more content
then it is a shame that laptop users won't notice.</div>
<div style="font-family: Calibri, Arial, Helvetica, sans-serif; font-size: 12pt; color: rgb(0, 0, 0);">
<br>
</div>
<div style="font-family: Calibri, Arial, Helvetica, sans-serif; font-size: 12pt; color: rgb(0, 0, 0);">
It also put restraint on what we can do in the future if we decide to trigger dropdowns on click instead of the current hover. And it would make mobile navigation more convoluted if we decided to collapse menu items in the burger (those 3 lines) menu.</div>
<div style="font-family: Calibri, Arial, Helvetica, sans-serif; font-size: 12pt; color: rgb(0, 0, 0);">
<br>
</div>
<div style="font-family: Calibri, Arial, Helvetica, sans-serif; font-size: 12pt; color: rgb(0, 0, 0);">
I see these options</div>
<div style="font-family: Calibri, Arial, Helvetica, sans-serif; font-size: 12pt; color: rgb(0, 0, 0);">
<br>
</div>
<div style="font-family: Calibri, Arial, Helvetica, sans-serif; font-size: 12pt; color: rgb(0, 0, 0);">
<b>Options 1</b></div>
<div style="font-family: Calibri, Arial, Helvetica, sans-serif; font-size: 12pt; color: rgb(0, 0, 0);">
Keep the top level link and remove the dropdown.</div>
<div style="font-family: Calibri, Arial, Helvetica, sans-serif; font-size: 12pt; color: rgb(0, 0, 0);">
The landing page would then link to the items previously in the dropdown (you could use a
<a href="https://hp-base-theme.gbif-staging.org/layout/documentation" title="https://hp-base-theme.gbif-staging.org/layout/documentation">
documentation</a> layout or <a href="https://hp-base-theme.gbif-staging.org/layout/compose" title="https://hp-base-theme.gbif-staging.org/layout/compose">
compose a landing page using features</a>)</div>
<div style="font-family: Calibri, Arial, Helvetica, sans-serif; font-size: 12pt; color: rgb(0, 0, 0);">
<br>
</div>
<div style="font-family: Calibri, Arial, Helvetica, sans-serif; font-size: 12pt; color: rgb(0, 0, 0);">
<b>Option 2</b></div>
<div style="font-family: Calibri, Arial, Helvetica, sans-serif; font-size: 12pt; color: rgb(0, 0, 0);">
Create a dropdown with the content</div>
<div style="font-family: Calibri, Arial, Helvetica, sans-serif; font-size: 12pt; color: rgb(0, 0, 0);">
<ul>
<li>MenuItem</li><ul>
<li> Introduction (this would be the page you otherwise had attached to MenuItem)</li><li> subitem 1</li><li> subitem 2</li></ul>
</ul>
<div><br>
</div>
<div>And finally we can of course reconsider if we should support it if there is a general interest in it.</div>
<div><br>
</div>
<div>I will be happy to discuss workarounds for your particular task - just create an issue in your repo or write me an email.</div>
<div><br>
</div>
<div>Best</div>
<div>Morten</div>
</div>
<div id="appendonsend"></div>
<hr style="display:inline-block;width:98%" tabindex="-1">
<div id="divRplyFwdMsg" dir="ltr"><font face="Calibri, sans-serif" style="font-size:11pt" color="#000000"><b>From:</b> Hosted-Portals <hosted-portals-bounces@lists.gbif.org> on behalf of Camila Andrea Plata Corredor <cplata@humboldt.org.co><br>
<b>Sent:</b> Wednesday, February 24, 2021 2:48 AM<br>
<b>To:</b> hosted-portals@lists.gbif.org <hosted-portals@lists.gbif.org><br>
<b>Subject:</b> [Hosted-Portals] Add a landing page to the name of the dropdown menu</font>
<div> </div>
</div>
<div>
<div dir="ltr">
<div>Dear all,</div>
<div><br>
</div>
<div>We have a question about the menu structure set at _config.yml, It is possible to add a landing page to the name of the dropdown menu?</div>
<div><br>
</div>
For example, we would like to add the option to click in Layouts (<a href="https://hp-base-theme.gbif-staging.org/">https://hp-base-theme.gbif-staging.org/</a>) and open a page, for that we tried using the following structure, and other variants, but it didn't
work:
<div><br>
- text: Name<br>
<b>href: /Name</b><br>
menu: # Dropdown menu (one level deep only)<br>
- text: ...</div>
<div><br>
</div>
<div><span id="x_gmail-docs-internal-guid-7623ddb3-7fff-dbda-7b2d-326ac0159d5f"><span style="font-size:12pt; font-family:Calibri,sans-serif; color:rgb(0,0,0); background-color:transparent; font-variant-numeric:normal; font-variant-east-asian:normal; vertical-align:baseline; white-space:pre-wrap"><span style="border:none; display:inline-block; overflow:hidden; width:624px; height:379px"><img width="624" height="379" style="margin-left:0px; margin-top:0px" src="https://lh5.googleusercontent.com/9BQRnT2jw8OZ_cBsoe6iAhpi13uZn1sHPK38FVvUotwC3WkDItvWa2kbi51B-JsEUouCYbqLM3-gXjCm_UDgn49jfBlJX0r0Yd2Ni8k5KuiT9bevfKXEMiml-kLA73YeOfeL9HJ1"></span></span></span><br>
<br>
It is possible to have such a landing page? How can we do it?<br>
<div><br>
</div>
<div>
<div>Thank you in advance,</div>
<font color="#888888">
<div><br>
</div>
<div>
<div><br>
</div>
--
<div dir="ltr">
<div style="width:350px; padding:20px; margin-top:20px; margin-left:5px">
<div style="width:350px">
<div style="color:rgb(77,111,93); font-weight:bold; margin-bottom:5px; font-size:0.9em">
<span style="font-size:14px"><span style="font-family:Georgia,serif">Camila Andrea Plata Corredor</span></span></div>
<div style="margin-bottom:20px; color:rgb(157,157,156); font-size:0.8em"><span style="font-size:12px"><span style="font-family:Georgia,serif"><i>Equipo Coordinador Sistema de
Información sobre Biodiversidad de Colombia</i></span></span></div>
</div>
</div>
</div>
</div>
</font></div>
</div>
</div>
</div>
</body>
</html>