Need mobile navigation links to jump to the same place as desktop

Site URL: https://www.richardsaltermusic.com/

I need a way to add padding/ space so my navigation links drop to the same place on mobile as they do on desktop.

Any ideas @tuanphan @bangank36

Thanks in advance!

x

12 hours ago, skeebodelta said:

Site URL: https://www.richardsaltermusic.com/

I need a way to add padding/ space so my navigation links drop to the same place on mobile as they do on desktop.

 

Any ideas @tuanphan @bangank36

 

Thanks in advance!

 

x

 

 

 

 

Do you mean setting desktop layout as same as mobile or vice versa? which one do you want to set?

@bangank36

I want mobile nav links to go to the same place as they do on desktop please. Right now, when I hit the links on mobile, some of them are cut off & don't jump to the right place.

Thanks! x

10 hours ago, skeebodelta said:

@bangank36

 

I want mobile nav links to go to the same place as they do on desktop please. Right now, when I hit the links on mobile, some of them are cut off & don't jump to the right place.

 

Thanks! x

 

 

Try

.header-display-desktop {
  --percent: 33%; 
}
.header-layout-branding-center-nav-center .header-display-desktop .header-title-nav-wrapper {
  flex: 0 0 calc(100% - var(--percent) * 2);
}

.header-layout-branding-center-nav-center .header-display-desktop .header-actions--right {
  flex: 0 1 var(--percent);
  max-width: var(--percent);
}
a#site-title:after {
  font-size: 30px;
}

You can change the percent value to define the space on both side of navigator

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

My testing

@bangank36

Hey, thanks for this!

Not sure if I'm entering it wrong, but the code won't load for some reason....

12 hours ago, skeebodelta said:

@bangank36

 

Hey, thanks for this!

 

Not sure if I'm entering it wrong, but the code won't load for some reason....

Try adding comma on the last style

@bangank36

Thanks!

I tried to copy the same code again, but the ; disappears when I paste it into the CSS window. 

On 12/31/2021 at 12:15 PM, skeebodelta said:

Not sure if I'm entering it wrong, but the code won't load for some reason

In summary, it's not your fault 🙂 . The CSS that @bangank36 provided needs a small modification to make it suitable for the Squarespace Custom CSS panel.

It works when he tests it because he is using an alternative method of adding the CSS (he needs to do this because he doesn't have access to your site's Custom CSS panel!). However, when you add it to the Custom CSS panel you'll see the 'Operation on an invalid type' error.

The issue is with this line:

  flex: 0 0 calc(100% - var(--percent) * 2);

which needs to be changed to something like this:

  flex: 0 0 calc(~"100% - var(--percent) * 2");

To explain further...the Squarespace Custom CSS panel expects something called 'LESS' instead of 'CSS'. LESS has advanced features that help you to style pages in a smarter, leaner way but it does require you to modify math operations by adding something called an 'escape string'. This prevents the calculations happening before the LESS has been parsed. 👨‍💻

Did this help you today? Please provide feedback by clicking a 'Like' or 'Thanks' icon below  ⬇️

@paul2009

Hey Paul!

Thanks for this. It would load this time, but didn't do what I wanted tit to do. It also changed the layout of the header on both desktop & mobile.

All I wanted to do was to make the nav links jump to the same place on mobile as they do on desktop.

x

1 hour ago, skeebodelta said:

Thanks for this. It would load this time.

I'll let @bangank36 follow-up on your original question. I was just wanted to explain the cause of your error message and allow you to fix it. 🙂

9 hours ago, skeebodelta said:

@paul2009

Hey Paul!

 

Thanks for this. It would load this time, but didn't do what I wanted tit to do. It also changed the layout of the header on both desktop & mobile.

 

All I wanted to do was to make the nav links jump to the same place on mobile as they do on desktop.

 

x

 

 

Many thanks to @paul2009 for suggestion

@skeebodeltaYou can try this one

@media only screen and (min-width: 768px) {
  .header-display-desktop {
    --percent: 33%; 
  }
  .header-layout-branding-center-nav-center .header-display-desktop .header-title-nav-wrapper {
    flex: 0 0 calc(~"100% - var(--percent) * 2");
  }

  .header-layout-branding-center-nav-center .header-display-desktop .header-actions--right {
    flex: 0 1 var(--percent);
    max-width: var(--percent);
  }
  a#site-title:after {
    font-size: 30px;
  }
}

Let me know how it works

@bangank36

Thanks for taking the time to forward this!

It's not actually what I'm trying to achieve though.

All I wanted to change is when I hit the nav links, for them to go to the same place on mobile, as they do on desktop.

Here's how they work on desktop:

Here's how they work on mobile:

As you can see, the headings on the showreel, placements & contact pages are cut off, or not visible: