Jump to content

Advanced CSS for header?

Recommended Posts

  • Replies 15
  • Views 3.5k
  • Created
  • Last Reply

Top Posters In This Topic

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? 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

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

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 year later...

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

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

image.thumb.png.7394d4d9256d1bdbb446ac30bc0ae471.png

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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

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

image.png.75ad7144530ad12d8d1fe8fa7cccce58.png

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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 

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

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.