Jump to content

Changing Nav Header and Logo on product page.

Recommended Posts

Posted

Hey guys, I really need some help. I'm trying to change around the sizing and position of my logo and nav bar on my site, but only on the product pages. I know how to do this on a regular page where I can use a code block on the page to target just that Pages header, but because It's a product page and theres no way for me to inject code into the header or add a code block, Im at a loss. Any help would be greatly appreciated. I want the logo to be smaller and on the far left followed by the three nav links to the right of it.  

Screen Shot 2020-11-10 at 11.25.21 PM.png

Posted (edited)

Can I also ask this question? I have my navigation set to transparent, but on pages such as blog post, and product pages, where I can't add a banner image and the background is white, I can't see my white nav menu. Some how now my navigation is now automatically turning black when on the white banner, squarespace must have updated this...? I want to be able to adjust the nav meny for only product pages. 

 

https://parkbrewing.squarespace.com/config/pages/5fa1adaf8071535fad46d66f/categories/5fa1adaf8071535fad46d673

PW: "password"

Edited by Park_Brewing_Company
Posted
1 hour ago, Park_Brewing_Company said:

Can I also ask this question? I have my navigation set to transparent, but on pages such as blog post, and product pages, where I can't add a banner image and the background is white, I can't see my white nav menu. Some how now my navigation is now automatically turning black when on the white banner, squarespace must have updated this...? I want to be able to adjust the nav meny for only product pages. 

 

https://parkbrewing.squarespace.com/config/pages/5fa1adaf8071535fad46d66f/categories/5fa1adaf8071535fad46d673

PW: "password"

Now i see it in black, what you need to edit? the background of the nav?

image.thumb.png.ed96c749ce566ee014de790e9e029ff1.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Pinch/Zoom images, videos - PDFs Lightbox - ...) </>  🗓️ Delivery Date Picker (Date picker form field)
Gallery block 7.1 workaround </> 🤖 Ask me anything

Posted (edited)

Yes, thank you, I would like to target the background of the nav to be this colour "hsl(184, 55%, 44%)" and the text to be "white".  on all product pages. This includs the Title "PARK BREWING COMPANY INC" and cart button to be in white (on all product pages).

The nav should remain transparent on my other pages. 

Edited by Park_Brewing_Company
Posted
56 minutes ago, Park_Brewing_Company said:

Yes, thank you, I would like to target the background of the nav to be this colour "hsl(184, 55%, 44%)" and the text to be "white".  on all product pages. This includs the Title "PARK BREWING COMPANY INC" and cart button to be in white (on all product pages).

The nav should remain transparent on my other pages. 

.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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Pinch/Zoom images, videos - PDFs Lightbox - ...) </>  🗓️ Delivery Date Picker (Date picker form field)
Gallery block 7.1 workaround </> 🤖 Ask me anything

Posted
On 11/11/2020 at 2:26 PM, donovanc said:

Hey guys, I really need some help. I'm trying to change around the sizing and position of my logo and nav bar on my site, but only on the product pages. I know how to do this on a regular page where I can use a code block on the page to target just that Pages header, but because It's a product page and theres no way for me to inject code into the header or add a code block, Im at a loss. Any help would be greatly appreciated. I want the logo to be smaller and on the far left followed by the three nav links to the right of it.  

Screen Shot 2020-11-10 at 11.25.21 PM.png

You can try to target the product collection body by this selector

body.collection-type-products.view-item

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Pinch/Zoom images, videos - PDFs Lightbox - ...) </>  🗓️ Delivery Date Picker (Date picker form field)
Gallery block 7.1 workaround </> 🤖 Ask me anything

Posted
8 minutes ago, bangank36 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

wow this is perfect. I wasn't sure how to target the collection-type-products properly. This is all amazing code and works perfectly. Can I ask for more tweak? how can I make the background announcement bar "Sign up for 10% off" to white. So that is separates from the navigation menu?

 

Thank you in advance. I've never aked for help on this forum before, and was spending a lot of time on this issue. You've saved me big time. 

Regards,

Posted
3 minutes ago, Park_Brewing_Company said:

wow this is perfect. I wasn't sure how to target the collection-type-products properly. This is all amazing code and works perfectly. Can I ask for more tweak? how can I make the background announcement bar "Sign up for 10% off" to white. So that is separates from the navigation menu?

 

Thank you in advance. I've never aked for help on this forum before, and was spending a lot of time on this issue. You've saved me big time. 

Regards,

.collection-type-products.view-item .sqs-announcement-bar-content {
  background: #fff;
}
.collection-type-products.view-item .sqs-announcement-bar-text * {
  color: #000 !important;
}
.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;
}

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Pinch/Zoom images, videos - PDFs Lightbox - ...) </>  🗓️ Delivery Date Picker (Date picker form field)
Gallery block 7.1 workaround </> 🤖 Ask me anything

Posted
2 minutes ago, bangank36 said:

.collection-type-products.view-item .sqs-announcement-bar-content {
  background: #fff;
}
.collection-type-products.view-item .sqs-announcement-bar-text * {
  color: #000 !important;
}
.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;
}

 

Thank you, I was just working on this, and had figured our how to get the announcement bar white, and was working on the text. This is beyond perfect. Greatly appreciate the help. 

Posted (edited)

How can I edit the shoping-cart page to do the same. I am unable to edit the header of the shopping cart page, and the default colour code which is applied across my page has white text, and now its against a white background. 

 

body#cart header#header * { color: black; fill: black; stroke: black; }

This is code I used to edit the cart header, but my problem is with the drop down when on the folder in the nav. My "STORES" folder doesn't display properly on the shoping cart page.  I just want the background to be this  color. hsl(184, 55%, 44%)

 

https://www.parkbrewing.company/cart

Access: password

Edited by Park_Brewing_Company
Posted
2 hours ago, Park_Brewing_Company said:

How can I edit the shoping-cart page to do the same. I am unable to edit the header of the shopping cart page, and the default colour code which is applied across my page has white text, and now its against a white background. 

 

body#cart header#header * { color: black; fill: black; stroke: black; }

This is code I used to edit the cart header, but my problem is with the drop down when on the folder in the nav. My "STORES" folder doesn't display properly on the shoping cart page.  I just want the background to be this  color. hsl(184, 55%, 44%)

 

https://www.parkbrewing.company/cart

Access: password

selector is body.cart

body.cart .sqs-announcement-bar-content {
  background: #fff;
}
body.cart .sqs-announcement-bar-text * {
  color: #000 !important;
}
body.cart .header .header-announcement-bar-wrapper {
  background: hsl(184, 55%, 44%);
}
body.cart .white-bold .header-title-text a#site-title {
  color: #fff;
}
body.cart .header-nav-item--collection > a {
  color: #fff !important;
}
body.cart .white-bold .header-actions .icon--stroke svg,
body.cart .white-bold .header-actions .icon--stroke .icon-cart-quantity {
  stroke: #fff !important;
  color: #fff !important;
}
body.cart .white-bold .burger-inner .top-bun, body.cart .white-bold .burger-inner .patty, body.cart .white-bold .burger-inner .bottom-bun {
  background-color: #fff !important;
}

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Pinch/Zoom images, videos - PDFs Lightbox - ...) </>  🗓️ Delivery Date Picker (Date picker form field)
Gallery block 7.1 workaround </> 🤖 Ask me anything

Posted
2 minutes ago, bangank36 said:

selector is body.cart


body.cart .sqs-announcement-bar-content {
  background: #fff;
}
body.cart .sqs-announcement-bar-text * {
  color: #000 !important;
}
body.cart .header .header-announcement-bar-wrapper {
  background: hsl(184, 55%, 44%);
}
body.cart .white-bold .header-title-text a#site-title {
  color: #fff;
}
body.cart .header-nav-item--collection > a {
  color: #fff !important;
}
body.cart .white-bold .header-actions .icon--stroke svg,
body.cart .white-bold .header-actions .icon--stroke .icon-cart-quantity {
  stroke: #fff !important;
  color: #fff !important;
}
body.cart .white-bold .burger-inner .top-bun, body.cart .white-bold .burger-inner .patty, body.cart .white-bold .burger-inner .bottom-bun {
  background-color: #fff !important;
}

 

Absolutely perfect. You don't know how greatly appreciated your response has been. This is a huge thing for us as we are trying to prepare the launch of our site. 


Thank you sincerely,

Posted
4 minutes ago, Park_Brewing_Company said:

Absolutely perfect. You don't know how greatly appreciated your response has been. This is a huge thing for us as we are trying to prepare the launch of our site. 


Thank you sincerely,

your site is amazing

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Pinch/Zoom images, videos - PDFs Lightbox - ...) </>  🗓️ Delivery Date Picker (Date picker form field)
Gallery block 7.1 workaround </> 🤖 Ask me anything

Posted
4 hours ago, bangank36 said:

your site is amazing

Wow thank you, that is humbling to hear. We are excited to see the site go live soon, I have never built a website, or a brewery before so this is all a first for us.  I couldn't have done it without help from yourself and others. I have been very fortunate to self-learn some css, purchase some code, and use some plugins, which have drastically transformed our site from the vanilla SS version. SS has it pros and cons, and the biggest pro is definitely the community. 

Posted
11 minutes ago, Park_Brewing_Company said:

Wow thank you, that is humbling to hear. We are excited to see the site go live soon, I have never built a website, or a brewery before so this is all a first for us.

The quick look I took at your site and things looked good! Keep going man!

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Posted

Maybe you can help with one more thing. I can't seem to get this right, I have been trying to make the text in the yellow sections to overflow, I have achieved the look I want but having done it in the right way, and the text to the right renders, causing the screen (entire page) to scroll right.

 

//DUTY-MAY-APPLY-YELLOW-BANNER////////
#block-5fb5944149cf9601e09fc226, #block-yui_3_17_2_1_1605929460558_8712, #block-6abf4af40022f5066af2, #block-cb9455c62fd1addc441b {
  overflow-wrap: normal;
  margin-right: -500px !important;
  margin-left: -500px !important;
  }

This is what I used to create the look of the banner I like, but as mentioned it creates a side scroll of the whole page. How can i prevent this, I was trying to get the text box to text-overflow: clip, or overflow-hidden. but couldn't make it work. 


https://www.parkbrewing.company/store-front

access: password

Posted (edited)

@Park_Brewing_Company

Remove (make a copy somewhere) or comment out any previous attempts at this effect.

Add the following to Design > Custom CSS.

UPDATE: Do not put this where indicated. As of this date SS's less version will choke on this otherwise perfectly valid CSS. However it my work in other places like Page Settings > Advanced > Code Header Injection when wrapped in a style tag or a code block. I'm keeping this post around as it shows the use of CSS variables. For a version of my code that works with current as of this date SS less version read on!

/* begin DUTY-MAY-APPLY-YELLOW-BANNER */

  [data-section-id="5fb59441b14d1d46a6eafccb"] > .content-wrapper,
  [data-section-id="5fb88266b41d9717884d2580"] > .content-wrapper,
  [data-section-id="5fb88d05e550fd43b677cbef"] > .content-wrapper,
  [data-section-id="5fb88dc9e8de8f0088185e94"] > .content-wrapper
  
    {
    
      overflow: hidden;
      
      }
      
  [data-section-id="5fb59441b14d1d46a6eafccb"] h2,
  [data-section-id="5fb88d05e550fd43b677cbef"] h2
  
    {
    
      --margin-left: -8.75em; /* change this value to pull the text off left
                                 side of window */
      
      margin-left: calc( var( --margin-left ) - 6vw ); /* do not change these
                                                          values */
      white-space: nowrap !important;
      
      }
      
  [data-section-id="5fb88266b41d9717884d2580"] h3,
  [data-section-id="5fb88dc9e8de8f0088185e94"] h3
  
    {
    
      --margin-left: -3em; /* change this value to pull the text off left side
                              of window */
      
      margin-left: calc( var( --margin-left ) - 6vw ); /* do not change these
                                                          values */
      white-space: nowrap !important;
      
      }
      
    /* end DUTY-MAY-APPLY-YELLOW-BANNER */

This is for a v7.1 site and is specific to Park_Brewing_Company's needs.

Let us know how it goes.

Edited by creedon
version 2 of CSS

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Posted (edited)
21 hours ago, creedon said:

@Park_Brewing_Company

Remove (make a copy somewhere) or comment out any previous attempts at this effect.

Add the following to Design > Custom CSS.



/* begin DUTY-MAY-APPLY-YELLOW-BANNER */

  [data-section-id="5fb59441b14d1d46a6eafccb"] > .content-wrapper,
  [data-section-id="5fb88266b41d9717884d2580"] > .content-wrapper,
  [data-section-id="5fb88d05e550fd43b677cbef"] > .content-wrapper,
  [data-section-id="5fb88dc9e8de8f0088185e94"] > .content-wrapper
  
    {
    
      overflow: hidden;
      
      }
      
  [data-section-id="5fb59441b14d1d46a6eafccb"] h2,
  [data-section-id="5fb88d05e550fd43b677cbef"] h2
  
    {
    
      --margin-left: -8.75em; /* change this value to pull the text off left
                                 side of window */
      
      margin-left: calc( var( --margin-left ) - 6vw ); /* do not change these
                                                          values */
      white-space: nowrap !important;
      
      }
      
  [data-section-id="5fb88266b41d9717884d2580"] h3,
  [data-section-id="5fb88dc9e8de8f0088185e94"] h3
  
    {
    
      --margin-left: -3em; /* change this value to pull the text off left side
                              of window */
      
      margin-left: calc( var( --margin-left ) - 6vw ); /* do not change these
                                                          values */
      white-space: nowrap !important;
      
      }
      
    /* end DUTY-MAY-APPLY-YELLOW-BANNER */

Let us know how it goes.

Error: "Operation on an invalid type" anyone know what this means, or how to address this? Never had this issue before. I saved the code above in my css, starting at line 604. 

 

I do have this css added to the #blocks 


    padding-top: 17px;
    padding-bottom: 17px;
}
 

Edited by Park_Brewing_Company
Posted (edited)

@Park_Brewing_Company

Burned by SS's ancient less preprocessor.

Try this version instead.

/* begin DUTY-MAY-APPLY-YELLOW-BANNER */

  [data-section-id="5fb59441b14d1d46a6eafccb"] > .content-wrapper,
  [data-section-id="5fb88266b41d9717884d2580"] > .content-wrapper,
  [data-section-id="5fb88d05e550fd43b677cbef"] > .content-wrapper,
  [data-section-id="5fb88dc9e8de8f0088185e94"] > .content-wrapper
  
    {
    
      overflow: hidden;
      
      }
      
  [data-section-id="5fb59441b14d1d46a6eafccb"] h2,
  [data-section-id="5fb88d05e550fd43b677cbef"] h2
  
    {
    
      @margin-left: -8.75em; /* change this value to pull the text off left side
                                of window */
      
      margin-left: calc( @margin-left - 6vw ); /* do not change these values */
      white-space: nowrap !important;
      
      }
      
  [data-section-id="5fb88266b41d9717884d2580"] h3,
  [data-section-id="5fb88dc9e8de8f0088185e94"] h3
  
    {
    
      @margin-left: -3em; /* change this value to pull the text off left side of
                             window */
      
      margin-left: calc( @margin-left - 6vw ); /* do not change these values */
      white-space: nowrap !important;
      
      }
      
    /* end DUTY-MAY-APPLY-YELLOW-BANNER */

The only difference between the two versions is that first uses CSS variables and the second uses less variables.

Let us know how this one goes.

7 hours ago, Park_Brewing_Company said:

I do have this css added to the #blocks 


    padding-top: 17px;
    padding-bottom: 17px;
}

I don't think that will be an issue as I'm only messing with the left.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

  • 3 months later...
Posted
On 11/17/2020 at 4:45 AM, bangank36 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, 

https://hypersphere-gar-b8yj.squarespace.com/nettbutikk/p/milk-dip-cup-486r6

Password: 123

 

I used this one and it worked out great! 

The only problem is the drop down menu. How do I target this one with css and change it to a darker background? 

Problem two:

How do I apply this header to the shopping cart as well? :)

Posted
2 minutes ago, Kesia said:

Hi, 

https://hypersphere-gar-b8yj.squarespace.com/nettbutikk/p/milk-dip-cup-486r6

Password: 123

 

I used this one and it worked out great! 

The only problem is the drop down menu. How do I target this one with css and change it to a darker background? 

Problem two:

How do I apply this header to the shopping cart as well? 🙂

dropdown

body[data-menu-overlay-theme-switcher="true"]:not(.header--menu-open) .header-nav-folder-content {
    background-color: #ccc;
}

cart

#cart .header .header-announcement-bar-wrapper {
  background: hsl(184, 55%, 44%);
}

image.png.a9eeceb9b1f5ab1ba50c5612ee17fd28.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Pinch/Zoom images, videos - PDFs Lightbox - ...) </>  🗓️ Delivery Date Picker (Date picker form field)
Gallery block 7.1 workaround </> 🤖 Ask me anything

Posted
5 minutes ago, bangank36 said:

dropdown


body[data-menu-overlay-theme-switcher="true"]:not(.header--menu-open) .header-nav-folder-content {
    background-color: #ccc;
}

cart


#cart .header .header-announcement-bar-wrapper {
  background: hsl(184, 55%, 44%);
}

image.png.a9eeceb9b1f5ab1ba50c5612ee17fd28.png

And I place this in design -> css code ? 

 

Can´t get any of them to work :s

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.