Adjusting the point in responsiveness when left menu moves to bottom

Install a plugin to hold your CSS modifications: https://www.ads-software.com/plugins/custom-css-manager-plugin/

I’m guessing you’re not very familiar with CSS?

I said I’m not up to date on responsive design. I know basic CSS

Add this to your Custom CSS:

.search-box-wrapper {
		padding-left: 182px;
	}

	.main-content {
		float: left;
	}

	.site-content {
		margin-right: 29.04761904%;
		margin-left: 182px;
	}

	.site-content .entry-header {
		margin-top: 0;
	}

	.site-content .has-post-thumbnail .entry-header {
		margin-top: 0;
	}

	.content-sidebar {
		margin-left: -29.04761904%;
		width: 29.04761904%;
	}

	.site:before {
		background-color: #000;
		content: "";
		display: block;
		height: 100%;
		min-height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		width: 182px;
		z-index: 2;
	}

	#secondary {
		background-color: transparent;
		border: 0;
		clear: none;
		float: left;
		margin: 0 0 0 -100%;
		min-height: 100vh;
		width: 122px;
	}

	.primary-sidebar {
		padding-top: 0;
	}

	.site-description {
		display: block;
		margin: -3px 0 21px;
	}

	.site-description:empty {
		margin: 0;
	}

	.secondary-navigation {
		font-size: 11px;
		margin: 0 -30px 48px;
		width: 182px;
	}

	.secondary-navigation li {
		border-top: 1px solid rgba(255, 255, 255, 0.2);
		position: relative;
	}

	.secondary-navigation a {
		padding: 10px 30px;
	}

	.secondary-navigation ul ul {
		background-color: #24890d;
		position: absolute;
		top: 0;
		left: -999em;
		width: 182px;
		z-index: 99999;
	}

	.secondary-navigation li li {
		border-top: 0;
	}

	.secondary-navigation li:hover > a,
	.secondary-navigation li.focus > a {
		background-color: #24890d;
		color: #fff;
	}

Thanks Andrew.

I might not be making myself entirely clear. While the above CSS does make the side menu appear on the left when a browser window isn’t maximized, it also makes the menu appear on the left in a smartphone, which is when I’d want the normal behavior.

What I’m trying to figure out is how to lower the threshold at which the phone version (with side menu forced below) occurs so that if someone is viewing the site on a desktop browser and doesn’t have the window maximized, the menu still appears on the left (the default behavior causes the menus to collapse too soon.

Hope that makes more sense!

Thanks,
Kirby

so that if someone is viewing the site on a desktop browser and doesn’t have the window maximized

Sorry I have no idea how to do that, the way a lot of themes and websites in general apply responsive design is through the width/ height of the browser and not the operating system.

And that’s exactly what I’ve been saying. I want to learn how to adjust at what width/height the changes are being made and adjust accordingly.

I’m not sure what the issue is then, not sure why you can’t play around with the CSS (above) and adjust accordingly.

Because as I keep saying, I’ve never done responsive design before and I don’t know what the triggers are. This is getting frustrating having to repeat this ad nauseum.

So what you’re asking for is help with learning responsive CSS? I’m not sure this is the right place to ask that, I’m trying to help you with the Twenty Fourteen theme.