[Share] Second button on Header

You can use this tip to add second button to Header

#1. With Personal Plan (doesn't support Code Injection)

My idea is turn last two navigation items to button style.

Use this code to Website Tools > Custom CSS

nav {
    align-items: center;
}
div.header-nav-item:last-child>a {
    background-color: #f1f;
    color: white !important;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
}
div.header-nav-item:nth-last-child(2)>a {
    background-color: #ff2;
    color: blue !important;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
}

with Mobile, use this CSS code

.header-menu-nav-wrapper>div.header-menu-nav-item:last-child>a {
    background-color: #f1f;
    color: white !important;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    display: inline-block;
}
.header-menu-nav-wrapper>div.header-menu-nav-item:nth-last-child(2)>a {
    background-color: #ff2;
    color: blue !important;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    display: inline-block;
}

#2. With Business Plan/higher

You can use #1, or use this following code to add button next to current header button

You can add code to Website Tools > Code Injection > Footer

<a class="btn btn--border theme-btn--primary-inverse sqs-button-element--primary second-button" href="https://google.com">Contact</a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $('a.second-button').insertAfter('a.btn');
});
</script>

and this code to Custom CSS box

a.second-button {
    display: none;
}
header#header a.second-button {
    background-color: black !important;
    color: #f1f !important;
    display: inline-block !important;
}

To make button appear before current Header button, just change this to insertBefore

Thank you, worked perfectly! 

So I added the code and it is on the site and functioning as it should! How do I format it to match the correct font and make them the same size button?

Here is the link to the website: https://www.powerhouseonbroadway.com

The original button is "Reserve Now" and I want to format the new button "Order Now" to match the same size and style. Thank you!

Hello!

I used the above code to add a second button to my website header and it worked like a charm, however there is no space between both buttons (see attached picture). Is there any code I can use to add space between my two buttons?

Thank you for your help!

18 hours ago, laubouuuu said:

Hello!

I used the above code to add a second button to my website header and it worked like a charm, however there is no space between both buttons (see attached picture). Is there any code I can use to add space between my two buttons?

Thank you for your help!

You can use this to Custom CSS

a.second-button {
	margin-right: 1.6vw;
}

@tuanphan It worked! Thank you so much for your help!