Having Trouble Adjusting Mobile Menu Items Alignment and Spacing on 7.1

Hi! I'm trying to evenly space out my mobile navigation items (page titles) in the mobile overlay menu and my code that usually works doesn't seem to have any effect. I've successfully set a photo on my mobile nav menu overlay background and customized the size of my mobile navigation items text to 25px, but the height and alignment of my nav items isn't responding to my css.

Attached are the photo examples of what I have right now and what I want it to look like once the alignment code works in my favor.

And here is the code I am currently using (all of it seems to be responding on my site, except for the first "space-evenly" alignment bit):

// mobile menu spacing and size
.header-menu-nav-folder-content {
    justify-content: space-evenly!important;
}

.container.header-menu-nav-item {
    padding-left: 1vw;
}

.header-menu-nav-item a { font-size: 25px; }

//mobile menu backgr photo
.header-menu .header-menu-bg{
  background-image: url(https://static1.squarespace.com/static/60ff71961937ff050b281e36/t/6580beebae1e435ed34f401c/1702936299881/jm_mobile_menu+%281%29.png);
  background-size: cover;
}

9 hours ago, Ziggy said:

I think that you're going to have a very difficult time aligning the links to the background image as different phones (and tablets) will size the image differently to fit the space, this code might get you closer. The 11vh value is the top+bottom margin for the links, and it the value you will want to tinker with to get it to look where you want it.

.header-menu-nav-folder-content {
    justify-content: flex-start;
}
.header-menu-nav-item a {
    margin: 11vh 5vw;
}

 

Thank you!

I hear what you're saying about the image size variation on different mobile devices, I figured I'd try this method out to as a first step toward the ultimate desired outcome. But that bit of code solved my nav item spacing and alignment issue, so thank you!

Do you happen to know if there is a way to rename the title of a nav item so that it only appears changed on mobile?

I know the general renaming function is inside of a given page's settings tab, but that would change the way it appears on the nav menu both on desktop and mobile. If I'm able to customize the page title on just mobile menu view, I wouldn't have to add the dots and number to the photo and have that resizing problem. 

41 minutes ago, jeanneemariee said:

Do you happen to know if there is a way to rename the title of a nav item so that it only appears changed on mobile?

There is a way to do this. In a media query so that it only happens on mobile, you could edit the content of the <a> tag. Something like this:
 

.header-menu-nav-item a:after {
    content: ".....1";
}

However, this would append the 1 to every a tag in the nav menu. To give each their respective number, you could use nth-child selector, which would look like this:

.header-menu-nav-item a:after {
    content: ".....";
}

.header-menu-nav-item a:nth-child(1):after {
    content: ".....1";
}

.header-menu-nav-item a:nth-child(2):after {
    content: ".....2";
}

/* Add more rules for additional elements if needed */

This works, but you're hard coding the css of each individual link. If you were to add more, you'd have to also add more css. Therefore, a cleaner solution would be to use JavaScript, like so:

<script>
document.addEventListener('DOMContentLoaded', function () {
  	// Check if the viewport width is below 768 pixels, set to whenever the hamburger menu appears
    if (window.innerWidth < 768) {
      var aNav = document.querySelectorAll('.header-menu-nav-item a');

      aNav.forEach(function (element, index) {
          // Create a new span element
          var span = document.createElement('span');
          // Set the content of the span element
          span.textContent = '.....' + (index + 1);
          // Insert the span element after the anchor element
          element.insertAdjacentElement('afterend', span);
      });
     }
});
<script>

The script first checks the viewport width, and then grabs the <a> navigation items. For each item, it will add a <span> element after the <a> element. We're also able to style the <span> element if you'd like. This could possibly be even easier if SquareSpace allows jQuery, but loading up a whole library just for this may not be the best decision.

Took you through my thought process there hahah but hope that helps!

27 minutes ago, AlexSan said:

There is a way to do this. In a media query so that it only happens on mobile, you could edit the content of the <a> tag. Something like this:
 

.header-menu-nav-item a:after {
    content: ".....1";
}

However, this would append the 1 to every a tag in the nav menu. To give each their respective number, you could use nth-child selector, which would look like this:

.header-menu-nav-item a:after {
    content: ".....";
}

.header-menu-nav-item a:nth-child(1):after {
    content: ".....1";
}

.header-menu-nav-item a:nth-child(2):after {
    content: ".....2";
}

/* Add more rules for additional elements if needed */

This works, but you're hard coding the css of each individual link. If you were to add more, you'd have to also add more css. Therefore, a cleaner solution would be to use JavaScript, like so:

<script>
document.addEventListener('DOMContentLoaded', function () {
  	// Check if the viewport width is below 768 pixels, set to whenever the hamburger menu appears
    if (window.innerWidth < 768) {
      var aNav = document.querySelectorAll('.header-menu-nav-item a');

      aNav.forEach(function (element, index) {
          // Create a new span element
          var span = document.createElement('span');
          // Set the content of the span element
          span.textContent = '.....' + (index + 1);
          // Insert the span element after the anchor element
          element.insertAdjacentElement('afterend', span);
      });
     }
});
<script>

The script first checks the viewport width, and then grabs the <a> navigation items. For each item, it will add a <span> element after the <a> element. We're also able to style the <span> element if you'd like. This could possibly be even easier if SquareSpace allows jQuery, but loading up a whole library just for this may not be the best decision.

 

Took you through my thought process there hahah but hope that helps!

Oh this is clever! The initial nth-child selector works, but my 4 following don't seem to be taking.  I attached a photo of how it's looking and here's my code:

//number extensions on mobile nav

.header-menu-nav-item a:after {
    content: "..........";
}

.header-menu-nav-item a:nth-child(1):after {
    content: ".......... 01";
}

.header-menu-nav-item a:nth-child(2):after {
    content: ".......... 02";
}

.header-menu-nav-item a:nth-child(3):after {
    content: ".......... 03";
}

.header-menu-nav-item a:nth-child(4):after {
    content: ".......... 04";
}

I did tried adding !important to the three that aren't working, but I may have been putting it in the wrong spot and that's why it didn't work?

@jeanneemariee, the code is incorrect! That's my bad.

I do recommend going with the JavaScript solution, as then you're able to style the <span> to be positioned to the right of your menu, as well as changing the font and font size, closer to the way you had it in your original design. I'd be happy to help with that aswell.

For your current css, the issue is that each <a> is not together (like i thought), they are each in different divs. Try this:

.header-menu-nav-item:nth-child(1) .header-menu-nav-item-content:after {
    content: ".......... 01";
}

.header-menu-nav-item:nth-child(2) .header-menu-nav-item-content:after {
    content: ".......... 02";
}

.header-menu-nav-item:nth-child(3) .header-menu-nav-item-content:after {
    content: ".......... 03";
}

.header-menu-nav-item:nth-child(4) .header-menu-nav-item-content:after {
    content: ".......... 04";
}

If you want to try adding !important, it'd be like this:

.header-menu-nav-item:nth-child(4) .header-menu-nav-item-content:after {
    content: ".......... 04" !important;
}

58 minutes ago, AlexSan said:

@jeanneemariee, the code is incorrect! That's my bad.

I do recommend going with the JavaScript solution, as then you're able to style the <span> to be positioned to the right of your menu, as well as changing the font and font size, closer to the way you had it in your original design. I'd be happy to help with that aswell.

For your current css, the issue is that each <a> is not together (like i thought), they are each in different divs. Try this:

.header-menu-nav-item:nth-child(1) .header-menu-nav-item-content:after {
    content: ".......... 01";
}

.header-menu-nav-item:nth-child(2) .header-menu-nav-item-content:after {
    content: ".......... 02";
}

.header-menu-nav-item:nth-child(3) .header-menu-nav-item-content:after {
    content: ".......... 03";
}

.header-menu-nav-item:nth-child(4) .header-menu-nav-item-content:after {
    content: ".......... 04";
}

If you want to try adding !important, it'd be like this:

.header-menu-nav-item:nth-child(4) .header-menu-nav-item-content:after {
    content: ".......... 04" !important;
}

 

That fixed it! I agree JS would probably be the cleaner choice. But I operate my own site on the personal plan, so I'm not able to use script. I will definitely come back to this JS solution when I inevitably use the new menu style for a client though!

Thanks so much for your help, your CSS solution works great for my site right now 😄