How do I....

I've been asked to redesign baysauto.com/ in the style of matekmedia.com/about-matek.shtml . Personally, I think it's a horrible design, but the client is always right, right?

So I picked a minimal pre-defined template and removed everything except the left sidebar and the content. That does it, though I want the left position to extend to the screen bottom regardless of how many modules are in it. Currently, I just have the menu in it, and it only takes up about 1/3 of the height. www.ckdev.info/bayauto

I'm sure there's just some CSS, but don't know what. Thanks.

Line 41 in template.css - add the bold css

.column.column1 {
width: 20%;
height:100vh;
margin-top:-10px;
}

Line 221 in template.css - add the bold css

#left > div.inner {
background: #ffffff;
margin-right: 10px;
padding: 10px;
height:100vh;
width: 250px;
position:fixed;
}

If you use a custom.css file just add like this.

.column.column1 {
height: 100vh;
margin-top: -10px;
}
#left > div.inner {
height: 100vh;
width: 250px;
position:fixed;
}

The above css will make col 1 fixed with a background white from top of screen
to bottom of screen. responsive design will need adjustments.

Thanks Ced. It sort of worked. This design is proving to be much more difficult than I first anticipated.

I set responsive to not show the left column. But it still shown up nonetheless. Even removing the code you suggested, the left column still shows in mobile. And the menu items run off the right side of the phone screen, and I get no expanded menu for SERVICES top level menu item.

Currently I have removed the new code. Is it not possible to have a left sidebar full height with a full height content bar to its right (without the sidebar begin enclosed in the maincontent area)?

I've changed to Vertical Menu by Offlajn in the left position ( offlajn.com/vertical-menu.html?redirected=1 ). It still has the "not stretching full height" issue, but they can sort that. And it has some issues in mobile, but it does have a nice menu action (not unlike maximenu).

Never thought what I thought was a simple layout would be so difficult!

Thanks Ced.

Hi
you shall thank @housler98, not me
CEd

@trogladyte

Under #left > div.inner {
height: 100vh;
width: 250px;
position:fixed;
}

change width to 17%;

#left > div.inner {
height: 100vh;
width: 17%;
position:fixed;
}

You can adjust the css with untill it suits your needs.