Make Simple Theme Full Width

Highlighted
Tourist
8 0 1

I am wanting to make the "simple" theme full width. Is there anyone who can tell me how?

0 Likes
Highlighted
Shopify Partner
46 0 9

Can you post a link to the page that you want to be full width?

Available For Hire For Small Jobs: https://www.dashboardq.com/shopify
0 Likes
Highlighted
Highlighted
Shopify Partner
46 0 9

So I'm assuming you are wanting to move the side menu up above the current content? If you are wanting something else (like having the menu work like it does on mobile), and you are not comfortable with CSS and JS, that may be something you would need to hire out.

One quick note, you'll want to duplicate your theme before editing it and then use the preview button to see what your changes do.

I probably won't be able to walk you through all the steps in this forum but I can point you in the right direction. What you want to do is update the grid layout. In sidebar.liquid around line 2, you want to change the part that says "one-fifth" to "five-fifth". This tells the sidebar to take up the full size of the screen.

In theme.scss.liquid, you'll want to find the section that styles ".site-nav__item" and at a minimum float it and add a margin: "float: left; margin: 15px". You'll probably need more styling than that, but hopeully that points you in the right direction.

In theme.liquid, you'll also want to update the <main> tag to be full screen too so change "four-fifth" to "five-fifth"

Hope that helps!

Available For Hire For Small Jobs: https://www.dashboardq.com/shopify
0 Likes
Highlighted
Tourist
8 0 1

Thank you. I figured out what I am wanting to do. Just gotta finish some of it before it is published.

0 Likes
Highlighted
Excursionist
12 0 3

the following did the trick for me!

the solution is from  

Still, if you want to try it, you need to go to Online Store > Themes then click Actions > Edit code and from the editor that loads, open the file Assets / theme.scss.liquid. Once open, find this line of code

/*================ Sizing Variables ================*/
$width-site: 1200px;

And change it for

/*================ Sizing Variables ================*/
$width-site: initial;

Hit Save and check it out.

 

worked like magic on my theme "simple"

0 Likes