Adding second button to site header

Site URL: https://moreland.edu

Hi all,

I'm trying to add a second button in a vertical stack (underneath APPLY NOW)  in our header menu. I can use JS to create a new div similar to the existing button:

<div class="header-actions-action header-actions-action--cta" data-animation-role="header-element">
   <a class="btn btn--border theme-btn--primary-inverse" href="/teach-now-application-form-redirection" target="_blank">APPLY NOW</a>
</div>

I can insert that into the parent div:

<div class="header-actions header-actions--right">
            <div class="showOnMobile"></div>
            
            <div class="showOnDesktop"></div>

              <div class="header-actions-action header-actions-action--cta" data-animation-role="header-element">
                <a class="btn btn--border theme-btn--primary-inverse" href="/teach-now-application-form-redirection" target="_blank">
                  APPLY NOW
                </a>
              </div>
            
			  <!-- add second button here -->          
</div>

But that gets styled as side-by-side horizontal buttons. If I take off the "display: inline-flex" property on that parent div (applied through the 'header-actions' class), then they're displayed in a vertical group and I can add a little margin and it looks alright.

But... that's a good bit of hacking and doesn't seem to address mobile. I can probably hack out a similar fix to force-add a button on mobile, but maybe there's a better way?

Does anyone have a better approach?

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