Jump to content

Changing Nav Header and Logo on product page.

Recommended Posts

11 hours ago, Kesia said:

And I place this in design -> css code ? 

 

Can´t get any of them to work :s

have you put it in Design_>Custom css section?

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
12 hours ago, creedon said:

@Kesia

Yes the code goes in Design > Custom CSS. Even if it doesn't appear to work leave it in there for diagnoses.

Yes the code is there, but not seem to work :s Any suggestion? 🙂

Link to comment
11 hours ago, creedon said:

@Kesia

It appears to be working to me.

1478685990_ScreenShot2021-03-17at2_19_16PM.png.4a90e2944968a1c233fbefac88348203.png

 

1252743_ScreenShot2021-03-17at2_20_27PM.png.236ebcb600566f9bea15605b3c07e96c.png

 

Yes I got the header to work 😄 

But the dropdown menu on all the detail product pages are still on a white background so you can´t see anything. 

Link to comment
On 3/18/2021 at 4:25 PM, Kesia said:

Yes I got the header to work 😄 

But the dropdown menu on all the detail product pages are still on a white background so you can´t see anything. 

Hi. I see dropdown blue here. It looks like you solved this?

 

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
  • 2 months later...
19 hours ago, SaraSara said:

@Park_Brewing_Company your site looks amazing. Specially,I like the animation on hover of navigation menu.How could you make it? 😃

Just did this for a site. You can use this CSS

/* nav items hover */
.header-nav-item>a:after {
    content: '';
    background: rgba(255,0,159,.5);
    height: 10px;
    width: 0;
    display: block;
    transition: width 1s;
    position: relative;
    top: -10px;
}
.header-nav-item>a:hover:after {
    width: 100%;
    transition: all 0.3s;
}
.header-nav-folder-item a:hover {
    background: rgba(255,0,159,.5);
}

 

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
20 hours ago, tuanphan said:

Just did this for a site. You can use this CSS


/* nav items hover */
.header-nav-item>a:after {
    content: '';
    background: rgba(255,0,159,.5);
    height: 10px;
    width: 0;
    display: block;
    transition: width 1s;
    position: relative;
    top: -10px;
}
.header-nav-item>a:hover:after {
    width: 100%;
    transition: all 0.3s;
}
.header-nav-folder-item a:hover {
    background: rgba(255,0,159,.5);
}

 

You are amazing 🙂 thank a bunch 

Link to comment
  • 10 months later...

@bangank36 or @tuanphan
 

I'm trying to use this code on a Moksha 7.0 site (here is the link but I'm not sure if you can access it as I'm working on this template in preview mode and the site is live with a different template) https://jonc-lund.squarespace.com/

However it's not working, any assistance would be appreciated.

//SHOP PAGES HEADER//
.collection-type-products.view-item .sqs-announcement-bar-content {
  background: #798081;
}
.collection-type-products.view-item .sqs-announcement-bar-text * {
  color: #000 !important;
}
.collection-type-products.view-item .header .header-announcement-bar-wrapper {
  background: #798081;
}
.collection-type-products.view-item .white-bold .header-title-text a#site-title {
  color: #fff;
}
.collection-type-products.view-item .header-nav-item--collection > a {
  color: #fff !important;
}
.collection-type-products.view-item .white-bold .header-actions .icon--stroke svg,
.collection-type-products.view-item .white-bold .header-actions .icon--stroke .icon-cart-quantity {
  stroke: #fff !important;
  color: #fff !important;
}
.collection-type-products.view-item .white-bold .burger-inner .top-bun, .collection-type-products.view-item .white-bold .burger-inner .patty, .collection-type-products.view-item .white-bold .burger-inner .bottom-bun {
  background-color: #fff !important;
}

Edited by SodaCreekDigital
Link to comment
On 4/25/2022 at 10:12 AM, SodaCreekDigital said:

@bangank36 or @tuanphan
 

I'm trying to use this code on a Moksha 7.0 site (here is the link but I'm not sure if you can access it as I'm working on this template in preview mode and the site is live with a different template) https://jonc-lund.squarespace.com/

However it's not working, any assistance would be appreciated.

//SHOP PAGES HEADER//
.collection-type-products.view-item .sqs-announcement-bar-content {
  background: #798081;
}
.collection-type-products.view-item .sqs-announcement-bar-text * {
  color: #000 !important;
}
.collection-type-products.view-item .header .header-announcement-bar-wrapper {
  background: #798081;
}
.collection-type-products.view-item .white-bold .header-title-text a#site-title {
  color: #fff;
}
.collection-type-products.view-item .header-nav-item--collection > a {
  color: #fff !important;
}
.collection-type-products.view-item .white-bold .header-actions .icon--stroke svg,
.collection-type-products.view-item .white-bold .header-actions .icon--stroke .icon-cart-quantity {
  stroke: #fff !important;
  color: #fff !important;
}
.collection-type-products.view-item .white-bold .burger-inner .top-bun, .collection-type-products.view-item .white-bold .burger-inner .patty, .collection-type-products.view-item .white-bold .burger-inner .bottom-bun {
  background-color: #fff !important;
}

You can duplicate site, or setup a new site with desired template then share url, we can check easier

preview template, shows with site admin/contributor only

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
On 4/27/2022 at 11:17 AM, tuanphan said:

You can duplicate site, or setup a new site with desired template then share url, we can check easier

preview template, shows with site admin/contributor only

@tuanphan This is another of my sites on Moksha, if you can use this to help me with what the code should be on a Moksha site, that would be appreciated.

https://www.lionessfitmom.com/

Link to comment
On 4/29/2022 at 10:29 AM, SodaCreekDigital said:

@tuanphan This is another of my sites on Moksha, if you can use this to help me with what the code should be on a Moksha site, that would be appreciated.

https://www.lionessfitmom.com/

You want

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
  • 10 months later...
On 11/17/2020 at 4:45 AM, Beyondspace said:
.collection-type-products.view-item .header .header-announcement-bar-wrapper {
  background: hsl(184, 55%, 44%);
}
.collection-type-products.view-item .white-bold .header-title-text a#site-title {
  color: #fff;
}
.collection-type-products.view-item .header-nav-item--collection > a {
  color: #fff !important;
}
.collection-type-products.view-item .white-bold .header-actions .icon--stroke svg,
.collection-type-products.view-item .white-bold .header-actions .icon--stroke .icon-cart-quantity {
  stroke: #fff !important;
  color: #fff !important;
}
.collection-type-products.view-item .white-bold .burger-inner .top-bun, .collection-type-products.view-item .white-bold .burger-inner .patty, .collection-type-products.view-item .white-bold .burger-inner .bottom-bun {
  background-color: #fff !important;
}

image.thumb.png.848243e42e0b89c8dc5e0496529417af.png

Hi, I'm using this code to change the colour of the nav bar from white to something else, however the text of the "folder" categories and the button remain black. Any ideas how to change them to white?

Thank you!

 

 

Screenshot 2023-03-24 at 09.49.35.png

Edited by Dottir
Link to comment
44 minutes ago, Dottir said:

Hi, I'm using this code to change the colour of the nav bar from white to something else, however the text of the "folder" categories and the button remain black. Any ideas how to change them to white?

Thank you!

 

 

Screenshot 2023-03-24 at 09.49.35.png

Can you share your URL so I can take a look?

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

It looks different from the image you attached before

image.thumb.png.f171e522309666be7a3bc8d292e77af9.png

Can you mark the element you want to check?

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
1 hour ago, Beyondspace said:

It looks different from the image you attached before

image.thumb.png.f171e522309666be7a3bc8d292e77af9.png

Can you mark the element you want to check?

Sorry, I added back the code now. So the code allowed me to change the nav bar background color in order for our logo to show and switch some of the text white. But the text for the folder categories (Classes, Yoga Teacher Trainings, Rent our space) and the "Start Yoga Today" button remain black.

So I have 2 questions:

1. Is there a way to make all text and button in the nav bar white?

2. Alternatively, would it be possible to put a different variation of the logo on the product page? For example put a black variation of our logo just on the product page so it shows with the white background. 

 

Thank you! 

Link to comment
On 3/24/2023 at 4:49 PM, Dottir said:

Sorry, I added back the code now. So the code allowed me to change the nav bar background color in order for our logo to show and switch some of the text white. But the text for the folder categories (Classes, Yoga Teacher Trainings, Rent our space) and the "Start Yoga Today" button remain black.

So I have 2 questions:

1. Is there a way to make all text and button in the nav bar white?

2. Alternatively, would it be possible to put a different variation of the logo on the product page? For example put a black variation of our logo just on the product page so it shows with the white background. 

 

Thank you! 

It looks like you figured it out?

image.thumb.png.448de416cbc728254215d03cc8db967b.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
On 3/25/2023 at 11:40 PM, tuanphan said:

It looks like you figured it out?

image.thumb.png.448de416cbc728254215d03cc8db967b.png

No I haven't.. I want to change the text that says "Classes", "Yoga Teacher Trainings", "Rent our space", "Contact" and the "Start Yoga Today" button on the right to be white. In the nav bar. 🙂 

Link to comment
14 minutes ago, Dottir said:

No I haven't.. I want to change the text that says "Classes", "Yoga Teacher Trainings", "Rent our space", "Contact" and the "Start Yoga Today" button on the right to be white. In the nav bar. 🙂 

You can try adding to Home > Design > Custom Css

.collection-type-products.view-item:not(.header--menu-open) .header-nav-wrapper .header-nav-list .header-nav-item > a {
  color: #fff;
}

Support me by pressing 👍 if this is useful for you

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

My testing

image.thumb.png.6d4367c241bf8c1b37c87f6354811777.png

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

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.