Adding second navigation button

Site URL: https://www.warriorposeyoga.com

I don't write code, but I've been able to find other custom code to use on my site.  I'm struggling to find the right code to add a second navigation button.  I have one in the gold color and would like a second button next to that in the green color I'm using that says "join class".  Can someone show me what code I would need to paste for that customization (and where I'd need to insert said code)?

Many thanks,

Laura

On 3/4/2022 at 4:09 AM, LauraPhoenixWPY said:

Site URL: https://www.warriorposeyoga.com

I don't write code, but I've been able to find other custom code to use on my site.  I'm struggling to find the right code to add a second navigation button.  I have one in the gold color and would like a second button next to that in the green color I'm using that says "join class".  Can someone show me what code I would need to paste for that customization (and where I'd need to insert said code)?

Many thanks,

Laura

You want to add a button "join class" next to Free Consult?

On mobile, it will be on left of burger?

Yes, that's exactly what I have in mind.  Thanks!

On 3/11/2022 at 1:07 AM, LauraPhoenixWPY said:

Yes, that's exactly what I have in mind.  Thanks!

Add to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() { 
		$('<a class="t-button" href="https://google.com">Join Class</a>').insertAfter('.header-display-desktop .header-actions-action.header-actions-action--cta');
	});
</script>
<style>
  a.t-button {
    background-color: #f1a638;
    font-family: Poppins;
    font-weight: 500;
    font-style: normal;
    letter-spacing: .02em;
    text-transform: none;
    line-height: 1.2em;
    padding: 0.96rem 1.6032rem;
    margin-left: 20px;
    white-space: nowrap;
}
</style>