Responsive Classic (built in to Zen Cart v1.5.5) [Support Thread]

[linuxguy2]

ZC 1.55.5f Responsive_classic
Apache Version 2.4.34
PHP Version 7.0
MySQL Version 10.2.18-MariaDB
Plugins:
ColumnGridLayout_for_155f
CheckBoxTextBoxIconV1.0.3

(possible oversight) with the responsive_classic template.

I need a way to hide specific categories in the Mobile sidebox menu.

When using the below method to hide a category the designated Category [ID#2} gets hidden in the {full screen} sidebox menu but NOT in Category Tabs menu.
This causes the sidebox menu in Mobile to NOT hide the designated Category as I believe it uses the Category Tabs code.
Existing code:

/includes/templates/responsive_classic/sideboxes/tpl_categories.php
// to make a specific category stand out define a new class in the stylesheet example: A.category-holiday
// uncomment the select below and set the cPath=3 to the cPath= your_categories_id
// many variations of this can be done
//      case ($box_categories_array[$i]['path'] == 'cPath=3'):
//        $new_style = 'category-holiday';
//        break;

    case ($box_categories_array[$i]['path'] == 'cPath=2'):
        $new_style = 'category_hide';
        break;
    case ($box_categories_array[$i]['path'] == 'cPath=1'):
        $new_style = 'category_hide1';
        break;
   case ($box_categories_array[$i]['path'] == 'cPath=3'):
        $new_style = 'category_hide2';
        break;

CSS:
includes/templates/responsive_classic/css/stylesheet.css
/* Hide Categories but are clickable*/
A.category_hide {
	color: #000000;
	font-size:14px;
	text-decoration: none;
}
/* Display but make specific categories unclickable */
A.category_hide1, A.category_hide2 {
	cursor: pointer;
	font-weight: normal;
	line-height: 175%;
	pointer-events: none;
	text-decoration: none;
	display: inline-block;
}

Thanks, for your time.

Any guidance on how to apply the above behavior to the mobile menu would be greatly appreciated.
I have tried many things but no joy. Also none of the existing plugins did the trick.
Because this was built into non-mobile menu I'm thinking it should be just as simple to do to the mobile menu i just can't quite figure it out.

[coinguydavid]

Hi all, a couple of questions I could not find the answers to in reading through this thread. Hoping someone might be able to point me in the right direction. For reference, the site I'm building is www.thecoinauthority.com.

1) My ideal look would be to place the mobile menu (with hamburger icon) to the left of the search bar below the logo. When you click the hamburger icon I want the menu to behave the same, and ideally would become fixed at the top of the window as you scroll (once you scroll past logo).

If #1 is too complicated to implement, then is there a way I can prevent the mobile menu (with hamburger icon) from covering part of the logo (and warning messages, when present)? Do I just need to add a margin or padding to the top of the page in the mobile.css?

2) In desktop/default mode, when I reduce the size of the browser window, the navigation menu links move to the top right of the window and are seemingly floating in a spot users will not see them. How can I make it so the mobile menu appears when the browser window size reaches a certain "breaking" point?

I have made some minor modifications to the template, primarily to move the logo above the nav menu and to remove the nav icons from the mobile menu. But beyond playing with some color schemes (still a WIP), I don't believe I have modified any core elements of the template that would have caused the issue noted above.

Thanks in advance!

[linuxguy2]

Hi all, a couple of questions I could not find the answers to in reading through this thread. Hoping someone might be able to point me in the right direction. For reference, the site I'm building is www.thecoinauthority.com.

1) My ideal look would be to place the mobile menu (with hamburger icon) to the left of the search bar below the logo. When you click the hamburger icon I want the menu to behave the same, and ideally would become fixed at the top of the window as you scroll (once you scroll past logo).

If #1 is too complicated to implement, then is there a way I can prevent the mobile menu (with hamburger icon) from covering part of the logo (and warning messages, when present)? Do I just need to add a margin or padding to the top of the page in the mobile.css?

2) In desktop/default mode, when I reduce the size of the browser window, the navigation menu links move to the top right of the window and are seemingly floating in a spot users will not see them. How can I make it so the mobile menu appears when the browser window size reaches a certain "breaking" point?

I have made some minor modifications to the template, primarily to move the logo above the nav menu and to remove the nav icons from the mobile menu. But beyond playing with some color schemes (still a WIP), I don't believe I have modified any core elements of the template that would have caused the issue noted above.

Thanks in advance!

What template are you using?
Have you tried disabling the right column and enabling everything in the left column.

[linuxguy2]

I've resolved this myself now and created a module which is currently under review. Will post a link here once its added to the module library.

What's the module called?

[coinguydavid]

What template are you using?
Have you tried disabling the right column and enabling everything in the left column.

I'm using the responsive classic template, but renamed it. Zencart v1.5.6 (12/10/18 version). As far as columns, are you referring to sideboxes? The only two sideboxes on the right are the info and more info boxes.

Thanks!

[linuxguy2]

I'm using the responsive classic template, but renamed it. Zencart v1.5.6 (12/10/18 version). As far as columns, are you referring to sideboxes? The only two sideboxes on the right are the info and more info boxes.

Thanks!

I took a look at you site and Yes I was referring to the side boxes.
IMHO I feel there are some unaddressed issues with the mobile and tablet display
I also need to make some adjustments regarding the logo sliding up into the bar across the top of the mobile display. Setting it to a fixed position should remedy that. When I figure it out I'll post it back here.
In stylesheet_colors.css I removed the black bar across the top. The logo still slides up but it isn't hidden behind the black bar.

[dbltoe]

We've gone a little radical of late with the logo to include the entire logoWrapper.

Most folks on the mobiles are not concerned about a logo, but eager to find the item they're searching for. In that vein, we've removed the traditional logoWrapper in it's entirety and rolled the logo into the define_main_page. If someone goes to the home page, they'll see the logo. Otherwise, they see what they are searching for and an opportunity to buy it.

Trying to manage what the logo was trying to do in so many different devices' views is felt to be counterproductive to getting a customer's order.

Of course, most of this was predicated upon taking a look at the entry points for each site. Some sites are accessed primarily at the root while others primarily at the product level.

Use the data to decide which works best for you.

A major in-line store at our local mall stays open for 1 to 2 hours after mall closure. At mall closing, they close the sliding doors to the mall on both levels. Only the outside entrance doors are open. They save hundreds of dollars a day by doing so. No one is needed to watch out for packages slipping out those huge openings. They are very happy with the decision to do this and the public can still get in from three outside entrances.

[linuxguy2]

We've gone a little radical of late with the logo to include the entire logoWrapper.

Most folks on the mobiles are not concerned about a logo, but eager to find the item they're searching for. In that vein, we've removed the traditional logoWrapper in it's entirety and rolled the logo into the define_main_page. If someone goes to the home page, they'll see the logo. Otherwise, they see what they are searching for and an opportunity to buy it.

Trying to manage what the logo was trying to do in so many different devices' views is felt to be counterproductive to getting a customer's order.

Of course, most of this was predicated upon taking a look at the entry points for each site. Some sites are accessed primarily at the root while others primarily at the product level.

Use the data to decide which works best for you.

A major in-line store at our local mall stays open for 1 to 2 hours after mall closure. At mall closing, they close the sliding doors to the mall on both levels. Only the outside entrance doors are open. They save hundreds of dollars a day by doing so. No one is needed to watch out for packages slipping out those huge openings. They are very happy with the decision to do this and the public can still get in from three outside entrances.

dbltoe

Thanks for the explanation which makes a very good case.
Don't get me wrong, I think the overall layout and quality of ZC is amazing! Yeah, everyone including me always want's something different
On a mobile device Nike & Amazon keep their logo present in the header all the time. It's worth noting they have an simple elongated logo.
In general I find square logos are harder to deal with as they take up more vertical space and are usually more detailed so when you shrink them they get ugly.

I do feel that some plugins like ColumnGridLayout and some form of a One Page Checkout should have been incorporated in to the core package a long time ago.

Maybe this is already possible but I just haven't found it.
Any ideas on placing the attributes like "sizes" (S, M, L, XL, XXL) on the product page (maybe check boxes below the product listing) instead having to go to the expanded product page to select them? This would further streamline the user experience.


Thanks for your time.

[coinguydavid]

I agree that simple is better, and plan on exploring options to reduce the footprint of my current logo; however, like Linuxguy says most major companies still present a logo (of some form) on their mobile sites.

Most of my customers are older and not a tech savvy (at least not yet), so I want to try and maintain more of a desktop feel in the mobile layout where it makes sense.

We are also in the midst of a rebranding (this site will be launched with the new logo/company name), which is another reason I want the logo to be a little more prominent initially.

My primary concern is making sure the mobile menu does not hide any elements behind it (whether it be the warning stack messages, or the logo itself).

My ultimate goal however would be to find a way to nest the mobile logo next to the search bar, while keeping the logo above.

I don't mind playing around with the code to see if I can get it to work, but am having a hard time identifying which code I should look at first to relocate the mobile menu.

I imagine the fixed attributes associated with the mobile menu will present a challenge if I relocate to another area of the page, which is why I need some help :)

Thanks again for any input!

[dbltoe]

As a minimum, there are four stylesheets that deal with the mobile/tablet world of Zen Cart. Others may or may not be involved depending on things added to the stock layout.

Also, inside those, you'll find sections dealing with portrait versus landscape, screen width, etc.

Even with the ability to have 8 screens in front of me, it can get to be quite an experience.

Using your browser's F12/Inspect/Developer capability is foremost in locating the spot you wish to change. Once there, emphasis should be on determining if the call is general, width-specific, orientation-specific, or a combination of the three.

And, no, yours is not "just like everyone else's." Best way to get help -- drill down to what you are trying to change and provide a link to the site/page in question. Pictures don't generally help at all with css problems.