Adding a second button in mobile header with HTML

Hi! I'm trying to add a second button in my main nav and I need it to show on the mobile nav header since I'm forcing that view when the site is on desktop view. I've duplicated the html of the current button "Book an Appointment" to make a "Match with a Therapist" button right next to it that looks the same. When add it to Header code injection it's being placed behind the nav bar so you can't see it. (if you overscroll up at the top you can see it)

Any chance anyone has an idea of why this is happening?

Here is a link the the site the
https://goldfish-wrasse-48kn.squarespace.com/
password: igc

I've added a screenshot below of what I would like it to look like.

@creedon Thank you so much your post in that thread is the perfect solve for my problem!! 

Would you be able to point me to what I would adjust in the code to make the buttons stack in the dropdown menu? But leave them in a row on the main nav bar.

I think the coding might also be shortening the height of my main nav bar. Is there something in there that could be overriding my height settings?

Quote

Would you be able to point me to what I would adjust in the code to make the buttons stack in the dropdown menu? But leave them in a row on the main nav bar.

My code needs a little assist as you've modified how the SS default menus work.

Add the following to Website > Website Tools > Custom CSS.

.header-menu-cta {

  flex-direction : column;
  
  }

Quote

I think the coding might also be shortening the height of my main nav bar. Is there something in there that could be overriding my height settings?

My coding doesn't alter the height specifically but it is altering various elements and that may have changed the height. If you used custom code to alter the height of something you may need to update that code to work with what my code is doing.