Responsive Classic Redesign Support thread

[nicksab]

To get the hamburger on the right side are just need to make some minor adjustments to the css. Let me know if you need anything else.

Step 1

Path: \includes\templates\responsive_classic\css\stylesheet_custom_navigation.css
line: 12

find this
.sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 270px;
background-color: #fff;
transition: transform 0.3s ease-out;
}

replace

.sidebar {
position: fixed;
top: 0;
bottom: 0;
right: 0;
width: 270px;
background-color: #fff;
transition: transform 0.3s ease-out;
}



find this
line40

.sidebar.is-hidden {
transform: translateX(-300px);
}

change to
.sidebar.is-hidden {
transform: translateX(300px);
}

Step 2
path: includes\templates\responsive_classic\css\stylesheet_zcustom.css
Paste at bottom of page

.nav_spacer {grid-template-columns: 3fr 1fr auto !important;}
.nav_spacer .row {order:2}
.baralignment {margin-left:1rem;}


@media (min-width: 576px) {
.nav_spacer {grid-template-columns: 3fr 2fr auto !important;}
}


@media (min-width: 992px) {
.nav_spacer {grid-template-columns: 1fr 2fr 1fr auto !important;}
}

Attachment 20975

Thank you

[nicksab]

Another question:

How do I get the logo to be in the center of page on desktop?

I removed search_header via admin but I can't figure how to have the logo in the middle of the logoWrapper.

Thank you for the assist

[chadlly2003]

Just put this piece of code at the bottom of stylesheet_zcustom.css. I believe this is what you are looking for

Dont forget to remove the search bar.

.nav_spacer {
  display: grid;
  grid-template-columns: auto auto auto;
  justify-items: left;
  align-items: center;
  margin: auto;
}


#logoWrapper {
  display:flex;
  justify-content:center;
}



@media (min-width: 992px)  {

.nav_spacer {
grid-template-columns:1fr 2fr 1fr}

}

[nicksab]

thank you.

[nicksab]

How do you increase the width of the left column?

I tried several values via Admin - Configuration- Layout Settings but it is not changing.

How do you hide the left column to display on mobile? CSS?

Thank you

[chadlly2003]

"How do you increase the width of the left column?"
You just need to find the style below and change the width via css

Path: stylesheet_zcustom.css
line:3158

 .onerow-fluid>[class*="col150"]:nth-child(1){
  padding-left:0rem;
  margin-right:2rem;
  width: 220px; <-- change the width here -->
  display:block;

"How do you hide the left column to display on mobile? CSS?"
Not sure I understand the question. Can you give a little more detail.

[nicksab]

"How do you increase the width of the left column?"
You just need to find the style below and change the width via css

Path: stylesheet_zcustom.css
line:3158

 .onerow-fluid>[class*="col150"]:nth-child(1){
  padding-left:0rem;
  margin-right:2rem;
  width: 220px; <-- change the width here -->
  display:block;

"How do you hide the left column to display on mobile? CSS?"
Not sure I understand the question. Can you give a little more detail.

Thank you but why not use the admin config for this? it would make it easier to adjust.

As for [B], the left colum appears on mobile but it was my mistake. If you change the size of the column in the admin (ie 150 px to 400px) , the class seems to change as well. ( ie class=col150 becomes class=col400)

as a result, the css gets a bit messed up.

[dbltoe]

Great job on accessibility, CSS, and HTML.

There's one thing you need to consider that most checkers do not notice. That's text-decoration on links.

Accessibility rightly expects that something on the screen will alert the customer to the fact that there is an available link to another part of the page or site. Normally, that's done with text-decoration: underline. I can understand your desire to avoid a main page full of underlined text. Technically, you are okay on a desktop as you have the cursor changing when hovering over a link.

The problem arises when the site is viewed on a mobile device. Since there is no cursor on a mobile device, you can't rely on the cursor changing to a pointer as a way of letting the customer know there's a link at that spot.

You might want to consider dropping the text-decoration: none on line 9 of stylesheet_colors.css when a mobile device is detected.

[chadlly2003]

nick,


This is a custom template. I tried to follow all the rules but sometimes the backend setting can impact the custom css. In the near future I will update the template to make it easier to update the css elements using the backend of zencart. Too be continued....

[chadlly2003]

dbltoe,

I will make the adjustments you requested on my next upgrade. This should be straight forward. Also if you see anything else let me know and i will add it to my "To DO List"