Secondary button in header on mobile

Hi, 

I have a button in the secondary nav in the header on the desktop. Is there a way of enabling it to appear in the header rather than in the side menu on the mobile please?

On the desktop, is there a way of centring the menu between the logo and the donate button too?

https://www.probation-institute.org

Thank you

#1. With desktop, if you want, we can turn last nav item to a button style.

#2. With mobile, add a button here?

On 7/9/2023 at 10:16 AM, tuanphan said:

#1. With desktop, if you want, we can turn last nav item to a button style.

#2. With mobile, add a button here?

Yes to both please. 

I also wondered whether I can have two buttons in the secondary nav? A donate button and how to join button?

Only the donate one in the header on the mobile though. 

Something to look like this please @tuanphan. Not sure on whether to have the buttons side by side or above and below on the header. 

Add to Settings > Developer Tools > Code Injection > Footer (DO NOT add to Custom CSS)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($) { 
   $('<div class="sqs-block-button button-block custom-button"><div class="sqs-block-button-container--center"><a href="https://google.com" target="_blank" class="sqs-block-button-element--medium sqs-button-element--primary sqs-block-button-element">How to Join</a></div></div>').appendTo('[data-nc-container="top-center"]');
 }); 
</script>
<style>
  [data-nc-container="top-center"] {
    display: flex !important;
}
</style>

1 hour ago, tuanphan said:

Add to Settings > Developer Tools > Code Injection > Footer (DO NOT add to Custom CSS)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($) { 
   $('<div class="sqs-block-button button-block custom-button"><div class="sqs-block-button-container--center"><a href="https://google.com" target="_blank" class="sqs-block-button-element--medium sqs-button-element--primary sqs-block-button-element">How to Join</a></div></div>').appendTo('[data-nc-container="top-center"]');
 }); 
</script>
<style>
  [data-nc-container="top-center"] {
    display: flex !important;
}
</style>

 

Many thanks, I really appreciate it. I've added that as you can see below. 

Few queries please: 

- can the two buttons be the same size, colour, font etc on desktop?

- reduce the size of the button on the mobile version in the header

- remove the button in the menu on the mobile (orange donate)

- be great to just have the donate button on the mobile header, not the 'how to join'

- centre the menu on the desktop so the space either side is the same? (between the logo and the buttons)

Or, would it be better to remove the orange donate button altogether and add 2 buttons using the script instead? But only have one appear on the mobile version? 

Many thanks for all your help. 

Use this new code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($) { 
   $('<div class="Header-nav-inner"><a href="https://google.com" class="Header-nav-item">How to Join</a></div>').appendTo('nav.Header-nav.Header-nav--secondary');
    $('<div class="Header-nav-inner"><a href="https://google.com" class="Header-nav-item">How to Join</a></div>').appendTo('.Mobile [data-nc-container="top-center"]');
 }); 
</script>
<style>
  nav.Header-nav.Header-nav--secondary a {
    white-space: nowrap;
}
  .Mobile [data-nc-container="top-center"] {
    display: flex !important;
}
  .Mobile [data-nc-container="top-center"] a {
        box-shadow: 0 2px 0 0 #c77400;
    border: 0;
    background-color: #f08c00;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #fff;
    border-radius: 300px;
    padding: 12px 18px;
    margin: 0.618em 0.618em;
}
  @media screen and (max-width:640px) {
  div#block-yui_3_17_2_1_1590057489722_4915 {
    display: none;
}
  }
</style>

Thanks @tuanphan I've played around with styling a little, see below. I'd really welcome a little more help please.

Mobile site: the donate button from the side menu needs hiding for mobile.

Desktop: the 'Join Here' button in orange in the middle needs removing (desktop only). 

Many thanks

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($) { 
   $('<div class="Header-nav-inner"><a href="https://www.probation-institute.org/how-to-join" class="Header-nav-item">JOIN HERE</a></div>').appendTo('nav.Header-nav.Header-nav--secondary');
    $('<div class="Header-nav-inner"><a href="https://www.probation-institute.org/donate" class="Header-nav-item">DONATE</a></div>').appendTo('.Mobile [data-nc-container="top-center"]');
 }); 
</script>
<style>
  nav.Header-nav.Header-nav--secondary a {
    white-space: nowrap;
}
  .Mobile [data-nc-container="top-center"] {
    display: flex !important;
}
  .Mobile [data-nc-container="top-center"] a {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    font-weight: 500 !important;
    border: 0;
    background-color: #0a579f;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #fff;
    border-radius: 30px;
    padding: 9px 12px;
    margin: 0.618em 0.618em;
  }

</style>

2 hours ago, tuanphan said:

Add this code under

<style>
  /* Hide join here orange button */
@media screen and (min-width:641px) {
    div#block-yui_3_17_2_1_1590057489722_4915 {
    display: none;
}
}

/* hide mobile donate button */
nav.Mobile-overlay-nav.Mobile-overlay-nav--secondary {
    display: none;
}
</style>

 

Just awesome as always. Thanks so much for all your time and support.