Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Sidebar navigation in 7.1


Recommended Posts

You can try this plugin to create sidebar (need Business Plan)

You can also use CSS (I haven't tested yet), but I guess CSS can.

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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
8 hours ago, AW85 said:

hi Tuanphan,

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

 

If you share link to your site, I can check easier.

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

checking all the unanswered questions and seeing this. I recently purchased a course on this

Do you still need help on this?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 2 weeks later...
On 9/14/2020 at 11:47 AM, KimLala said:

Tuanphan, have you come to a conclusion with this after the course? The Thirty Eight Visual tutorial is no longer available and I'm stumped.

Have you solved it yet?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

Create an account or sign in to comment

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

×
×
  • Create New...