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.

Hi @tuanphan, can you help me with this as well? My website is https://lemon-flower-srp5.squarespace.com/config/pages (you just helped me on hamburger and logo orientation).

On 9/19/2023 at 2:39 AM, savvysocialite said:

Hi @tuanphan, can you help me with this as well? My website is https://lemon-flower-srp5.squarespace.com/config/pages (you just helped me on hamburger and logo orientation).

What is password?

https://lemon-flower-srp5.squarespace.com/?noredirect

@tuanphan the site password is: fivestars 

On 9/25/2023 at 12:55 AM, savvysocialite said:

@tuanphan the site password is: fivestars 

Don't remove any code in your current code. Add this to Custom CSS box

@media screen and (max-width:991px) {
.header-actions.header-actions--right {
    display: flex !important;
    position: relative;
}

.header-actions-action.header-actions-action--cta {
    display: flex !important;
    position: relative;
}

.header-title-nav-wrapper {
    flex: 1 0 60% !important;
}
}

Thank you!

On 9/27/2023 at 2:09 AM, tuanphan said:

Don't remove any code in your current code. Add this to Custom CSS box

@media screen and (max-width:991px) {
.header-actions.header-actions--right {
    display: flex !important;
    position: relative;
}

.header-actions-action.header-actions-action--cta {
    display: flex !important;
    position: relative;
}

.header-title-nav-wrapper {
    flex: 1 0 60% !important;
}
}