Jump to content

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

Go to solution Solved by MayaViolet,

Recommended Posts

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

 

MENU - MOBILE.png

Edited by MayaViolet
Hiding access to live site
Link to comment
  • Replies 8
  • Views 1.4k
  • Created
  • Last Reply

Top Posters In This Topic

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>

 

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

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

Link to comment
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');
	});

 

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

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

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
  • Solution
22 hours ago, tuanphan said:

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

Which code did you add to current code?

Hi Tuan - Dmitry helped me find the issue. Because I wasn't loading the content, it kept disappearing. This is the final code that did the trick. Thanks for all your help! I appreciate it.

 

<!---Custom Menu Footer--->
<script>
$(function() {
$('.header-menu-nav-folder-content').append('<div class="mobile-menu-footer"></div>');
$('.mobile-menu-footer').load('/mobile-menu-footer #mobile-menu-footer');
});
</script>
<!---END Custom Menu Footer--->

 

Link to comment
  • 10 months later...

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

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.