Style 7.1 mobile menu so that links in dropdown folders are on main menu page

Greetings,

Does anyone know of a way to style the 7.1 mobile menu so that any dropdown menus (links in folders) are displayed as part of the navigation list on the main mobile menu page? Right now clicking on the hamburger in the site header brings you to a page with a list of nav links and any folders have an arrow to the right requiring you to click onwards to another page in order to see the dropdown links. I'd like them to display as part of the main list, ideally as indented subcategories.

I've attached 2 screenshots of how it works now... the third image is the way I'd like it to look (photoshopped).

Seems like this would already be a Squarespace feature, maybe I'm missing something? Surely a more efficient way to navigate the mobile menu than clicking through to extra screens.

Thanks!

Hi. Can you share site url & Which plan do/will you use?
I remember I solved a similar case a few months ago.

Yes, the site url is www.pollyking.com (business plan)

Thanks for you help!

Did you find an answer? I'd also like to know how to achieve this!

I'm going to try and implement this onto my site, but as someone with very minimal experience with code, could you please confrim @creedon if i copy the code from this point

<style>
  
    .header-menu-nav-folder {
    

or rather including your intro and outro...

<!--
  begin menu mobile outline

Thanks so much for this code and your help!!

@bepawa

Please include all the code.

@creedon I have two folder on my site but only want one folder to be effected by this code what piece of code would I be able to define this? 

The folder name is shop-1

Site isn't currently live.

9 hours ago, darkfuse said:

Site isn't currently live.

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

I have updated my cited code in my November 21, 2021 post.

From the change notes.

• fix for blowing away menu action and cta elements
• fix for layout issues, use ul instead of divs

@Sharla

You've customized your mobile menu with CSS. I suggest removing those changes temporarily. Make a copy of your code. Then see what the default style looks like and then apply your changes, redesigning them as needed.

On 11/21/2021 at 5:39 PM, creedon said:

@ed.design @HannahRoseShaw

Please see Menu Mobile Outline.

Let us know how it goes.

I posted a question earlier regarding this type of mobile nav layout. I tried to utilize this code and now my mobile nav shows the main nav links and the subcategories in one big list vs. in hamburger dropdown fashion. How can I arrange them into a dropdown? 

On 9/29/2022 at 3:14 AM, artbar said:

I posted a question earlier regarding this type of mobile nav layout. I tried to utilize this code and now my mobile nav shows the main nav links and the subcategories in one big list vs. in hamburger dropdown fashion. How can I arrange them into a dropdown? 

What is your site url? We can check easier

I’ve created a mobile menu, after a few hours, but it’s not too shabby. I built my own because all of the suggestions didn’t do exactly what I needed. 

www.shopartbar.com 

Is it possible to code in a sort by > price (at the very least) on each shop page? Without a plug in? I’ve avoided plug ins for the most part and could invest a few more hours highjacking code and recreating it but I don’t desire that path ha-ha…. 
 

TIA

Hi guys! 
How can I display the links (pages) in dropdown folders on the menu page of my mobile menu, so that they can be displayed as part of the navigation list.

Right now, clicking on the hamburger brings you to a page with a list of navigation links and any folders have an arrow. I'd like the links (pages) in dropdown folders to display as part of the main list, ideally as indented subcategories.

Thank you in advance!

On 11/22/2021 at 6:39 AM, creedon said:

@ed.design @HannahRoseShaw

Please see Menu Mobile Outline.

Let us know how it goes.

This works for me. But I'm not too happy with the end result.
The spacing is changed, and also it's always visible.

Ideally I wanted there to be like a drop down arrow and make it clickable so that then it shows the underlying menu-items.

It's live on jiwajiwa.com

On 11/21/2021 at 5:39 PM, creedon said:

@ed.design @HannahRoseShaw

Please see Menu Mobile Outline.

Let us know how it goes.

Hey @creedon Do you know why this code would make account login appear in the nav?

I cant give out the password for the site, but I did remove the code and it removed the account login.

Thanks!

6 hours ago, nicolettely said:

Do you know why this code would make account login appear in the nav?

If I had to guess it's an unintended bug. The code is basically rebuilding the mobile menu into an HTML outline destroying some of SS's menu structure code.

I'd have to be able to see the code in your situation to be able to diagnose. Can you share password via direct message?

I have updated my cited code in my November 21, 2021 post.

From the changes.

fix for user accounts info showing when it shouldn't

18 hours ago, creedon said:

I have updated my cited code in my November 21, 2021 post.

From the changes.

fix for user accounts info showing when it shouldn't

Perfect! Thank you!

Thank you creedon! your code worked perfectly! 

Now on mobile the links that were in a dropdown menu are visible as part of the main menu, the arrows are gone and you don't have to click thru to another menu page. Clean & simple.

Hi @creedon your code has worked perfectly however I'd like to adjust the font size and perhaps add a dropdown arrow for each folder instead of all the sub-pages always being visible. Is there a way for me to do that with your code?

Adding font-size into the css doesn't seem to be changing the font size!

Screenshots attached of how it looks currently and the goal (designed on Illustrator) - thank you!

5 hours ago, OCT said:

however I'd like to adjust the font size

I would think this should be fairly easy with some CSS.

Quote

perhaps add a dropdown arrow for each folder instead of all the sub-pages always being visible. Is there a way for me to do that with your code?

I not sure off the top of my head if this could be done with my code as it is now.

Please post the URL for a page on your site where we can see your issue.

A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

We can then take a look at your issue.

You may find How to post a forum question post useful.

I have updated my cited code in my November 21, 2021 post.

From the changes.

• add expandable feature

Hi @creedon, thank you so much for this code and all the efforts. I've implemented it on my website and it seems to work as it should.

Would it be possible to have the folder header clickable whith your code? Before it was working thanks to this:

<!-- clickable folder header start --------->
<script>
(function () {
  let folders;

  function rebuildAnchor(folder) {
    let parent = folder.closest('.header-nav-item--folder'),
        href = folder.href.includes('.com') ? folder.href.split('.com')[1].replace("-folder/", "") : folder.href.replace("-folder/", ""),
        anchorClone = folder.cloneNode(true);

    anchorClone.classList.add('clickable-folder');
    anchorClone.setAttribute('href', href);
    anchorClone.style.cssText = `
          opacity: 1;
          transform: unset;
    `;
    parent.insertAdjacentElement('afterbegin', anchorClone);
    if (href == window.location.pathname) {
      console.log()
      anchorClone.closest('.header-nav-item--folder').classList.add('header-nav-item--active')
    }
  }

  function addToMobile(folder) {
    let href = folder.getAttribute("href"),
        hrefAdjusted = href.includes('.com') ? href.split('.com')[1].replace("-folder/", "") : href.replace("-folder/", ""),
        text = folder.innerText,
        newText = `All ${text}`,
        mobileFolder = document.querySelector(`[data-folder="${href}"]`),
        backButton = mobileFolder.querySelector(".header-menu-nav-folder-content > *:first-of-type"),
        allButton = `<div class="container header-menu-nav-item header-menu-nav-item--external">
  				<a href="${hrefAdjusted}">${newText}</a>
			<div>`;

    backButton.insertAdjacentHTML('afterend', allButton)
  }

  /* Select All Folder Links &  */
  function setFolderLinks() {
    folders = document.querySelectorAll('.header-display-desktop .header-nav-folder-title[href*="-folder/"]');

    for (let folder of folders) {
      window.addEventListener('load', function() {
        addToMobile(folder);
        rebuildAnchor(folder);
        folder.remove();
      });
    }
  }

  setFolderLinks();
})();
</script>
<!-- clickable folder header end --------->

It is still implemented on my website but its effects on mobile are 0 now. 

my website: https://watermelon-sponge-6pkp.squarespace.com/

thank you so much

1 hour ago, Sitar said:

Would it be possible to have the folder header clickable whith your code?

Does the --twc-hmmo-expandable CSS variable in the header menu mobile outline.less file do what you want?

Quote

Before it was working thanks to this:

My code rebuilds the mobile menu so it's not surprising that any code written for the SS default menu structure would stop working.