x

Sticky Header Changes Color When Page is Scrolled

There is an issue with the sticky header on my website. It looks fine until you scroll the page. Then it changes to the color of the page background, and clashes with my logo image. How can I correct this glitch?

1,887 Views
Message 1 of 15
Report
1 Best Answer

Best Answer

 

I appreciate candor, JJ.

 

WordPress was my original web host many years ago. I left it for a brief time for WiX, but that web host had other issues nearly as problematic as WordPress. I was among the first to take up Square as my web host when web hosting for Square vendors was initially announced. (As to the Square-Weebly hybrid relationship, I always found the strictly Square-hosted environment to be significantly better than the Weebly design GUI.)

 

As I've mentioned a couple of times, I liked Square as a pretty decent and originally free web host, both because I could live with or work around its limitations, AND because of its innate integration with my point-of-sale and my database of inventory and services.

 

The issue for me now is that the service, in some ways, has begun going backward, and instituting new fees while the functionality and flexibility has incrementally declined.

 

You're correct in anticipating that a color-morphing sticky header as a design norm is not at all what I hoped to hear.

 

I've removed the sticky header effect from my page and don't expect to use it again. By the way, I've been using the feature on my website for a couple of years or more, and it didn't start doing this until recently.

View Best Answer >

1,235 Views
Message 13 of 15
Report
14 REPLIES 14

This is how the page was designed. Notice that the header is black.

 

Will post another screenshot showing the header during scrolling...

 

Screenshot_20230124-202944.png

1,881 Views
Message 2 of 15
Report

Here is a second screenshot from the same page. Notice that the header has changed color, and taken on the hue of the page background. This is a glitch, of course, but it's particularly bad because now the header clashes with the business logo!

 

Is there someone who knows how to fix this, or why it might be doing this?

 

Screenshot_20230124-205911.png

1,881 Views
Message 3 of 15
Report
Square Community Moderator

Hello, @BCFA

 

I would love to take a closer look at this behavior. Would you mind sharing a link to your website?

 

JJ
Community Moderator, Square
Sign in and click Mark as Best Answer if my reply answers your question.
1,731 Views
Message 4 of 15
Report

Sure, JJ — Thank you!

https://www.BarryConnerFineArts.com

1,683 Views
Message 5 of 15
Report
Square Community Moderator

Thank you for following up @BCFA. I will be escalating this to our Advanced support team right now and will hope to be able to get back to you soon. 

JJ
Community Moderator, Square
Sign in and click Mark as Best Answer if my reply answers your question.
1,520 Views
Message 6 of 15
Report
Square Community Moderator

Sorry for the delay in my response @BCFA, I've been out of the office. 

 

Thanks again for following up. I just took a look at your site but don't see an active sticky header. Can you please activate it again so I can take a closer look at what could be causing this color problem?

JJ
Community Moderator, Square
Sign in and click Mark as Best Answer if my reply answers your question.
1,620 Views
Message 7 of 15
Report

Will do, J.J. No worries, but when I wasn't getting a solution, I deactivated the sticky header. The effect, when the sticky header background switches to a medium gray (my page background RGB, I'm quite sure) it causes a very unprofessional look to the page. As a visual artist, that's the last thing I'd want my website to convey. But I will reactivate it for a few days (or just until I hear back from you or someone else with a working solution). Thank you!

1,570 Views
Message 8 of 15
Report

Now my image logo (which includes a rasterized version of the old text, along with a photo), which looks fine when the page first loads, is disappearing from the sticky header when the page is scrolled, and is being replaced — on the gray background — with right-aligned text only. Good grief. (Screenshots follow.)

 

I also am aggravated that my hyperlinks have turned blue. As I read the Square info, my paid, professional Square website now requires a further paid upgrade before I can again set a thematically consistent color for a hyperlink? I've been with Square for about ten years, and loved it and promoted it to any business owner or operator who even mentioned point-of-sale. But I've been very unhappy with nearly every change since the Block era began. I'm sure I'm one of many, many discriminating customers and users who have encountered new expense, inconvenience, delay, and lost functionality due to so many of these changes. I've mentioned this to Square staff before. For me, as an independent business owner and a visual arts professional, being needled with reduced functionality or being required to pay more and more for the privilege of professionally hosting my online vendor interface, all the while still paying all the fees for point-of-sale transactions — it has me thinking about looking into a whole different sort of upgrade, unfortunately, to a different web host and a different point-of-sale provider. I've been a loyal and happy customer for nearly a decade. I would much prefer that Square shift from what seems to be an increasingly mercenary platform to one which again excels in providing the very best in point-of-sale infrastructure and customer service.

1,525 Views
Message 9 of 15
Report

Sticky header upon loading:

 

Screenshot_20230201-173457-588.png

 

Altered behavior of sticky header during page scrolling:

 

Screenshot_20230201-173547-835.png

 

 

 

 

1,525 Views
Message 10 of 15
Report

Had to switch my header back to "No Effects". I just can't leave the defective graphical behavior on my professional website. The Square website builder interface is good, but with limited user options, it just isn't quite there. (I've already resorted to building my own embedded code to replace the first few sections of my Square homepage for my desired look & functionality.) One thing I can't begin to fathom are their gallery and image templates not allowing for an image to be represented from edge to edge without cropping. As an artist, I don't need (or want) Square's GUI cropping my artwork, and especially without any option to control or veto the default cropping! You'll notice an awkward amount of space between some of the images of my artwork as you scroll down the page: In order to prevent Square from arbitrarily cropping off both sides of my paintings, I had to pad the images with background RGB above or below (or both) on most of them. That workaround serves for showing the entire original image uncropped, but it adds wasted space between each. Square is just not as versatile or robust a web-hosting interface as many professionals need. Yet they're adding more charges for basic functionality. Not a good move. Really undercuts their potential. Their main selling point, for me, was a free professional-grade website native to my preferred point-of-sale, basically as a perk for loyalty to them as my chosen P.O.S. I was willing to put up with a few inconveniences or limitations in their web hosting, and just figured out workarounds to mask the innate, inherent drawbacks and limitations. They're making that harder, now, and charging me in multiple iterations for that inconvenience and imperfection: Pay Square so that I can provide my clients with access to spending money with Square; pay Square for the privilege of keeping the domain I've owned since before Square even offered web hosting; pay Square extra for the privilege of maintaining my site-wide color theme — I guess dark red RGB costs Square more money than blue, for all my website links. (I suppose you can tell I'm frustrated.)

1,345 Views
Message 11 of 15
Report
Square Community Moderator

I totally understand your frustration @BCFA  

 

I want to be transparent with how I feel about this situation. While I value the time and effort you have put into your Square Online Site, I believe what you're looking for, what your business needs is a more robust website like WordPress or something custom-built. What's good about this is that we offer many APIs/integrations that can make integrating with Square a breeze. 

 

In regards to the sticky header, our Advanced Support Team confirmed that the change in color in the header is working as intended. I know this isn't the answer you wanted to hear but wanted to acknowledge your frustration and offer my suggestions.

JJ
Community Moderator, Square
Sign in and click Mark as Best Answer if my reply answers your question.
1,284 Views
Message 12 of 15
Report

Best Answer

 

I appreciate candor, JJ.

 

WordPress was my original web host many years ago. I left it for a brief time for WiX, but that web host had other issues nearly as problematic as WordPress. I was among the first to take up Square as my web host when web hosting for Square vendors was initially announced. (As to the Square-Weebly hybrid relationship, I always found the strictly Square-hosted environment to be significantly better than the Weebly design GUI.)

 

As I've mentioned a couple of times, I liked Square as a pretty decent and originally free web host, both because I could live with or work around its limitations, AND because of its innate integration with my point-of-sale and my database of inventory and services.

 

The issue for me now is that the service, in some ways, has begun going backward, and instituting new fees while the functionality and flexibility has incrementally declined.

 

You're correct in anticipating that a color-morphing sticky header as a design norm is not at all what I hoped to hear.

 

I've removed the sticky header effect from my page and don't expect to use it again. By the way, I've been using the feature on my website for a couple of years or more, and it didn't start doing this until recently.

1,236 Views
Message 13 of 15
Report
Square Community Moderator

"I've removed the sticky header effect from my page and don't expect to use it again. By the way, I've been using the feature on my website for a couple of years or more, and it didn't start doing this until recently."

 

Interesting detail... 

 

If you haven't done yet, I recommend reaching out via phone so one of our agents can take a look in real-time and better understand the situation. You can give us a call at 855-700-6000 between 6 am - 6 pm Pacific Time Monday-Friday. If you call outside of these hours, you will be required to enter your Customer Code to validate your account.

JJ
Community Moderator, Square
Sign in and click Mark as Best Answer if my reply answers your question.
1,186 Views
Message 14 of 15
Report

Again, thank you, JJ. I appreciate all your attention to helping me resolve these issues.

 

All the best.

1,137 Views
Message 15 of 15
Report