Changing Nav Header and Logo on product page.

@Kesia

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

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?

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? 🙂

10 hours ago, bangank36 said:

have you put it in Design_>Custom css section?

Yes! 🙂

Nothing happend :S Any ide of why?

@Kesia

It appears to be working to me.

11 hours ago, creedon said:

@Kesia

It appears to be working to me.

 

 

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. 

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?

11 hours ago, tuanphan said:

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

 

No, on the detail product pages it´s still white. 

11 hours ago, tuanphan said:

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

 

Fixed it! 😄

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

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);
}

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 

@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;
}

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

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/

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

• Change nav, announcement bar background, text, link, icon color on Individual Products page? https://www.lionessfitmom.com/shop/mama-appreciation-tote-bag

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;
}

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!

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!

 

 

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

1 hour ago, Beyondspace said:

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

https://www.dottirhotyoga.com/shop/p/coconut-shell-candle-root-to-rise

Password: hello

It looks different from the image you attached before

Can you mark the element you want to check?

1 hour ago, Beyondspace said:

It looks different from the image you attached before

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! 

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?

On 3/25/2023 at 11:40 PM, tuanphan said:

It looks like you figured it out?

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. 🙂 

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

My testing