AkankshaK

On 9/14/2021 at 8:58 AM, tuanphan said:

This will require a lot of code.

Add to last line in Code injection Footer. Replace google.com with your urls

<script>
$(document).ready(function() { 
		$('<ul class="t-nav"><li><a href="https:google.com">All</a></li><li><a href="https:google.com">Scratch Dent</a></li><li><a href="https:google.com">Limited Supply</a></li><li><a href="https:google.com">Flags</a></li><li><a href="https:google.com">Original Artwork</a></li><li><a href="https:google.com">Seasonal</a></li><li><a href="https:google.com">Clocks</a></li><li><a href="https:google.com">Customizable Decor</a></li><li><a href="https:google.com">Game Boards</a></li></ul>').insertBefore('body.view-item .products.collection-content-wrapper');
	});
	</script>
	<style>
	ul.t-nav {
    list-style: none;
    padding-left: 0;
    display: flex;
    justify-content: center;
}
ul.t-nav li a {
    margin-left: 20px;
    margin-right: 20px;
}
      @media screen and (max-width:767px) {
      ul.t-nav {
    flex-wrap: wrap;
}
      }
</style>

Hi @tuanphan

I used your code to create a Sub Nav on my store page and it worked really well. Thank you! 

My page is structured as follows Header > Banner Section > Sub Nav > Store Section. 

I have added CSS to make the Sub Nav sticky. The sub nav links are pointed to the individual categories.  

The aim is that when a user clicks on the Sub Nav links - they should be taken straight down to the Store section, scrolling past the banner section. For this, I added an anchor in the banner section and included the anchor links in the sub nav links.

It is working well. However, when a user clicks on the sub nav, it does scroll past the banner section but there a gap appears above the sub nav. To address this, I made the position of the anchor relative and added a top margin of 25vh. This works but not on all screen sizes. On some screen sizes, a gap still appears above the sub nav. 

Is there any way we can fix this ? Sorry for the long post! 

https://www.purnamayurveda.com/therapies

8 hours ago, tuanphan said:

What is your site url?

Hi Tuan! Thank you! I tried again today and I thought it worked but I didn’t 😞

https://www.purnamayurveda.com.
 

Hi

I have set up the header on my 7.1 website to be a basic fixed header. 

I have applied css to hide the logo and only fix the navigation bar.

Some flickering behaviour is presenting during scrolling which affects the overall user experience. See attached video recording. 

Any ideas how to correct this? Also would it be possible to display the cart icon in the fixed navigation bar? 

Thank you so much.

Akanksha 

27 minutes ago, paul2009 said:

This is one of those questions that cannot be definitely answered without knowing more about the code, what it does, how long it is, whether it relies on libraries and so on.

However, to generalise:

• Place it in the footer
• Keep the code in one place (for easy maintenance and troubleshooting)
• Don't rely on third party libraries unless absolutely essential
• Write the code well so that it only runs when the right conditions are met (for example, check for the required page content)
• Optimise the code (keep it short)

That said, if you only require some code on one page (and no other page will require code) it is probably better to add it to a Code Block on the specific page.

Did this help? Please give feedback by clicking an icon below  ⬇️

Thank you Paul for explaining that so well, much appreciated 🙏🏼

Hi

In terms of optimising site speed, where is it best to place a javascript that only applies to functionality on a particular page?

Should it be placed in the page's header code injection area OR should it be placed in the site wide footer code injection area?

My understanding is that placing Javascripts in the footer is best practice as that stops slow loading of the page.

But individual Squarespace pages do not have their own footer code injection area. 

Would appreciate some advice in this matter. 

Thank you

Akanksha

On 3/29/2022 at 10:23 AM, tuanphan said:

Add to Last Line in Code injection > Footer

<script>
$(document).ready(function() {
	$(".burger-inner").click(function() {
  $('html').toggleClass('disable-scroll');
});
});
</script>
<style>
  html.disable-scroll {
    overflow: hidden;
}
</style>

 

Hi Tuan, this doesnt work for me on my 7.1 website. Any suggestions? Thank you x

Thank you Paul, the change worked great. I really appreciate all your help. Thanks again :) 

Thank you Paul 🙏 I will move the jQuery to the footer. 

This is the script which wont work with the latest jQuery. It creates a Show More/Show Less accordion. 

<script>
 var SHOW_MORE = 'Show More'
 var COLLAPSE = 'Show Less'
 $(window).load(function(){
   $('a[href^="#expand"]').each(function(){
     var n = parseInt($(this).attr('href').split('-')[1]);
     var next_n_divs = $(this).parents('div.sqs-block').nextAll().slice(0,n)
     next_n_divs.wrapAll('<div class="extra-gallery" style="display:none;"></div>');
     $(this).click(function(){
       var target_gallery = $(this).parents('div.sqs-block').next('div.extra-gallery')
       if (target_gallery.is(':visible')){
         $(this).text(SHOW_MORE);
       }
       else {
         $(this).text(COLLAPSE);
       }
       target_gallery.slideToggle();
       return false;
     });
   });
 });
</script>

@Megalomaniac Thanks for this, works great. Any reason why this wont work with latest jquery version 3.6.0?

Thank you Paul. That really helps. 

Can I further ask - the best place to add the jquery within the code injection area - is it the header or the footer?

I did as you suggested - took a back up and replaced the various versions of the jquery with the latest one. All plugins/code snippets are working except for one which will only work with: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Would you know why that might be? 

Thank you once again. 

39 minutes ago, paul2009 said:

I don’t understand your question. Which library are you referring to? A working link to the site may help us to understand better. 

HI Paul,

So, one of the plugins I have uses this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

A second plugin uses:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 

A third plugin uses:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

So, do we need to have all 3 or could we do with just one of them?

Sorry I am really not a designer/nor a techie, just learning as I build my own website. 

Thanks

Akanksha
 

Hi all, 

So, I use quite a few plugins on my website. 

All of these plugins call a different version of the ajax library. What is the reason for this? Is it because they will only work with the specific version or is it simply that at the time the plugin was developed, that was the latest version available? 

Multiple ajax libraries choke the browser and slow the website down. 

Can this be remedied by simply using the latest version of the ajax library?

Thanks

Akanksha 

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

Hi, 

Is there a way to have the navigation bar always stretched out to the full width of the screen?

Because it is not full width, it wraps and becomes 2 lines instead of a single line. See screen recording. 

Any solutions for this? 

Thanks

On 12/8/2021 at 8:16 AM, tuanphan said:

It looks like you disabled cookies text. Do you still need help?

Hi Tuan, yes please. I would really like to move the cookie banner in front of the facebook chat plugin. Thank you. 

Yayy thank you, that worked brilliantly.  Thanks so much, you are a real star 😄

2 minutes ago, bangank36 said:

Is it the result you want to achieve?

Yesssss Please 🙂

23 minutes ago, bangank36 said:

How can I access the page like the image posted?

This is the current one on my device

@bangank36 Please could you try again, it will show now when you click on 'Hours'.  

9 minutes ago, bangank36 said:

Have you tried using the button in customization in Home > Settings > Cookies & Visitor Data > Customization?

 

 

Thank you 🙂  I played with these settings and got it work. Thanks

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

Hi, 

I used the following code from ghostplugins to move the mobile information bar behind the mobile menu overlay. 

// Push Mobile Info Bar Behind Mobile Menu //

.sqs-mobile-info-bar {
  z-index: 4 !important;
}

This works fine except on the header appears over the the business hours screen overlay. My header is transparent so it looks awkward.  See screenshot. 

Any recommendations? I would like the mobile info bar to be behind the mobile menu but I dont want the header to appear on the business hours overlay screen. 

Thanks

Akanksha 

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

Hello, 

My facebook messenger plugin hides a part of the cookie notice. Is there a way to move the plugin behind the cookie bar? 

Thanks

Akanksha Kalra

Hi, 

How do I move the accept button under the cookie banner text, as demonstrated in the attached screenshot? 

Thanks

Akanksha Kalra

Has any one found a solution to this please? @tuanphan I tried your code but it did not resolve. 

On 1/15/2021 at 10:35 PM, tuanphan said:

Hi. This will require script code. Do you use Personal or Business Plan?

Also, you want dropdown menu show on click, on both click + hover arrow?

Hi Tuan, thanks for looking into this. 

I have a business plan. 

I would like the dropdown menu to show on click+ hover please if possible 🙏

9 hours ago, tuanphan said:

@AkankshaK If you share site url, we can check easier

Hi Tuan, thanks so much. My website is www.purnamayurveda.com. 

On 5/17/2020 at 12:17 PM, paul2009 said:

Try adding this to Settings > Advanced > Code Injection > Header:

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">

And add this to Design > Custom CSS:

.header-nav-item.header-nav-item--folder a.header-nav-folder-title:after {
  font-family: FontAwesome;
  content: "\f107";
  padding-left: 4px;
}

You should see this:

 

Let me know how you get on.

-Paul

Hi Paul, this is fantastic, thank you. Would you be able to help with opening the sub menu when the down arrow is clicked as oppposed to it opening on hover? Thanks! Akanksha