Author Topic: Theme header behaves erratic  (Read 2789 times)

Offline leonuys

  • Newbie
  • *
  • Posts: 9
  • Karma: +2/-0
    • View Profile
Theme header behaves erratic
« on: January 26, 2017, 02:55:08 AM »
While testing my site at xx I suddenly noticed something weird - see attached.

If I login as a customer (storefront), the top line doesn't have the menu text it is supposed to have. Instead, it seems like it is a line or two lower (? maybe displaced ?) and because it is white-on-white it is invisible to the customer. Until, of course, you roll over it by accident.

I am not a developer but it seems like the template breakpoints for mobile is not optimised. So what happens is that if I am in full desktop mode it looks correct, but when I'm in a windowed mode or on a tablet the screen scales to the device and that is when I have the overlap.

Is this something I can fix easily?
Sent by Leon Uys from Johannesburg

Offline abantecart

  • Administrator
  • Hero Member
  • *****
  • Posts: 3970
  • Karma: +243/-9
    • View Profile
    • Ideal Open Source Ecommerce Solution
Re: Theme header behaves erratic
« Reply #1 on: January 28, 2017, 05:07:29 PM »
What is the screen size is this? Can you share link to use site?
Try to use original CSS to confirm the issue


We need your help to build better free open source eCommerce platform for everyone.
See how you can help

Offline leonuys

  • Newbie
  • *
  • Posts: 9
  • Karma: +2/-0
    • View Profile
Re: Theme header behaves erratic
« Reply #2 on: January 29, 2017, 12:49:56 PM »
Thank you for the reply. I tried to enter the URL because I know that it is important, but the system refused my entry. Here is another attempt:
URL (not https) radio-shop DOT co DOT za

I am running a completely unmodified version, except that I changed the colours from blue to orange in the CSS.

However, to assist with your request I created a second test-site at radio-store DOT co DOT za
This test site which is brand new and unmodified behaves in exactly the same way.

The server is running Apache 4 with php and mysql to the latest levels.

My work screen is a Lenovo X1 Carbon Ultrabook with 2560 x 1440 resolution running Win10/64 bit, but I have tested on a Lenovo T510i running Win7/32 bit and a desktop with similar specs.

I don't normally run full-screen on the browser to the full resolution. I tested with Chrome, Firefox and Edge. The symptom demonstrated clearly when I slowly slide the right-side window re-size line, from wider to narrower. At some point the top line (which I think is called "menu") jumps to the second line and becomes invisible because of colour clash. The jumping is the issue and is unexpected behaviour.

I can create logins for an admin person if necessary but from the above description it should be sufficient to observe the error without that. Just let me know what to do.

I am preparing screenshots of the before/after situation which I will upload as soon as I have them.

Thank you.

Sent by Leon Uys from Johannesburg

Offline leonuys

  • Newbie
  • *
  • Posts: 9
  • Karma: +2/-0
    • View Profile
Re: Theme header behaves erratic
« Reply #3 on: February 04, 2017, 07:28:04 AM »
I tried to add to this posting a few days ago, but for some reason I see it isn't showing.

I was able to find a way of reproducing the error consistently. If you want to see it on my screen, I can give you a TeamViewer link.

Essentially, on all three browsers, if I add more items to the menu, it obviously gets longer until it reaches a point where the menu line jumps and is rendered below the top section where you can't see it. If I then delete some items to make it a shorter menu, it works again.

It is very clear what happens: When there is enough space on the top line it is OK, and when there is insufficient space it creates a drop-down menu. In-between those two views, it breaks badly. This is a fault of the CSS not working correctly.

Can you please fix this . as many of my customers are now complaining?

Thank you,
Leon
Sent by Leon Uys from Johannesburg

Offline eCommerce Core

  • Administrator
  • Hero Member
  • *****
  • Posts: 1596
  • Karma: +92/-1
    • View Profile
Re: Theme header behaves erratic
« Reply #4 on: February 06, 2017, 07:40:49 AM »
Does the same happen if you switch to original (default) template?
“If you’re in the luckiest one per cent of humanity, you owe it to the rest of humanity to think about the other 99 per cent.”
― Warren Buffett

Offline abantecart

  • Administrator
  • Hero Member
  • *****
  • Posts: 3970
  • Karma: +243/-9
    • View Profile
    • Ideal Open Source Ecommerce Solution
Re: Theme header behaves erratic
« Reply #5 on: February 06, 2017, 10:20:57 AM »
I can not replicate this issue. That must be something to do with your CSS edits.
I checked your site you posted and it has default template. Please share the public URL to the site.
We need your help to build better free open source eCommerce platform for everyone.
See how you can help

Offline leonuys

  • Newbie
  • *
  • Posts: 9
  • Karma: +2/-0
    • View Profile
Re: Theme header behaves erratic
« Reply #6 on: February 06, 2017, 11:42:01 AM »
Absolutely, Yes.

You can see it for yourself on radio-store DOT co DOT za

All I did was: Install a new instance with Softalicious, login as admin123, goto Design -> Menu -> Account, then open "Order" and change the parent to -none-. This is a sufficient increase in header length to cause the header to fold. When I make the menu smaller, of course it goes back to normal. Tested in Edge, Firefox and Chrome.

Just remember what I said earlier: Once the browser understands to create the dropdown menu, you can slide the window size and it behaves correctly by switching from full menu to dropdown, so I guess that points to some CSS calculation which corrects itself.

Regards, Leon
Sent by Leon Uys from Johannesburg

Offline leonuys

  • Newbie
  • *
  • Posts: 9
  • Karma: +2/-0
    • View Profile
Re: Theme header behaves erratic
« Reply #7 on: February 06, 2017, 11:52:06 AM »
The UNMODIFIED site is at http radio-store . co . za WITHOUT ANY CSS EDITS as I mentioned two posts ago, and it gives exactly the error as per the attachment.

I can give you Teamviewer access if needed.

Absolutely, Yes.

You can see it for yourself on radio-store DOT co DOT za

All I did was: Install a new instance with Softalicious, login as admin123, goto Design -> Menu -> Account, then open "Order" and change the parent to -none-. This is a sufficient increase in header length to cause the header to fold. When I make the menu smaller, of course it goes back to normal. Tested in Edge, Firefox and Chrome.

Just remember what I said earlier: Once the browser understands to create the dropdown menu, you can slide the window size and it behaves correctly by switching from full menu to dropdown, so I guess that points to some CSS calculation which corrects itself.

Regards, Leon
Sent by Leon Uys from Johannesburg

Offline abantecart

  • Administrator
  • Hero Member
  • *****
  • Posts: 3970
  • Karma: +243/-9
    • View Profile
    • Ideal Open Source Ecommerce Solution
Re: Theme header behaves erratic
« Reply #8 on: February 07, 2017, 01:29:38 PM »
I wonder how you have managed to do this. I just tried to enable same layout and it looks OK.
If you share public URL, I can check html/css.
We need your help to build better free open source eCommerce platform for everyone.
See how you can help

Offline leonuys

  • Newbie
  • *
  • Posts: 9
  • Karma: +2/-0
    • View Profile
Re: Theme header behaves erratic
« Reply #9 on: February 07, 2017, 02:22:56 PM »
No problem to share ... but I get an error message:
Sorry, you are not allowed to post external links.
Now what?
Leon
Sent by Leon Uys from Johannesburg

Offline eCommerce Core

  • Administrator
  • Hero Member
  • *****
  • Posts: 1596
  • Karma: +92/-1
    • View Profile
Re: Theme header behaves erratic
« Reply #10 on: February 08, 2017, 07:23:09 AM »
No problem to share ... but I get an error message:
Sorry, you are not allowed to post external links.
Now what?
Leon
You did not have enough posts to earn trust with links. Post with [dot] instead of real .
“If you’re in the luckiest one per cent of humanity, you owe it to the rest of humanity to think about the other 99 per cent.”
― Warren Buffett

Offline leonuys

  • Newbie
  • *
  • Posts: 9
  • Karma: +2/-0
    • View Profile
Re: Theme header behaves erratic
« Reply #11 on: February 08, 2017, 07:43:54 AM »
Thanks for the help
Live site is at radio-shop[dot]co[dot]za
Unmodified test site is at radio-store[dot]co[dot]za
Try it and see?
Sent by Leon Uys from Johannesburg

Offline eCommerce Core

  • Administrator
  • Hero Member
  • *****
  • Posts: 1596
  • Karma: +92/-1
    • View Profile
Re: Theme header behaves erratic
« Reply #12 on: February 08, 2017, 09:10:32 PM »
You have too long of the menu content. It does not fit into a placeholder.

Try to reduce text or front or number of items in the menu.

See screenshot after I removed word "Discussion"
« Last Edit: February 08, 2017, 09:12:54 PM by eCommerce Core »
“If you’re in the luckiest one per cent of humanity, you owe it to the rest of humanity to think about the other 99 per cent.”
― Warren Buffett

Offline leonuys

  • Newbie
  • *
  • Posts: 9
  • Karma: +2/-0
    • View Profile
Re: Theme header behaves erratic
« Reply #13 on: February 09, 2017, 11:29:31 PM »
Thank you, but NO thank you ... you are telling me exactly what I told you, it is nothing new.

You have NOT solved the problem, you are placing restrictions on the user instead of assisting.

The root cause of the problem is unstable CSS code. If this is not fixed I will have to use another package that listens to their users and fixes problems instead of blaming users.

Regards, Leon
Sent by Leon Uys from Johannesburg