Customizing button in header nav

On 8/29/2022 at 10:45 AM, tuanphan said:

Use this CSS to customize mobile button

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

 

how are you finding the class to refer to the header button? i've been using inspect and have had no luck figuring it out so far.

edit: Never mind, the css code injection editor had some html code in it that was killing the whole file. I got rid of that and things started working

On 8/15/2023 at 7:47 PM, Caspertheghost said:

how are you finding the class to refer to the header button? i've been using inspect and have had no luck figuring it out so far.

edit: Never mind, the css code injection editor had some html code in it that was killing the whole file. I got rid of that and things started working

I know code, so I inspect with F12 then checking it. Also, you can see this list 

https://forum.squarespace.com/topic/160059-share-squarespace-71-css-id-list/

I want to change the font of the nav bar button to be the same as the font in the nav links.

I cannot remember or find the name of the font though!

So I need to find the font name from the nav links, and also change the button to have the same font.

Is this possible? 🙏😄

Website: https://sprout-flamingo-9m98.squarespace.com

Password: SQUARESPACE

On 8/31/2023 at 7:07 PM, Jen__ said:

I want to change the font of the nav bar button to be the same as the font in the nav links.

I cannot remember or find the name of the font though!

So I need to find the font name from the nav links, and also change the button to have the same font.

Is this possible? 🙏😄

Website: https://sprout-flamingo-9m98.squarespace.com

Password: SQUARESPACE

Header buttons uses Primary Button Style so you can change it in Site Styles

Or if you want to use code, add this to Website > Website Tools > Custom CSS

/* Header buttons */
header#header a.btn {
    font-family: 'Roboto' !important;
}

@tuanphan

Yay! The code worked a treat. Absolutely delighted. Thankyou Sir 🙏🙏😄😄💯💎

I'm hoping someone can help me. I'm trying to use an image as my navigation button's background when it's hovered over. Here is the code I have, and it all seems to make sense, but the image isn't showing up. I'll be honest that CSS is not my forte, so maybe I'm doing something dopey and obvious??:

.header-actions-action .btn {
    padding: 10px 20px;
    font-size: 15px;
    background:transparent !important;
    background-image:url('https://static1.squarespace.com/static/545db486e4b0b49a35de6ab0/t/6599d3b970f8bd43cbe5ba57/1704580025395/Screenshot+2024-01-06+142512.png');background-position:center;background-size:contain;background-repeat:no-repeat !important;
}

On 1/7/2024 at 5:44 AM, rwaldrondesigns said:

I'm hoping someone can help me. I'm trying to use an image as my navigation button's background when it's hovered over. Here is the code I have, and it all seems to make sense, but the image isn't showing up. I'll be honest that CSS is not my forte, so maybe I'm doing something dopey and obvious??:

 

.header-actions-action .btn {
    padding: 10px 20px;
    font-size: 15px;
    background:transparent !important;
    background-image:url('https://static1.squarespace.com/static/545db486e4b0b49a35de6ab0/t/6599d3b970f8bd43cbe5ba57/1704580025395/Screenshot+2024-01-06+142512.png');background-position:center;background-size:contain;background-repeat:no-repeat !important;
}

What is your site url? We can check the code easier

Hi all,

I'm having an issue that is slightly different. I would like to change the header nav button color only on a specific page. I can't see to get the code right. 

This is the page: https://www.bliss-hotel.net/home-riad-marrakech , I would like the "Book now" button to be red only on this page. Does anyone have an idea of how to write this code in the code injection?

Thank you!

On 3/23/2024 at 12:01 AM, alihaz89 said:

Hi all,

I'm having an issue that is slightly different. I would like to change the header nav button color only on a specific page. I can't see to get the code right. 

This is the page: https://www.bliss-hotel.net/home-riad-marrakech , I would like the "Book now" button to be red only on this page. Does anyone have an idea of how to write this code in the code injection?

Thank you!

You can use this code to Website > Website Tools > Custom CSS (DO NOT ADD TO CODE INJECTION)

body#collection-65f86dba64b1b80fde160162 a.btn {
    background-color: red !important;
}

Hi @tuanphan

I tried adding this code on in the CSS but I don't see any changes :/. Any idea why? 

Thanks so much for your help!

On 3/27/2024 at 12:33 AM, alihaz89 said:

Hi @tuanphan

I tried adding this code on in the CSS but I don't see any changes :/. Any idea why? 

Thanks so much for your help!

 I just tested and it still works here. You try keeping code in CSS box, I can check again easier.

Or try moving code to top of Custom CSS box

Hi @tuanphan

I tried adding it in the CSS box on the top but I still don't see a change. I don't know why you're able to see it and I can't :/. Let me know if there's any other solution. I really appreciate your help!

Thank you

Alizée

On 6/18/2024 at 5:29 AM, alihaz89 said:

Hi @tuanphan

I tried adding it in the CSS box on the top but I still don't see a change. I don't know why you're able to see it and I can't :/. Let me know if there's any other solution. I really appreciate your help!

Thank you

Alizée

You can keep code in CSS box and let me know, I can check again easier

@tuanphan ok, it's on top of the CSS box. Let me know what you see.

Thank you so much!

On 6/19/2024 at 11:34 PM, alihaz89 said:

@tuanphan ok, it's on top of the CSS box. Let me know what you see.

Thank you so much!

Browser give me an error, so I guess you have a syntax error on CSS box (it will make all or some CSS code didn't work properly). If you look at bottom left/right corner, you will see a red notice.

If you don't know how to fix it, you can send all code in CSS box, I can check easier.

Hi @tuanphan,

Here's the code. I see it's on line 5, but I don't know what the issue is 😕

body#collection-65f86dba64b1b80fde160162 a.btn {
    background-color: red !important;
}

https://static1.squarespace.com/static/648a0aaa826edb34417322f6/t/64fa6ab6af011025f700fad6/1694132918140/Bliss+Cruise+Logo+W.pnghttps://static1.squarespace.com/static/648a0aaa826edb34417322f6/t/64fa6ab6af011025f700fad6/1694132918140/Bliss+Cruise+Logo+W.png

/* Adjust the width and margin as needed */
.sqs-block-accordion .sqs-block-content .sqs-block-html .your-accordion-image {
    float: right;
    margin-left: 10px; /* Adjust the margin to control the space between text and image */
}

/* Adjust the width and height of the image as needed */
.sqs-block-accordion .sqs-block-content .sqs-block-html .your-accordion-image img {
    max-width: 150px; /* Set the maximum width of the image */
    height: auto;
}https://static1.squarespace.com/static/648a0aaa826edb34417322f6/t/65f9bab2d0b0b32edecf582d/1710865074252/Bliss+Riad+Logo.png

On 6/22/2024 at 12:59 AM, alihaz89 said:

Hi @tuanphan,

Here's the code. I see it's on line 5, but I don't know what the issue is 😕

 

body#collection-65f86dba64b1b80fde160162 a.btn {
    background-color: red !important;
}

https://static1.squarespace.com/static/648a0aaa826edb34417322f6/t/64fa6ab6af011025f700fad6/1694132918140/Bliss+Cruise+Logo+W.pnghttps://static1.squarespace.com/static/648a0aaa826edb34417322f6/t/64fa6ab6af011025f700fad6/1694132918140/Bliss+Cruise+Logo+W.png

/* Adjust the width and margin as needed */
.sqs-block-accordion .sqs-block-content .sqs-block-html .your-accordion-image {
    float: right;
    margin-left: 10px; /* Adjust the margin to control the space between text and image */
}

/* Adjust the width and height of the image as needed */
.sqs-block-accordion .sqs-block-content .sqs-block-html .your-accordion-image img {
    max-width: 150px; /* Set the maximum width of the image */
    height: auto;
}https://static1.squarespace.com/static/648a0aaa826edb34417322f6/t/65f9bab2d0b0b32edecf582d/1710865074252/Bliss+Riad+Logo.png

Remove Line 05. It will make syntax error.

Hi @tuanphan

Genius! It works!

Thanks so much!