Add a custom Secondary Navigation Button

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

Hello! I've searched for the answer on the Forum but couldn't find exactly what I'm looking for... 😞

I need to add a Secondary Navigation Button just like the MEMBERS AREA button but to aligned to the left. Same button style, same font, same design. I just need to add an OPT-IN MAILING LIST button to the upper left corner.

Thank you so much for your help!

Add to Last Line in Code Injection > Footer

<script>
  $(document).ready(function() {
$('<a href="https://beaverhero.com" class="tbutton">Teste test test</a>').appendTo('[data-nc-container="top-left"]');
});
</script>
<style>
  a.tbutton {
    background: #e60000;
    font-family: ff-good-headline-web-pro-condensed;
    font-weight: 500;
    font-style: normal;
    font-size: 16px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: white;
    padding: 12px 18px;
}
</style>

@tuanphan thank you so much! This will also add the button to the mobile secondary navigation menu?

if you want desktop only, use this new code

<script>
  $(document).ready(function() {
$('<a href="https://beaverhero.com" class="tbutton">Teste test test</a>').appendTo('header.Header [data-nc-container="top-left"]');
});
</script>
<style>
  a.tbutton {
    background: #e60000;
    font-family: ff-good-headline-web-pro-condensed;
    font-weight: 500;
    font-style: normal;
    font-size: 16px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: white;
    padding: 12px 18px;
}
</style>

Thanks @tuanphan, no. Desktop and Mobile is perfect.

What I really was thinking is just to add a second button at the secondary navigation menu, but this second button move it to the left because, by default it would be aligned next to the first button to the right.

@tuanphan I add the code you kindly provided and I get it, it doesn't work as responsive design properly, so, I just add a secondary navigation button as a test. 

How can I move that TEST button to the left? 

https://afroperuviansextet.squarespace.com

In that case, it would work perfectly:
- DESKTOP: Showing the TEST button at the left top corner.
- MOBILE: Showring the TEST link in the dropdown mobile menu. Just as the MEMBERS AREA button works right now. Responsive.

Thanks!

<script>
  $(document).ready(function() {
$('nav.Header-nav.Header-nav--secondary>div>a:first-child').appendTo('header.Header [data-nc-container="top-left"]');
});
</script>

47 minutes ago, tuanphan said:

<script>
  $(document).ready(function() {
$('nav.Header-nav.Header-nav--secondary>div>a:first-child').appendTo('header.Header [data-nc-container="top-left"]');
});
</script>

 

@tuanphan it worked but the style is missing, look: https://afroperuviansextet.squarespace.com

Thanks!

Add to Code injection Header

<style>
  [data-nc-container="top-left"] a {
    background: #e60000;
    font-family: ff-good-headline-web-pro-condensed;
    font-weight: 500;
    font-style: normal;
    font-size: 16px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: white;
    padding: 5px 18px;
}
</style>

Thank you @tuanphan! And finally, is there a way to copy the same exact style including the same button padding, height, and hover effect?  Maybe copying the style from that button? Thank you SO much

20 hours ago, Tungsteno said:

Thank you @tuanphan! And finally, is there a way to copy the same exact style including the same button padding, height, and hover effect?  Maybe copying the style from that button? Thank you SO much

You can remove the code?, then I will check its style & apply into new code

1 hour ago, tuanphan said:

You can remove the code?, then I will check its style & apply into new code

Done! Code removed.

On 6/2/2021 at 4:50 PM, Tungsteno said:

@tuanphan it worked but the style is missing, look: https://afroperuviansextet.squarespace.com

Thanks!

I mean remove this code

1 hour ago, tuanphan said:

I mean remove this code

Done!

Hi @tuanphan, did you figure it out? 😄

Add to Code Injection Footer

<script>
   $(document).ready(function() {
$('nav.Header-nav.Header-nav--secondary>div>a:first-child').appendTo('header.Header [data-nc-container="top-left"]');
});
</script>
<style>
  [data-nc-container="top-left"] a {
    box-shadow: none;
    border: 0;
    background-color: #e60000;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #fff;
    padding: 12px 18px;
    margin: .618em .618em;
    display: inline-block;
    vertical-align: middle;
    font-family: ff-good-headline-web-pro-condensed;
    font-weight: 500;
    font-style: normal;
    font-size: 16px;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1em;
}
</style>

12 hours ago, tuanphan said:

<script> $(document).ready(function() { $('nav.Header-nav.Header-nav--secondary>div>a:first-child').appendTo('header.Header [data-nc-container="top-left"]'); }); </script> <style> [data-nc-container="top-left"] a { box-shadow: none; border: 0; background-color: #e60000; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #fff; padding: 12px 18px; margin: .618em .618em; display: inline-block; vertical-align: middle; font-family: ff-good-headline-web-pro-condensed; font-weight: 500; font-style: normal; font-size: 16px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; line-height: 1em; } </style>

@tuanphan, thanks!

I have already add the code. The hover effect seems not be working: https://afroperuviansextet.squarespace.com/

Use this code

<script>
   $(document).ready(function() {
$('nav.Header-nav.Header-nav--secondary>div>a:first-child').appendTo('header.Header [data-nc-container="top-left"]');
});
</script>
<style>
  [data-nc-container="top-left"] a {
    box-shadow: none;
    border: 0;
    background-color: #e60000;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #fff;
    padding: 12px 18px;
    margin: .618em .618em;
    display: inline-block;
    vertical-align: middle;
    font-family: ff-good-headline-web-pro-condensed;
    font-weight: 500;
    font-style: normal;
    font-size: 16px;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1em;
}
  [data-nc-container="top-left"] a:hover {
  	background-color: rgba(230,0,0,.8);
  }
</style>

PERFECT!

Thank you so much @tuanphan

On 6/12/2021 at 12:53 AM, Tungsteno said:

PERFECT!

Thank you so much @tuanphan

Do you need solve this?

Site URL – https://afroperuviansextet.squarespace.com/

1. (Mobile-Footer) center links/copyright text?

5 minutes ago, tuanphan said:

Do you need solve this?

Site URL – https://afroperuviansextet.squarespace.com/

1. (Mobile-Footer) center links/copyright text?

Would be great! How? :)

Add to Design > Custom CSS

/* Mobile footer center */
@media screen and (max-width:767px) {
div#footerBlocksTop * {
    text-align: center !important;
}
}

12 hours ago, tuanphan said:

Add to Design > Custom CSS

/* Mobile footer center */
@media screen and (max-width:767px) {
div#footerBlocksTop * {
    text-align: center !important;
}
}

 

Thanks! Done