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?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, 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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, 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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, 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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, 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  ⬇️

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

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. 🙂

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, 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.