Adding second button to site header

Hi @gmgarrison,

You should be able to accomplish this with jQuery. Try adding the following within Settings > Advanced > Code Injection > Footer Injection:

<!-- If you don't already have jQuery, install it here. -->
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>

<script>
  /*This moves the final item of your primary navigation to the Header Actions parent element.*/
  $(".header-nav-list").find("a").last().prependTo(".header-actions-action");
  /*Same, but for mobile.*/ $(".header-menu-nav-folder-content").find("a").last().prependTo(".header-menu-cta");
  
  /*This changes the element's classes to match the other button.*/
  $(".header-actions-action a:first-child").addClass("btn btn--border theme-btn--primary-inverse");
  /*Same, but for mobile.*/ $(".header-menu-cta a:first-child").addClass("theme-btn--primary btn");
  
</script>

<style>
  /*This further tweaks the styles to force the buttons onto separate lines.*/
  .header-actions-action a:first-child{display:block!important; margin-bottom:10px!important;}
  
  /*This hides the original nav item.*/
  .header-nav-list div:last-child a{display:none!important;}
</style>

This code essentially transforms whatever the last link is in your primary navigation into an orange button. Here's the expected result on desktop:

And here's the expected result on mobile:

If the stacked layout is too large, you can add additional CSS to decrease the size:

<style>
  .header-actions-action a{font-size:.7rem!important;}
  /*Same, but for mobile.*/ .header-menu-cta a{font-size:.7rem!important;}
</style>

Perhaps a bit overengineered, but it gets the job done 😀

Hope this helps!
-Tyler

Thanks a lot for this. I can definitely work with this. Appreciate it!!!