Customizing button in header nav

Site URL: http://www.pitchurethis.com

Any chance that anyone may know any code customize a button that's in the header nav? Currently using Squarespace 7.1.

Basically, I have been able to use css to customize all of the normal buttons
(
small, medium, large) outside of the nav, but can not find the class or correct target to customize the one in the header nav. Looking to edit the font, size, stroke width of that button

Screenshoot attached for reference

What is access password?

@tuanphan it is "pitchure"

54 minutes ago, tuanphan said:

Add to Home > design > Custom CSS

.header-actions-action .btn {
    padding: 20px 30px;
    font-size: 15px;
    color: red !important;
    background: green !important;
    border-color: violet !important;
}

 

Incredible! thanks a lot @tuanphan 

Can I use this similar code to add buttons to my header area?  Looking to replace the header items with buttons.  getzillion.com password getzillion

On 3/2/2022 at 1:30 AM, smackawack said:

Can I use this similar code to add buttons to my header area?  Looking to replace the header items with buttons.  getzillion.com password getzillion

It looks like you figured it out with this?

.collection a {
    background: #1c1c1c !important;
    margin-right: 15px;
    border-radius: 3px;
    background: url(https://res.cloudinary.com/sam13/image/upload/v1646265754/bg_hjirgn.png) no-repeat !important;
    background-size: cover !important
}

I have similar issue. Need to change the font family specifically not the colors/ size as much... can you help?

10 hours ago, davidmillerrobinson said:

I have similar issue. Need to change the font family specifically not the colors/ size as much... can you help?

What is your site url?

I was able to customize the button in desktop view but now I'm having trouble with the mobile version.

Any suggestions?

https://woman-evolve.squarespace.com/   - password: EVOLVE

On 8/26/2022 at 9:24 PM, andreabalogun_ said:

I was able to customize the button in desktop view but now I'm having trouble with the mobile version.

Any suggestions?

https://woman-evolve.squarespace.com/   - password: EVOLVE

 

What is problem? It looks like you removed header on mobile?

On 8/28/2022 at 4:03 AM, tuanphan said:

What is problem? It looks like you removed header on mobile?

I didn't mean to remove it, but I'm referring to when you press the hamburger icon to reveal the navigation menu.

1 hour ago, andreabalogun_ said:

I didn't mean to remove it, but I'm referring to when you press the hamburger icon to reveal the navigation menu.

Use this CSS to customize mobile button

.header-menu-cta a {
    background-color: green !important;
    font-family: monospace !important;
}

6 hours ago, tuanphan said:

.header-menu-cta a {
    background-color: green !important;
    font-family: monospace !important;
}

Thanks so much!

Hi! I've been trying to change the size of the text on the button in my header. The rest of the buttons on my page has the "correct" font size, but in my header the size is bigger. I tried the code above, but it didn't seem to affect the size, just colours. Any help?

https://etna-as.squarespace.com/

PW: Lansering

On 9/12/2022 at 3:11 PM, Oda said:

Hi! I've been trying to change the size of the text on the button in my header. The rest of the buttons on my page has the "correct" font size, but in my header the size is bigger. I tried the code above, but it didn't seem to affect the size, just colours. Any help?

 

https://etna-as.squarespace.com/

PW: Lansering

Use this CSS

header#header a.btn {
    font-size: 20px !important;
}

Hi! I want to change the thickness of the button in the Header. I tried the custom CSS code but I cant figure out how.
I want it to be not as "fat" or high, but just slimmer.
Can anyone help me? THanks!
dalmatian-sponge-m44a.squarespace.com
Password: Wiwimaster1!s

On 10/29/2022 at 2:44 AM, Octavian9765 said:

Hi! I want to change the thickness of the button in the Header. I tried the custom CSS code but I cant figure out how.
I want it to be not as "fat" or high, but just slimmer.
Can anyone help me? THanks!
dalmatian-sponge-m44a.squarespace.com
Password: Wiwimaster1!s

Add to Design > Custom CSS

header#header a.btn {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

9 hours ago, tuanphan said:

Add to Design > Custom CSS

header#header a.btn {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

 

THanks!

But it doesn'T look very well. The text is not in the middle now. How can I fix that?

On 11/1/2022 at 3:04 AM, Octavian9765 said:

THanks!

But it doesn'T look very well. The text is not in the middle now. How can I fix that?

What is your site url? Sometimes each site will need a different code

3 hours ago, tuanphan said:

What is your site url? Sometimes each site will need a different code

www.wiwimeisterschaften.de

On 11/4/2022 at 11:48 PM, Octavian9765 said:

www.wiwimeisterschaften.de

It is fine to me

51 minutes ago, tuanphan said:

It is fine to me

Yeah the problem is that it's too fat. I would like to make it slimmer. And the code you sent me made it slimmer, however the text was down instead of in the middle of the button. You see it normal now, because I changed it back to original, since the website is already live.

On 11/6/2022 at 9:48 PM, Octavian9765 said:

Yeah the problem is that it's too fat. I would like to make it slimmer. And the code you sent me made it slimmer, however the text was down instead of in the middle of the button. You see it normal now, because I changed it back to original, since the website is already live.

Use this CSS

header#header a.btn {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

On 11/10/2022 at 7:49 AM, tuanphan said:

Use this CSS

header#header a.btn {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

 

Thanks a lot! that worked.