Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Adding second button to site header


gmgarrison

Question

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?

Link to post
  • Answers 2
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

Posted Images

2 answers to this question

Recommended Posts

  • 0

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:

image.thumb.png.c41e2dae1aa7ae175536ba4c196129a3.png

And here's the expected result on mobile:

image.thumb.png.57913fabf10b42f6a7719f0456986773.png

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

Edited by tcp13

Is your Squarespace website ADA compliant? Find out in 60 seconds with our free accessibility audit!

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...