Jump to content

Adding second button to site header

Recommended Posts

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 comment
  • Replies 2
  • Views 787
  • Created
  • Last Reply

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

The above post may be outdated. I’m no longer active in the Squarespace ecosystem, so I won’t see your direct messages. For better resources about web accessibility, I’ve documented some of my thoughts on my forum profile.

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.