Katris Accordian skin oddity - issue with top-bar menu

Katris Accordian skin oddity - issue with top-bar menu

Home » Kartris ASP.NET Ecommerce Software » Customization, Plugins and Skinning, etc.

https://forum.kartris.com/Topic3385.aspx

Print Topic | Close Window

By simonrl - Fri 3 Oct 2014

Hello

I'm wondering if anybody has come across this before?

There seems to be an odd intermediate stage in the way the top-bar menu (default - My Account | News | Contact Us) in the way it works with foundation.css at different screen sizes.

The problem is that brief intermediate stage where it goes from a normal display of links to a single link displaying at 100% of the available space before it collapses to a drop-down menu.

CSS is pretty much unmodified; foundation.css is unmodified apart from specifying .top-bar-js-breakpoint as per the prompt in custom.css.

Site is here: http://preview3.bilberrydesign.co.uk/

So I was sure I wasn't going mad and had introduced this problem myself I set a duplicate of the site up using the absolute standard Kartris v2.7001 Accordion skin code - totally unmodified. Changed nothing. And it has the same problem.

The problem is that when browsing the site on the iPad it's this unusable intermediate stage of top-bar that displays.

Going round in circles with this! Is there a glitch in foundation.css?

Thanks,
Simon

By simonrl - Fri 3 Oct 2014

Have mostly got this sorted - at least got it to go from the standard version of the top-bar menu to the drop-down version as the browser window is rescaled without going via the odd non-functional intermediate one at 752px.

Sorted by setting .top-bar-js-breakpoint to 768px.

One problem remains.

top-bar menu looks fine on desktop and fine on Windows mobile and Blackberry 10.

Looks terrible on iPad; the top-bar menu is neither one nor the other; and I just do not understand where it is getting the style from.

This demo will show what I mean: http://preview3.bilberrydesign.co.uk/ - fine on desktop and mobile, broken on iPad (and probably other tablets?)

Has anybody successfully got this working with the Accordion theme?

Thanks,
Simon

By TheCalicoTree - Fri 16 Jan 2015

I am having the same problem, not with the accordion theme but with the standard. Have tried reverting to the Kartris theme but the problem remains.
All that is visible when viewing on iPad is the first option of the menu and the first option of the category menu, thus making the website fairly unusable on the iPad.

This needs to be fixed in foundation.css as a matter of urgency. this bug renders the 'responsive' site non responsive.

Kartris - please look into asap.

By Paul - Fri 16 Jan 2015

In terms of Foundation, it's third party code to us too, so we're not necessarily in a better position to address things like this than anyone else with HTML and CSS skills. It's really appreciated if those with those skills can help on issues such as this - this is the nature of an open source project where we give the code away for free. We offer free support where we can, but with limited resources it's really important if people can contribute their time and skills when possible.

At the very least, some screenshots from the device in question, the exact device user agent, the actual screen size /orientation where the issue occurs, the exact version of Kartris installed and so on - a proper bug report with everything needed for us or anyone else with good CSS to replicate the issue quickly.

By metalmania - Thu 18 Jun 2015

I came across a similar problem where over a small range of browser sizes then only the "Home" option was displayed, but after reading this thread, consulting the custom.css and adjusting what was displayed in the navigation menu (I removed the News item because that reduced the overall length), then I think I have got it to work quite well.You need to ensure that you follow all the instructions in custom.css - so you have to change 3 lines to add min-width in pixels (doesn't seem to work as expected with em).

custom.css
@media only screen and (min-width: 768px)

foundation.css

.top-bar-js-breakpoint {
width: 768px !important;
visibility: hidden; }

.js-generated {
display: block; }

@media only screen and (min-width: 768px)

With these changes, it switches between horizontal and drop-down ok, with no intermediate "incorrect" version. However I've found if you have more than 768px worth of items in the menu bar then they will wrap onto the next line over a certain range of sizes, which looks pants. I reduced the number of top-level menu items to avoid this but this means I have some "grey space" on the right hand side now which isn't ideal.
I'm using the Accordion theme.