Jump to content

Add a custom Secondary Navigation Button

Recommended Posts

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.

567754053_ScreenShot2021-05-29at12_35_31.thumb.jpg.ccfe2c935c24658caa69375d67d9216f.jpg

 

Thank you so much for your help!

Link to comment
  • Replies 22
  • Created
  • Last Reply

Top Posters In This Topic

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>

image.thumb.png.cd8b6658cbcd540afcc6a9fca00fd670.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

@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!

Screen Shot 2021-06-01 at 10.25.35.jpg

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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/

Edited by Tungsteno
Link to comment

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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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?

afroperuviansextet.squarespace.com-01-mi

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Add to Design > Custom CSS

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.