Responsive Classic Redesign Support thread

[chadlly2003]

nick pm me your email and i will send the a updated file that will fix your issue you mentioned in prvious post. I have been having some issue log into zencart.

[chadlly2003]

Just an FYI on this template

I’ve made a number of updates to the template over the past week.

I’ve also streamlined the top navigation bar. You can now easily reorder items or move the hamburger menu to the left or right using the CSS order property—no code changes needed.

In addition, I addressed all the feedback from earlier and cleaned up the layout by removing unnecessary grid elements and replacing them with flexbox. This makes the layout more stable and ensures that adding new elements won’t break the design.

[chadlly2003]

Just an FYI on this template

I’ve made a number of updates to the template over the past week. - you can grab latest version on github

I’ve also streamlined the top navigation bar. You can now easily reorder items or move the hamburger menu to the left or right using the CSS order property—no code changes needed.

In addition, I addressed all the feedback from earlier and cleaned up the layout by removing unnecessary grid elements and replacing them with flexbox. This makes the layout more stable and ensures that adding new elements won’t break the design.

[nicksab]

nick pm me your email and i will send the a updated file that will fix your issue you mentioned in prvious post. I have been having some issue log into zencart.

Thank you for the provided changes/file.

2 issues though:

- my hamburger menu is on the right but the menu pops out on the left when clicked

- the search header looked "shrinked" a little and how can i get it to the right? it is too close to my logo

https://www.royal-fleur.com/belvedere/

Thank you for the assistance

[chadlly2003]

nick i sent you an email with the adjustments you wanted.

[chadlly2003]

Thank you for the provided changes/file.

2 issues though:

- my hamburger menu is on the right but the menu pops out on the left when clicked

- the search header looked "shrinked" a little and how can i get it to the right? it is too close to my logo

https://www.royal-fleur.com/belvedere/

Thank you for the assistance

It looks like a lot of changes but i did this more to match your site. I wanted to show you the changes I made to make this happen

stylesheet_custom_navigation.css
Line 12

change find:

 left:0;

change to

right:0;

line:40;
find:

translateX(-300px)

change to
find:

translateX(300px)

stylesheet_zcustom.css
find
line:4029

div#logo {
max-width:100% !important;
width:100% !important;
margin-left:0px;
}

replace with

div#logo {
max-width:400px !important;
width:100% !important;
margin-left:0px;
}

.search_box form {
  display:flex;
}

LINE 3870
find

.search_box {
    display: block;
    text-align: center;
    margin-left: 1.5rem;

replace with

.search_box {
    display: block;
    text-align: center;
    margin-left: 1.5rem;
    flex-grow:1;

line 2702
find

.button.button_search {
 width: auto !important;
}

change to

.button.button_search {
 width: auto !important;
 margin-left:0px;
}

[chadlly2003]

have one more suggestion to make the home page images extend correctly


stylesheet_zcustom.css. This will make your homepage image cover the full width
after line 2748 add this

 
     #indexHomeBody  .rblockelements {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         gap: 1rem;
     }

[nicksab]

have one more suggestion to make the home page images extend correctly


stylesheet_zcustom.css. This will make your homepage image cover the full width
after line 2748 add this

 
     #indexHomeBody  .rblockelements {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         gap: 1rem;
     }

Thank you for the help.

he header looks better ( see screenshot attached) but search header is a bit long now.



Would it be possible to have the search header to the right and shorter?

I attached a photoshop look to show what I am after.



I also did some css touch up on the one page checkout page / login and it is getting close.

[chadlly2003]

Thank you for the help.

he header looks better ( see screenshot attached) but search header is a bit long now.



Would it be possible to have the search header to the right and shorter?

I attached a photoshop look to show what I am after.



I also did some css touch up on the one page checkout page / login and it is getting close.

just put this at the bottom of your stylesheet custom.css.

@media (min-width: 992px) {
	.search_box form {
   	display:flex;
   	}

  	.search_box {
     	flex-grow:0.5;margin-left:auto;
  	}
 
	.shoppingcart {margin-left:0 !important;}
 	}

}

Just a suggestion. When you view your responsiveness at 992px the logo is a bit large. Might want to make it a little smaller.


Nick if you have anymore feedback for the template please let me know. Was it easy to make changes. I did make a lot of adjustments based off of your previous post.

[nicksab]

just put this at the bottom of your stylesheet custom.css.

@media (min-width: 992px) {
	.search_box form {
   	display:flex;
   	}

  	.search_box {
     	flex-grow:0.5;margin-left:auto;
  	}
 
	.shoppingcart {margin-left:0 !important;}
 	}

}

Just a suggestion. When you view your responsiveness at 992px the logo is a bit large. Might want to make it a little smaller.


Nick if you have anymore feedback for the template please let me know. Was it easy to make changes. I did make a lot of adjustments based off of your previous post.

Thank you Chad. It worked perfectly