Jump to content

Show donate navigation link outside of hamburger menu on mobile

Go to solution Solved by tuanphan,

Recommended Posts

Our website (www.great-marriages.org) switches the top navigation links into the hamburger menu when on mobile. I think this is intuitive but we have donors who complain that they can't find the donate button on mobile.

Is there a way to make it so that the final navigation link (which goes to our Donate page) can show up on mobile outside of the hamburger menu? As a link or a button or whatever? I'm open to suggestions!

Screenshot 2023-01-26 at 2.11.40 PM.png

Screenshot 2023-01-26 at 2.12.27 PM.png

Screenshot 2023-01-26 at 2.12.35 PM.png

Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution

Add to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
  $(document).ready(function() { 
		$('nav#mobileNavigation>div:last-child').insertBefore('.force-mobile-nav .mobile-nav-toggle');
	});
</script>
<style>
  #logoWrapper + .collection a {
    color: white;
    border: 1px solid white;
    padding: 10px 20px;
    position: absolute;
    right: 15vw;
    top: 8vw;
}
  .force-mobile-nav .mobile-nav-toggle+.collection {
    visibility: hidden;
}
</style>

image.png.c004f4c18e0dddd65fb35ca612b75949.png

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
  • 3 weeks later...

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.