Menu coding to force the "Book Now" button to appear on mobile menu header next to the logo

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

Hi. When viewing my site on a desktop, there is a BOOK A TOUR button that appears on the top right of the menu bar.  It is visible all the time.   This is a feature of the template I use.  But when viewing on a mobile device, this button is hidden inside the drop down menu.  There is open space in the menu bar on mobile and I want to force the button to appear there so that its visible all the time.  See the screenshots.   Can anyone help with this?  Happy to pay for this.

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 href="/book-a-tour" class="tp-button">Book a tour</a>').insertBefore('.Mobile [data-nc-container="top-right"] button');
	});

</script>
<style>
  a.tp-button {
    border: 2px solid #c6c5b3;
    color: #c6c5b3;
    padding-left: 10px;
    padding-right: 10px;
}
</style>

Hi there,

I have the same query as above, however when I paste this code on my site it doesn't work. I've changed the href to link to my url, but the button is still now showing. Updated code below. Is there any chance you can help me on this please?

This is my desktop view with the Book Online button.

And mobile view

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function() { 
        $('<a href="/bookonline" class="tp-button">Book Online</a>').insertBefore('.Mobile [data-nc-container="top-right"] button');
    });

</script>
<style>
  a.tp-button {
    border: 2px solid #c6c5b3;
    color: #c6c5b3;
    padding-left: 10px;
    padding-right: 10px;
}
</style>

23 hours ago, Dee_Dublin said:

Hi there,

I have the same query as above, however when I paste this code on my site it doesn't work. I've changed the href to link to my url, but the button is still now showing. Updated code below. Is there any chance you can help me on this please?

This is my desktop view with the Book Online button.

And mobile view

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function() { 
        $('<a href="/bookonline" class="tp-button">Book Online</a>').insertBefore('.Mobile [data-nc-container="top-right"] button');
    });

</script>
<style>
  a.tp-button {
    border: 2px solid #c6c5b3;
    color: #c6c5b3;
    padding-left: 10px;
    padding-right: 10px;
}
</style>

What is your site url? We can check easier

The code I sent for SS 7.0. It looks like your site is 7.1, will need a different code.