sidebar position

[Lars Gonser]

Hello

We want to put the sidebar on the right side.
How can we do this?

We don’t want to change anything on the mobile version, just on the desktop version.

Thank you for your help!

[Bill Robbins]

Hi Lars,

I believe we can do that. Go to the Appearance section in your WordPress dashboard and click on Theme Options. Choose the Advanced tab at the top and scroll down to the Custom CSS box. Add this there:

@media only screen and (min-width: 768px) {

	#wrap {
		float: right;
	}
	
	body::before {
		top: 0;
		left: auto;
		right: 0;
	}
	
	#sidebar {
		left: auto;
		right: 0;
	}
	
	#content {
		float: left;
	}

}

and save your changes. See if that doesn’t reposition the sidebar and content area for you. If you run into trouble, let me know.

Thanks,
Bill

[Lars Gonser]

Thank you!

Is it possible just to move the navigation to the right side?

Second question:
Can you please send me an invoice?

[Bill Robbins]

That may be possible. What do you have in mind doing with the content area of the site? If we don’t move it to the right, it’ll be about 300px from the left hand edge. It’ll also overlap the sidebar depending on the size of the browser window.

For your invoice is there anything you need added to it that isn’t in the email one you received when the theme was purchased? Occasionally users need certain information added about their business or government numbers added. If you’ll let me know I can add it and send a revised one your way.

[Lars Gonser]

In the end I want to have the logo und the social media on the left sight and the navigation an the right side.

The invoice has to be for:

Stockfield Verlag GmbH
Damm 20/21
38100 Braunschweig
Germany

THANK YOU!

[Bill Robbins]

I just resent the invoice. I revised the address at the bottom so it was like the one above. See how that works for you.

Instead of the snippet above, you could use this in your Custom CSS to move the navigation to the top right:

@media only screen and (min-width: 768px) {

	#mobile-header {
		display: block;
	}
	
	#mobile-header #logo {
		display: none;
	}
	
	#mobile-header nav {
		position: fixed;
		top: 10px;
		right: 10px;
	}
	
	#sidebar nav {
		display: none;
	}

}

See how that works for you.

[Author]

Posts