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.