Advanced CSS for header?

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

Can someone help me with advanced css for non-linked headers? I would like to change the color of the non-link page headers (currently white so you can't see my logo) but I don't have experience in coding and am not sure how I find out the number of the color I want to use from my color palette.

Thank you!

7 minutes ago, lizindc79 said:

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

Can someone help me with advanced css for non-linked headers? I would like to change the color of the non-link page headers (currently white so you can't see my logo) but I don't have experience in coding and am not sure how I find out the number of the color I want to use from my color palette.

Thank you!

Can you share some screenshot of the desired result you want to achieve? 

47 minutes ago, bangank36 said:

Can you share some screenshot of the desired result you want to achieve? 

https://www.etlicsw.com/privacy-policy

I would like, instead of the header to just be white, to be the same color as the footer or the color of the "Individual Therapy" section under "Services".

Thanks!

16 hours ago, lizindc79 said:

https://www.etlicsw.com/privacy-policy

I would like, instead of the header to just be white, to be the same color as the footer or the color of the "Individual Therapy" section under "Services".

Thanks!

Edit Privacy Policty Page >> Add a Code Block at bottom of page >> Paste this code into Code Block

<style>
  header#header {
    background-color: #6b8373 !important;
}
</style>

You are incredible! That absolutely worked. Is there a way to get the "Welcome" page sections in white?

17 hours ago, lizindc79 said:

You are incredible! That absolutely worked. Is there a way to get the "Welcome" page sections in white?

You mean Navigation items black to white or??

Yes, navigation items. White. 

20 hours ago, lizindc79 said:

Yes, navigation items. White. 

Use this new code

<style>
  header#header {
    background-color: #6b8373 !important;
}
  .header-nav-item a {
    color: white !important;
}
</style>

Brilliant. I so appreciate your help.

Hi, Sorry to jump on this comment section, but wondering if maybe you can help me. 

I want to change the colour of the navigation item called, BBQ Menu, on the header of my website to differentiate it from the different items. Right now all of them are white and want to make BBQ Menu to this colour #94624A if possible. 

Here is the link to our website for reference.

https://www.edgecatering.ca/

Thank you!!

Right now, I have these

.header-nav-folder-title[href="bbq-menu"] {
    color:  #94624A !important;
    font-weight: bold;
}

but is not working 😕

On 5/5/2023 at 6:04 AM, BAA said:

Right now, I have these

.header-nav-folder-title[href="bbq-menu"] {
    color:  #94624A !important;
    font-weight: bold;
}

but is not working 😕

 

You can also use this approach, it would be easier for you in the future

div.header-nav-item:nth-child(8)>a {
    color: #94624A !important;
    font-weight: bold;
}

@tuanphan hey man if you can help me, Im starting another paid website on squarespace and now I want to do things right from the begining.

the site is: https://primrose-cube-5ejs.squarespace.com/

I want 3 things changed in the header.

1 - Navigation Menu NOT stacked.

2 - Site title "Axe Bathroom and Mirros aligned verticaly with social icons and phone button.

3 - A space above the top margin of the header.

TY!

On 5/9/2023 at 11:37 PM, loylabel said:

@tuanphan hey man if you can help me, Im starting another paid website on squarespace and now I want to do things right from the begining.

the site is: https://primrose-cube-5ejs.squarespace.com/

I want 3 things changed in the header.

1 - Navigation Menu NOT stacked.

2 - Site title "Axe Bathroom and Mirros aligned verticaly with social icons and phone button.

3 - A space above the top margin of the header.

TY!

What is password?

Hi @tuanphan!

I'm curious, is there CSS we can insert to change the layout of the header in a different way than what is available?
I would like the logo to be centred, but the pages/folders not to be "stacked" to the left or underneath. 
I wonder if there is a way to put all the pages/folders in line with the logo, some pages/folders on the left and some on the right? And the logo still in the centre? 
For example, all in one line:

About me.....What is EFT?.....Ways to work with me.....(LOGO IMAGE)....Events....Blog.....Research

Thank you!
Ioana 

On 5/12/2023 at 1:23 PM, ILong said:

Hi @tuanphan!

I'm curious, is there CSS we can insert to change the layout of the header in a different way than what is available?
I would like the logo to be centred, but the pages/folders not to be "stacked" to the left or underneath. 
I wonder if there is a way to put all the pages/folders in line with the logo, some pages/folders on the left and some on the right? And the logo still in the centre? 
For example, all in one line:

About me.....What is EFT?.....Ways to work with me.....(LOGO IMAGE)....Events....Blog.....Research

Thank you!
Ioana 

Yes. Possible with some ways. If you share link to your site, we can check easier

With this layout, you can change header layout to Left Nav - Logo

Then we can help you easier