Jump to content

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

Recommended Posts

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?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

My testing

image.thumb.png.c007a89db4985f20367e4b754861472c.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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....

Screen Shot 2021-12-31 at 12.12.13.png

Try adding comma on the last style

image.png.0de9e7ca7283d078bf0a4ee210f41cf1.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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  ⬇️

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
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. 🙂

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.