Jump to content

Sidebar navigation in 7.1

Recommended Posts

  • 2 months later...

There is a tutorial here. However there are still other things need fixing / more tutorials needed ~

  1. Element & typographic spacing ~ if you follow the above tutorial, all spacing will be jampacked next to each other, and that nav links may appear squashed to left or right (depending on the overall Header Style you picked). The tutorial above didn't cover this issue, but so far the only way to make this work is to add more margin and position css overrides on the "header a" and  "header-nav-wrapper" as follows: 
    header a {
      margin: 5px;
    }
    
    .header-nav-wrapper {
        position: relative;
        left: 20px;
      }
    I'm no coder nor developer so please do not hold me accountable if anything breaks at your end. 
     
  2. Announcement bars will ALSO be rotated to the left. So far I have not been able to find a way to bypass this effect on announcement bar. 
  3. Following from announcement bar problem - once you clicked exit "X" it out ~ the entire nav suddenly shifts to the right. So far again, still troubleshooting my way through this. 

If anyone else can contribute to this thread, will help a lot. Since 7.1 gets RID of Well's beautiful sticky left nav style, we need to raise enough voice for side bar based navigation! 

Link to comment
On 6/16/2020 at 4:25 PM, AW85 said:

There is a tutorial here. However there are still other things need fixing / more tutorials needed ~

  1. Element & typographic spacing ~ if you follow the above tutorial, all spacing will be jampacked next to each other, and that nav links may appear squashed to left or right (depending on the overall Header Style you picked). The tutorial above didn't cover this issue, but so far the only way to make this work is to add more margin and position css overrides on the "header a" and  "header-nav-wrapper" as follows: 
    
    header a {
      margin: 5px;
    }
    
    .header-nav-wrapper {
        position: relative;
        left: 20px;
      }
    I'm no coder nor developer so please do not hold me accountable if anything breaks at your end. 
     
  2. Announcement bars will ALSO be rotated to the left. So far I have not been able to find a way to bypass this effect on announcement bar. 
  3. Following from announcement bar problem - once you clicked exit "X" it out ~ the entire nav suddenly shifts to the right. So far again, still troubleshooting my way through this. 

If anyone else can contribute to this thread, will help a lot. Since 7.1 gets RID of Well's beautiful sticky left nav style, we need to raise enough voice for side bar based navigation! 

Hi. Sorry for the late reply.

Have you solved it yet?

We will take a look

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 6/21/2020 at 9:08 PM, tuanphan said:

Hi. Sorry for the late reply.

Have you solved it yet?

We will take a look

hi Tuanphan,

No unfortunately still tinkering around amidst other things going on at the moment sorry for the late reply. 

 

Link to comment
  • 2 weeks later...
  • 3 weeks later...

Dear all / whoever in angst of this issue RE: Sidebar Nav / Vertical nav in SQ 7.1,

I have tried my best nearing an entire month around-the-clock; at liaising with various member/s in and outside of the forum clarifying whether or not vertical navigations are pragmatically possible on PERSONAL subscription plan. At least without luxury assistance of plugins or coding injections via Business plan or above. 

Unfortunately, so far ~ all alternative workarounds seems compromised. All efforts points to a likely "no". Unless one is truly willing to put their necks in the sand and grind things through manually themselves.

The best tutorial I have so far sought upon is here.  But beware: this solution is halfway complete and/or half-baked. You cannot properly display all icons, nav items and cta-button ALL ON simultaneously. And you must find a way to revert vertical menu  BACK TO horizontal menu if it is in mobile environment. 

Squarespace® sadly brings their 7.1 an ambivalent direction. It is one step forward, three step backwards. A step forward for those who are completely unaccustomed to web design. Three steps back for everyone else - that we have to tinker, troubleshoot and find workaround alternatives far too exhaustive, and unnecessarily numerous-jumping-through-hoops. I fear for the "what-if" scenarios - what if 7.1 were a mandatory global upgrade, like what they did from V6 to V7? 

Many thanks to @tuanphan for charitable efforts. I am not a developer hence please consider any or all workaround discussion a subjective one at best until you have proven to your existing needs and environment~ that it indeed works in all cases. 

 

Hopefully they pick this up,

AW85. 

Link to comment

The only "solution" in fixing the announcement bar also should one resorts to the other tutorial, can only be done via code injection (Business plan).  Once again, many thanks to @tuanphan. For those unfamiliar / get up to speed ~ that tutorial also rotates the announcement bar which we do not want.

This code injection fixes that so it remains horizontal. 

Add to Home > Settings > Advanced > Code Injection > Header

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($) {
	$(".header .sqs-announcement-bar-dropzone").insertBefore("header#header");
});
</script>
<style>
  .sqs-announcement-bar-text p {
    padding-top: 0 !important;
}
</style>
Link to comment
  • 1 month later...
  • 2 weeks later...
  • 1 month later...
  • 9 months later...
1 hour ago, iannoli said:

I just came across this plugin which seems promising. I haven't bought it or tested it. Anybody try this yet?

https://www.rebeccagracedesigns.com/plugins/p/vertical-navigation

Also just heard back from the plugin developer. I asked her if the vertical nav can be customized. Here's what she said:

"The plugin can have the text left justified and you can change the background to be whichever color you choose. Most of the plugin uses CSS. However at times you may come across a situation where the header loads horizontally and then bounces to the vertical navigation. I have provided code to fix this issue, but you would need to have a Business Plan or Higher to use that portion of the code. "

Link to comment
  • 6 months later...

I'd like to be able to have sidebar navigation similar to the squarespace help center. 

https://support.squarespace.com/hc/en-us/articles/207135178-Creating-anchor-links#toc-page-slugs-and-anchor-links

 

Is this possible? I have stumped all Fiverr custom developers and no reply from anyone on 99 designs yet. 

 

I'd like all of the articles in blog 1 to appear in the sidebar when inside blog 1. Same for Blog 2 or any other sections that I create with related content to appear in the respective sidebar. 

Link to comment
5 minutes ago, ianlearobinson said:

I'd like to be able to have sidebar navigation. I'd like all of the articles in blog 1 to appear in the sidebar when inside blog 1.

It should be possible to add an organised lists of links to blog posts by using an Archive Block, although this will obviously will be limited to the usual 50 groups (months, years, authors, categories, or tags) with a maximum of 100 items per group.

It's difficult to be more specific as you haven't provided us with a working link to the blog and I therefore don't know which template or Squarespace version you are using - some are easier to customise than others.

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment
  • 1 year later...

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.