Custom Mobile Menu 7.1 - Prepend / Append Jquery not working..

Site URL: https://cby.squarespace.com/

I am trying to add extra nav bars to the end of my Mobile Menu, as well as an Instagram Feed to match the attached mockup. It was working earlier, but for some reason is no longer sticking.

I tried moving it to the Header Injection, however it conflicts with the Mobile Overlay pop-out when clicking the hamburger menu, and in the Footer Injection, nothing happens... Any help much appreciated!

<!---Mobile Menu Footer --->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function($) { 
		$('#mobile-menu-footer').clone()appendTo('.header-menu-nav-folder-content');
	});
</script>
<!---END Mobile Menu Footer --->

You have duplicate jQuery library in Code Injection

First, try remove this from Code Injection Footer

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

Next, replace this from Code Injection Header

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

with this

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

On 10/29/2021 at 4:39 AM, tuanphan said:

You have duplicate jQuery library in Code Injection

First, try remove this from Code Injection Footer

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

Next, replace this from Code Injection Header

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

with this

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

 

Hey Tuan - I did as you suggested, and that still didn't work.... (You'll see that since then I also added a custom loading screen, however the above edits^ still didn't fix the problem before I added the new plugin code. It calls on it's own Jquery script, but if I remove that line for the loading screen section it breaks.)

Are you available for hire? If you think you can help me solve this problem I'd be super interested in hiring your hourly to help me wrap up this client project! Let me know, thank you!

On 10/29/2021 at 4:39 AM, tuanphan said:

You have duplicate jQuery library in Code Injection

First, try remove this from Code Injection Footer

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

Next, replace this from Code Injection Header

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

with this

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

 

Even if I remove all the script, save the jquery library line, and the append code above^ it still doesn't work? I don't get what happened, it did work initially...

On 11/2/2021 at 5:42 AM, MayaViolet said:

Even if I remove all the script, save the jquery library line, and the append code above^ it still doesn't work? I don't get what happened, it did work initially...

ah your code missing a dot between clone() and appendTo

jQuery(document).ready(function($) { 
		$('#mobile-menu-footer').clone()appendTo('.header-menu-nav-folder-content');
	});

it should be

jQuery(document).ready(function($) { 
		$('#mobile-menu-footer').clone().appendTo('.header-menu-nav-folder-content');
	});

7 hours ago, tuanphan said:

ah your code missing a dot between clone() and appendTo

jQuery(document).ready(function($) { 
		$('#mobile-menu-footer').clone()appendTo('.header-menu-nav-folder-content');
	});

it should be

jQuery(document).ready(function($) { 
		$('#mobile-menu-footer').clone().appendTo('.header-menu-nav-folder-content');
	});

 

I made that fix, and it worked temporarily, but as soon as I added another injection the appended item disappeared, even after removed the additional code I had previously added, and refreshing the page...

I'm at a total loss. Any idea. why this might be happening? 

Dmitry from SQSP Themes suggested I just plug in the HTML to my code injection, but I would still need to append it to the mobile-overlay pop-out... The only other solution I can think of is to use a Mega Menu plugin, like Rache's? Any thoughts? Thanks for your help regardless!

On 11/4/2021 at 11:29 PM, MayaViolet said:

I made that fix, and it worked temporarily, but as soon as I added another injection the appended item disappeared, even after removed the additional code I had previously added, and refreshing the page...

I'm at a total loss. Any idea. why this might be happening? 

 

Dmitry from SQSP Themes suggested I just plug in the HTML to my code injection, but I would still need to append it to the mobile-overlay pop-out... The only other solution I can think of is to use a Mega Menu plugin, like Rache's? Any thoughts? Thanks for your help regardless!

but as soon as I added another injection the appended item disappeared

Which code did you add to current code?

Hi @tuanphan -- 

I am trying to apply this same code^ in a new context, and am wondering if you have some insight?

This is for a 7.0 site, https://www.fairfaxbackyardfarmer.com/shop?tag=Beekeeping, where we have a Mega-Menu installed that allows people to navigate to a pre-filtered Shop page based on product tag. I am trying to see if I can hide the Shop Intro on these pages, and replace the content with an intro specific to that product tag, pulled from an index page (/shop-intro-sections -- in this specific case, https://www.fairfaxbackyardfarmer.com/shop-intro-sections#beekeeping-feature-intro).

I dropped in the below code, but unsure if because this is 7.0, the structure needs to be different, and/or because of the index page structure. 

<script>
$(function() {
$('section[data-filter-selectors=".choose-sub-category--beekeeping"]').prepend('<section class="beekeeping-feature-intro"></section>');
$('.beekeeping-feature-intro').load('/shop-intro-sections #beekeeping-feature-intro');
});
</script>

Something I don't understand, in the code from the original question above that I'm basing this off of, even when I used a block-id, I still referred to it as a "<div class="block-id-here"></div>" and ".block-id-here" even though it wasn't a class, and it worked that way, so I'm not sure if I'm messing something up in translation here.

Do you understand what I may be doing wrong in the above code, or if there is an easier way to achieve this goal?

Thanks!
maya