Jump to content

Mobile navigation menu folder item & flex-direction issues

Recommended Posts

Site URL: https://www.amparo.world/home-en

The desktop version of my site works well, however the mobile site navigation has some item display issues that I cannot seem solve:

  • Some Folder items do not show at all (e.g. 'PRODUKTE')
    • This is only on some folders for some reason

 

  • Folder items (again, only some???) display horizontally without any clear form of separation (e.g 'PRODUCTS'). I want them to display vertically/ as a single column
    • I managed to fix this on my desktop site with this CSS (doesn't work for mobile):
      •  
         .Header-nav-folder-item {
            height: unset !important;
            width: unset !important;
            display: flex !important;
            flex-direction: column;
        }

         

Can anyone advise me on why this might be - or even better provide me with a work around 🙂

 

Would really appreciate any help

 

FYI: these irregularities do not show on desktop mobile previews (on chrome at least), and to see them you need to see the site on a phone

 

Useful info about the menu/nav:

The website is in 2 languages, and to solve this someone put some code to only display menu/nav items if the url linked ends in either -en or -de (English or German). this works well on desktop (although not ideal) and I am not looking to change it at the moment. However it would be great to know how to get it to work on mobile as well, as it does not work on mobile. the code for that is here:

<script>
window.onload = function() {
  if(window.location.pathname == '/') {
    return;
  }

  var
    // pattern     = /-(en|de)\/?#?.*$/,
    pattern     = /-(en|de)\/?(#.+)?$/i,
    lang        = window.location.pathname.match(pattern)[1],
    links       = document.getElementsByTagName('a'),
    langPattern = new RegExp('-' + lang + '\/?(#.+)?$', 'i')
  ;

  for(var i = 0; i < links.length; i++) {
    var link = links[i];

    if(/amparo\.world/.test(link.href) && pattern.test(link.href)) {
      link.style.display = langPattern.test(link.href) ? 'inline' : 'none';
    }
  }
};
</script>

 

Link to comment
  • Replies 0
  • Views 326
  • Created
  • Last Reply

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.