sandracheesman Posted June 30, 2020 Share Posted June 30, 2020 Site URL: https://bassoon-dog-tknb.squarespace.com/ Hi Guys, the site password is : SandraCB I am using this jsquery to enable the site to have nav folder links: <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> $( document ).ready(function() { $(".Header-nav-folder-title").eq(0).prop('href', '/aboutus2'); $(".Header-nav-folder-title").eq(1).prop('href', '/wines2'); $(".Header-nav-folder-title").eq(2).prop('href', '/sustainability2'); $(".Header-nav-folder-title").eq(3).prop('href', '/news-and-views2'); $(".Header-nav-folder-title").eq(4).prop('href', '/visit2'); }); </script> Then this code for the links: <a href="/aboutus2">Our Story</a> As you will see the Top folder nav links take you to a page connected to that title i.e Our Story - however on a mobile when the burger menu is in use when you click on 'Our Story' it does not show the 'Our Story' page it just opens the menu to ask you to click on the other pages in that folder? Thank you! @tuanphan I think maybe you may know something about this, as I have seen you talk about it on another post? Link to comment
tuanphan Posted June 30, 2020 Share Posted June 30, 2020 Mobile menu uses different class Desktop Quote .Header-nav-folder-title Mobile Quote .Mobile-overlay-nav-item--folder or Quote span.Mobile-overlay-nav-item--folder-label Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
sandracheesman Posted July 9, 2020 Author Share Posted July 9, 2020 On 6/30/2020 at 5:06 PM, tuanphan said: @tuanphan hi, thank you for this information, but I am not sure what to change or add to make this work? Do I have to add all the same jquery but substitute the .Header-nav-folder-title for span.Mobile-overlay-nav-item--folder-label? Link to comment
tuanphan Posted July 9, 2020 Share Posted July 9, 2020 <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> $( document ).ready(function() { // for desktop $(".Header-nav-folder-title").eq(0).prop('href', '/aboutus2'); $(".Header-nav-folder-title").eq(1).prop('href', '/wines2'); $(".Header-nav-folder-title").eq(2).prop('href', '/sustainability2'); $(".Header-nav-folder-title").eq(3).prop('href', '/news-and-views2'); $(".Header-nav-folder-title").eq(4).prop('href', '/visit2'); // for mobile $(".Mobile-overlay-nav-item--folder").eq(0).prop('href', '/aboutus2'); $(".Header-nav-folder-title").eq(1).prop('href', '/wines2'); $(".Header-nav-folder-title").eq(2).prop('href', '/sustainability2'); $(".Header-nav-folder-title").eq(3).prop('href', '/news-and-views2'); $(".Header-nav-folder-title").eq(4).prop('href', '/visit2'); }); </script> replace similar... Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
sandracheesman Posted July 10, 2020 Author Share Posted July 10, 2020 @tuanphan Hi, thank you for the new code, but it does not seem to have changed anything? When I check the site out on my mobile and I click on any of the nav titles it still does not link to the actual main page, it just opens up the menu as before. So we are sill missing the main landing page for each header. i.e. on a desktop if you click any of the nav titles like 'Our Story' or 'Sustainability' it takes you to a main landing page. If you do the same on a mobile it still only opens up a menu to all the other links, it does not take you to the main page as it does on a desktop. Link to comment
sandracheesman Posted July 14, 2020 Author Share Posted July 14, 2020 @tuanphan do you know if the above is possible? Thank you! Link to comment
RyanDejaegher Posted July 14, 2020 Share Posted July 14, 2020 Hey @sandracheesman, while it is possible to have the folder links on mobile it has potential issues. On mobile the folder link is what allows you to navigate to the nested links. If you were to add links to those folder links on mobile they would take you to the folder link landing page but then the person would never be able to get to those nested folder links. A solution could be to add an "external link" to your folder that points to the folder URL. This would show up on both mobile and desktop by default so you'd have to hide the desktop external link with CSS. Philadelphia, PA 👉 Squarespace Tutorials Chat/Message on FB Messenger for quickest response: https://m.me/dejaegherryan Link to comment
sandracheesman Posted July 14, 2020 Author Share Posted July 14, 2020 @RyanDejaegher Hi Ryan, thank you for the reply. So am I understanding this correctly you suggest I use this code instead (using the website address when live): <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> $( document ).ready(function() { // for desktop $(".Header-nav-folder-title").eq(0).prop('href', '/https://www.blah.com/about-us'); $(".Header-nav-folder-title").eq(1).prop('href', '/https://www.blah.com/wines-2); $(".Header-nav-folder-title").eq(2).prop('href', '/https://www.blah.com/sustainability-2'); $(".Header-nav-folder-title").eq(3).prop('href', '/https://www.blah.com/news-and-views2'); $(".Header-nav-folder-title").eq(4).prop('href', '/https://www.blah.com/visit-2'); // for mobile $(".Mobile-overlay-nav-item--folder").eq(0).prop('href', '/https://www.blah.com/about-us'); $(".Header-nav-folder-title").eq(1).prop('href', '/https://www.blah.com/wines-2'); $(".Header-nav-folder-title").eq(2).prop('href', '/https://www.blah.com/sustainability-2'); $(".Header-nav-folder-title").eq(3).prop('href', '/https://www.blah.com/news-and-views2'); $(".Header-nav-folder-title").eq(4).prop('href', '/https://www.blah.com/visit-2'); }); </script> the bit I do not understand is hiding the CSS - or have I not understood any of it properly? thank you for taking the time to reply, much appreciated. Sandra Link to comment
RyanDejaegher Posted July 14, 2020 Share Posted July 14, 2020 @sandracheesman, I would remove the code for the mobile portion and add the external links in the Squarespace settings. Once you have the external links added in Squarespace then it will be possible to show/hide them with CSS. Let me know when you've added the external links and then I can take a look showing how to hide it with CSS Philadelphia, PA 👉 Squarespace Tutorials Chat/Message on FB Messenger for quickest response: https://m.me/dejaegherryan Link to comment
sandracheesman Posted July 15, 2020 Author Share Posted July 15, 2020 @RyanDejaegher thank you so much for your continued interest! Am I right in saying the site would have to be live to be able to add the external links? Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.