Top tabbed menus do not work on mobile

[maneesha]

See a page like test Carpentries site or test Data Carpentry site.

On desktop, we see four tabs across the top (The Carpentries, Data Carpentry, Library Carpentry, Software Carpentry). On mobile, we only see The Carpentries, regardless of what site we are on. It looks like it is supposed to have a drop down menu but that does not seem to work.

[AdamChlan]

@maneesha is the prototype site still available so I can see how this worked on there? I may be using the wrong URL, but I'm not able to get there.

[maneesha]

We don't know if it ever worked. We were not able to test it until we had the packaged theme as we could not apply the theme to the other sites.

This is the original rendered site built from this repo that had theme & content bundled together.

[AdamChlan]

Okay, I was hoping to see how the bootstrap / jekyll handled it. I'll add a simple dropdown

[AdamChlan]

This dropdown is in place on mobile

[maneesha]

This still seems a little buggy. I can now get the drop down menu to show up, but for example: From https://carp-new-website.netlify.app/, I click on the menu, get the dropdown menu. I choose "Data Carpentry" and as expected am taken to https://dc-new-website.netlify.app/. However, "The Carpentries" still displays. If I click on the menu again, the dropdown flashes for a second, and then I am taken straight back to The Carpentries. Now I can again click on the menu and choose something else, and then the same thing happens.

[AdamChlan]

@maneesha did you run a hugo mod get on all your projects? Seems like you need to get those themes updated as well..

[maneesha]

@AdamChlan I have updated the theme on all the project sites and am still seeing this behavior (on my actual phone and emulating various mobile devices using browser inspector).

[maneesha]

Removing "Ready for Review" label as this needs work.

[AdamChlan]

@regisphilibert any thoughts as to why the theme is not updating across all existing site?

[regisphilibert]

Can you share your project's repos @maneesha ?

[maneesha]

All three sites can be viewed starting from here (https://carp-new-website.netlify.app/) and using the tabbed navigation across the top.

Repos:

• The Carpentries
• Data Carpentry
• Library Carpentry
• Software Carpentry

(edit to add link)

[regisphilibert]

@maneesha I can see the god.mod file reference to the theme is different on the two first repos:

The Carpentries: require github.com/carpentries/carpentries-hugo-theme v0.0.0-20240904125853-956418c4b68e // indirect Data Carpentry: require github.com/carpentries/carpentries-hugo-theme v0.0.0-20240830151959-f8a03802275f // indirect

I think the last part of the string is the commit hash.

Have you committed and pushed the two files updated by the hugo mod get command as explained here ?

[maneesha]

The theme has been updated on all four sites (repos above). I am still experiencing the same behavior with the menu not working correctly.

[regisphilibert]

Same behaviour would mean that it's only working on The Carpentries? And not working on all 3 other sites? If yes, is the fontawesome (#21) thing working on all 4 sites now?

[maneesha]

I closed #21 because it turned in to being about mixed markdown/html content, and that has been resolved.

[maneesha]

As for the menus on mobile, it still is not working. Try going to any of the following sites on a mobile device or emulating a mobile device on desktop, and you'll see it always displays only "The Carpentries" on top. Clicking on that usually gives the drop down menu and lets you successfully select one of the other sites, but then "The Carpentries" is still displayed. Font styles change but "The Carpentries" menu display remains.

• The Carpentries
• Data Carpentry
• Library Carpentry
• Software Carpentry

[AdamChlan]

Okay I will take a look

[AdamChlan]

@maneesha I adjusted this menu so that the active site name is always on top, and acts as the trigger for the dropdown menu

[maneesha]

Looks good, thanks!