Park_Brewing_Company

The issue seems to be solved with the image in overlap design. I appreciate the assistance.

Why or what can I do to solve the issue of my banners (or any image) which I apply a native effect to. It displays on my monitor as upside down? I have cleared cache etc. The issue is on any devices I am logged into square space with my account, except mobile (mobile view or desktop). Also experiencing the issue on multiple browsers, even though not logged in to my Square space account. Any image with a any native effect displays upside down. 

I've uploaded screenshots for reference. 

Hey tuanphan, 

I mean the image of the dark lager cans, when this image is in design "overlap" it has the issue, I'll revert the image to overlap, as I had changed it to "card" to temporarily avoid the issue.  There seems to be an overflow issue.

I can not recreate the issues I am having with the banners and tilt effect on other devices, it seems to only be my devices which are logged in that display the issue. 

Site URL: https://www.parkbrewing.company/

I have been using a custom script (https://schwartz-edmisten.com/blog/how-to-add-parallax-to-squarespace-7-1) for background image parallax, but recently it became buggy and started having lots of issues displaying correctly. I fought with it for a while and had some success, but finally decided to dump the script and revert back to the native square-space image effects.

Our site mostly uses the tilt effect, but when I apply native image effects on background images, the image often flips horizontally (or vertically?) it displays upside down. What gives, why is this happening and what can I do? I just want to have slight parallax on background images to add some depth to our artwork. 

I've also noticed that the background images that are flipped (displaying upside down), travel or tilt in the opposite direction (or correct direction for proper parallax). I've tested on a couple of different devices and browsers and the issue isn't isolated to the editing browser. Can you change the native tilt direction of the image, assuming we can sort out these other issues first?

Also the first image on this page https://www.parkbrewing.company/lineup is somehow cut off by a white box, I imagine its some type element style - overflow "hidden" issue or image card wrapper, but I can't resolve this. 

@creedon

This worked absolutely amazingly, the margin edit is perfect as well, I have been able to position the banner just how I like it. Honestly, this is like magic, I have no idea how you did it, but man is it ever impressive. 

Greatly appreciate the service, I owe you one.

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

1 minute ago, CASKATE said:

Okay I see. 

Thanks @Park_Brewing_Company

 

Its actually desktop my issue is.

whats the issue? how do you have your settings, or format set on the store page. 

redirects me to this url, https://viola-seahorse-l65k.squarespace.com/config/?frameUrl=%2Fshop

not sure what the issue is, but the code I posted will nest the sidebar on mobile, and you can get it to position at top only on mobile. 

this is the full code and how I have mine structured.

//NEST-CATEGORY-MOBILE-HIDE-CATEGORY///
@media screen and (max-width: 640px) {
.tweak-products-nested-category-type-sidebar .products.collection-content-wrapper .nested-category-children {
    display: none !important;
  } }
  
.nested-category-tree-wrapper {
    display: flex !important;
}
@media screen and (max-width: 640px) {
.products.collection-content-wrapper .nested-category-tree-wrapper {
    float: inherit;
    min-width: 220px;
    max-width: 300px;
      margin-top: 30px;  
     margin-right: 40px;
      margin-bottom: 15px;
  } }

.products.collection-content-wrapper .nested-category-tree-wrapper { 
     margin-right: 20px;
  }
 

34 minutes ago, CASKATE said:

Site name: https://viola-seahorse-l65k.squarespace.com/config/design

Password: RosRosRos

 

 

you need to send a link to the actually website, which isn't /config/ that is the url to login in and edit, not the public url

34 minutes ago, CASKATE said:

Hi there, 

I’m also having this problem. Wondering if anybody can help 🙃

@tuanphan the suggested code is working. However it displays as a side bar.

@Park_Brewing_Company this update also works but the display is stacked to the top.

I’d like to keep the styling of the category title, just have them appear at the top of each category page. 

Thanks in advance   ✌️

 

This sets it to the top for mobile only. this is what I have. sorry, never copied this part of the code.

@media screen and (max-width: 640px) {

.tweak-products-nested-category-type-sidebar .products.collection-content-wrapper .nested-category-children {

    display: none !important;

  } }

.products.collection-content-wrapper .nested-category-tree-wrapper>ul {

    display: none !important;

}

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

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. 

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,

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

Just now, Park_Brewing_Company said:

How to do you nest this above the products on mobile. So that the nested categories don't push the products over to the right. but rather come before the products in order and nest above. 

 

store page: https://www.parkbrewing.company/products-attack-the-block

access: "password"

 

 

NVM mind, changed float to inherit in this code.

.nested-category-tree-wrapper {
    display: flex !important;
}
.products.collection-content-wrapper .nested-category-tree-wrapper {
    float: inherit;
    min-width: 220px;
    max-width: 300px;
    margin-right: 40px;
      margin-bottom: 15px;
}

On 11/19/2020 at 5:54 AM, tuanphan said:

 

Add to Home > Design > Custom CSS

.nested-category-tree-wrapper {
    display: flex !important;
}

 

How to do you nest this above the products on mobile. So that the nested categories don't push the products over to the right. but rather come before the products in order and nest above. 

store page: https://www.parkbrewing.company/products-attack-the-block

access: "password"

On 11/19/2020 at 5:54 AM, tuanphan said:

 

Add to Home > Design > Custom CSS

.nested-category-tree-wrapper {
    display: flex !important;
}

 

I am very interested in this also. I have four store pages, I call them "Collections:" they all have unique products listed which are different in design to the other pages or "Collections:" the issue I am having is that when you are on one store "Collection: Attack-the-Block" for example. There is no navigation in the side bar to access the other store pages "Collection: Park Brewing". I Have created images at the bottom of the page, and top of the page previously to provide links to access the other store pages "collections:" and all the store pages are accessible in the drop down menu in the navigation.

I would like the store pages to be included above my categories in the side navigation. so that it would be structured like this. 

Hey guys, can anyone here tell me how to make this underline animation go from right to left. 

SquareSpace 7.1

www.parkbrewing.company

PW: password

Thank you,

Yes sorry about that URL. I have solved the issue with these css codes. I was able to target the products page items, and adjusted the announcement bar as well.  Will post this here in case anyone else can use. 

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

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. 

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

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,

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. 

No I don't need help on this. I used some code to add banner image to blog posts. But for other pages, "product pages" I still have this issue. 

My navigation menu is set to transparent, and on pages where you can't change the background or banner behind a nav menu, its usually white. My font now seems to be defaulting to black on these pages. Perhaps SS has updated this issue? 

How can I change the nav background, on all my product pages, here is one bellow.

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

PW: "password"

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"

Has this issue been resolved? I also have white header font, and on the blog page my white text disappears. I can't edit the header without changing it across the entire site, and I can't add a background image to the blog post. Or can I?

here is a link to a blog page.

https://www.parkbrewing.company/blog-our-journey/no-great-story-ever-started-with-someone-eating-a-salad

password is "password"