Split Layout

A template for a split layout with two sides. When clicking on a half in the initial view, the layout moves into the respective direction with some transition effects.

By in Blueprints on
Demo Code

This Blueprint is a layout with two sides, sometimes seen in portfolio websites of couples and partners. The idea is to show an initial two-sided view and when clicking on a side, the whole page transitions into the respective direction. The individual page of the selected person is shown.

The Blueprint comes with some example media queries and a second demo where the disappearing side scales down. It will work in modern browsers (from IE9 on).

The HTML

<div class="container">
	<div id="splitlayout" class="splitlayout">
		<div class="intro">
			<div class="side side-left">
				<div class="intro-content">
					<div class="profile"><img src="img/profile1.jpg" alt="profile1"></div>
					<h1><span>Toby Blue </span><span>Web Designer</span></h1>
				</div>
				<div class="overlay"></div>
			</div>
			<div class="side side-right">
				<div class="intro-content">
					<div class="profile"><img src="img/profile2.jpg" alt="profile2"></div>
					<h1><span>Amy White </span><span>Web Developer</span></h1>
				</div>
				<div class="overlay"></div>
			</div>
		</div><!-- /intro -->
		<div class="page page-right page-large">
			<div class="page-inner">
				<section>
					<!-- content -->
				</section>
				<section>
					<!-- content -->
				</section>
				<!-- ... -->
			</div><!-- /page-inner -->
		</div><!-- /page-right -->
		<div class="page page-left page-fill">
			<div class="page-inner">
				<!-- ... -->
			</div><!-- /page-inner -->
		</div><!-- /page-left -->
		<a href="#" class="back back-right" title="back to intro">→</a>
		<a href="#" class="back back-left" title="back to intro">←</a>
	</div><!-- /splitlayout -->
</div><!-- /container -->

The CSS

html, body, 
.container {
	position: relative;
	width: 100%;
	height: 100%;
}

body {
	overflow-y: scroll;
	background: #333;
}

.splitlayout {
	position: relative;
	overflow-x: hidden;
	min-height: 100%;
	width: 100%;
}

/* Intro sides */
.side {
	position: fixed;
	top: 0;
	z-index: 100;
	width: 50%;
	height: 100%;
	text-align: center;
	-webkit-backface-visibility: hidden;
}

.open-left .side,
.open-right .side {
	cursor: default;
}

.overlay {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 499;
	visibility: hidden;
	width: 100%;
	height: 100%;
	opacity: 0;
}

.side-left .overlay {
	background: rgba(0,0,0,0.7);
}

.side-right .overlay {
	background: rgba(0,0,0,0.3);
}

.side-left {
	left: 0;
	background: #47a3da;
	color: #fff;
	outline: 1px solid #47a3da; /* avoid gap */
}

.side-right {
	right: 0;
	background: #fff;
	color: #47a3da;
	outline: 1px solid #fff; /* avoid gap */
}

/* Intro content, profile image and name, back button */
.intro-content {
	position: absolute;
	top: 50%;
	left: 50%;
	padding: 0 1em;
	width: 50%;
	cursor: pointer;
	-webkit-transform: translateY(-50%) translateX(-50%);
	transform: translateY(-50%) translateX(-50%);
}

.profile {
	margin: 0 auto;
	width: 140px;
	height: 140px;
	border-radius: 50%;
	background: #47a3da;
}

.profile img {
	max-width: 100%;
	border-radius: 50%;
	opacity: 0.6;
}

.intro-content h1 > span {
	display: block;
	white-space: nowrap;
}

.intro-content h1 > span:first-child {
	font-weight: 300;
	font-size: 2em;
}

.intro-content h1 > span:nth-child(2) {
	position: relative;
	margin-top: 0.5em;
	padding: 0.8em;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 0.8em;
}

.intro-content h1 > span:nth-child(2):before {
	position: absolute;
	top: 0;
	left: 25%;
	width: 50%;
	height: 2px;
	background: #fff;
	content: '';
}

.side-right .intro-content h1 > span:nth-child(2):before {
	background: #47a3da;
}

.back {
	position: fixed;
	top: 2.6em;
	z-index: 500;
	display: block;
	visibility: hidden;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	color: #47a3da;
	text-align: center;
	font-size: 22px;
	line-height: 44px;
	opacity: 0;
	pointer-events: none;
}

.mobile-layout .back { /* fixed positioning will make this not clickable after scrolling on some mobile devices */
	position: absolute;
}

.back-left {
	left: 12.5%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

.back-right {
	right: 12.5%;
	-webkit-transform: translateX(50%);
	transform: translateX(50%);
	color: #fff;
}

.open-right .back-left,
.open-left .back-right {
	visibility: visible;
	opacity: 1;
	-webkit-transition-delay: 0.3s;
	transition-delay: 0.3s;
	pointer-events: auto;
}

.back:hover {
	color: #ddd;
}

/* Pages */
.page {
	position: relative;
	top: 0;
	overflow: auto;
	min-height: 100%;
	width: 75%;
	height: auto;
	font-size: 1.4em;
	-webkit-backface-visibility: hidden;
}

.page-right {
	left: 25%;
	outline: 5px solid #ecf0f1; /* avoid rounding gaps */
	background: #ecf0f1;
	color: #97a8b2;
	-webkit-transform: translateX(100%);
	transform: translateX(100%);
}

.splitlayout.open-right {
	background: #ecf0f1;
}

.page-left {
	left: 0;
	outline: 5px solid #34495e; /* avoid rounding gaps */
	background: #34495e;
	color: #fff;
	text-align: right;
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%);
}

.splitlayout.open-left {
	background: #34495e;
}

/* Inner page content */
.page-inner {
	padding: 2em;
}

.page-inner section {
	padding-bottom: 1em;
}

.page-inner h2 {
	margin: 0 0 1em 0;
	font-weight: 300;
	font-size: 2.4em;
}

.page-inner p {
	font-weight: 300;
	font-size: 1.2em;
}

/* All transitions */
.side,
.page {
	-webkit-transition: -webkit-transform 0.6s;
	transition: transform 0.6s;
}

.overlay {
	-webkit-transition: opacity 0.6s, visibility 0.1s 0.6s;
	transition: opacity 0.6s, visibility 0.1s 0.6s;
}

.intro-content {
	-webkit-transition: -webkit-transform 0.6s, top 0.6s;
	transition: transform 0.6s, top 0.6s;
}

.intro-content h1,
.back {
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
}

/* Open and close */

/* We need to set the position and overflow for the respective page scroll */
.reset-layout .page,
.splitlayout.open-right .page-left,
.splitlayout.open-left .page-right,
.splitlayout.close-right .page-left,
.splitlayout.close-left .page-right {
	position: absolute;
	overflow: hidden;
	height: 100%;
}

.splitlayout.open-right .page-right,
.splitlayout.open-left .page-left {
	position: relative;
	overflow: auto;
	height: auto;
}

.open-right .side-left .overlay,
.open-left .side-right .overlay {
	visibility: visible;
	opacity: 1;
	-webkit-transition: opacity 0.6s;
	transition: opacity 0.6s;
}

/* Right side open */
.open-right .side-left {
	-webkit-transform: translateX(-60%);
	transform: translateX(-60%);
}

.open-right .side-right {
	z-index: 200;
	-webkit-transform: translateX(-150%);
	transform: translateX(-150%);
}

.close-right .side-right {
	z-index: 200;
}

.open-right .side-right .intro-content {
	-webkit-transform: translateY(-50%) translateX(0%) scale(0.6);
	transform: translateY(-50%) translateX(0%) scale(0.6);
}

.open-right .page-right {
	-webkit-transform: translateX(0%);
	transform: translateX(0%);
}

/* Left side open */
.open-left .side-right {
	-webkit-transform: translateX(60%);
	transform: translateX(60%);
}

.open-left .side-left {
	z-index: 200;
	-webkit-transform: translateX(150%);
	transform: translateX(150%);
}

.close-left .side-left {
	z-index: 200;
}

.open-left .side-left .intro-content {
	-webkit-transform: translateY(-50%) translateX(-100%) scale(0.6);
	transform: translateY(-50%) translateX(-100%) scale(0.6);
}

.open-left .codropsheader {
	opacity: 0;
	visibility: hidden;
	-webkit-transition: opacity 0.3s, visibility 0.1s 0.3s;
	transition: opacity 0.3s, visibility 0.1s 0.3s;
}

.open-left .page-left {
	-webkit-transform: translateX(0%);
	transform: translateX(0%);
}

/* Media Queries */
@media screen and (max-width: 83em) {
	.intro-content { font-size: 60%; }
}

@media screen and (max-width: 58em) {
	body { font-size: 90%; }
}

@media screen and (max-width: 49.4375em) {
	.open-right .side-right {
		-webkit-transform: translateX(-175%);
		transform: translateX(-175%);
	}

	.open-right .side-left {
		-webkit-transform: translateX(-100%);
		transform: translateX(-100%);
	}

	.open-left .side-right {
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
	}

	.open-left .side-left {
		-webkit-transform: translateX(175%);
		transform: translateX(175%);
	}

	.page {
		width: 100%;
	}

	.page-right {
		left: 0;
		padding-left: 15%;
	}

	.page-left {
		padding-right: 15%;
	}

	.intro-content {
		width: 100%;
	}

	.open-right .side-right .intro-content {
		top: 100%;
		-webkit-transform: translateY(-150px) translateX(-12.5%) scale(0.5);
		transform: translateY(-150px) translateX(-12.5%) scale(0.5);
	}

	.open-left .side-left .intro-content {
		top: 100%;
		-webkit-transform: translateY(-150px) translateX(-87.5%) scale(0.5);
		transform: translateY(-150px) translateX(-87.5%) scale(0.5);
	}

	.open-right .intro-content h1,
	.open-left .intro-content h1 {
		opacity: 0;
	}

	.back-left {
		left: 6.25%;
	}

	.back-right {
		right: 6.25%;
	}
}

@media screen and (max-width: 42.5em) {
	body { font-size: 80%; }
	.intro-content { font-size: 50%; }
}

@media screen and (max-height: 41.125em) {
	.intro-content {
		-webkit-transform: translateY(-25%) translateX(-50%);
		transform: translateY(-25%) translateX(-50%);
	}
}

@media screen and (max-width: 39.375em) {
	.intro-content .profile { -webkit-transform: scale(0.5); transform: scale(0.5); }
}

@media screen and (max-width: 320px) {
	body { font-size: 70%; }
}

The JavaScript

/**
 * cbpSplitLayout.js v1.0.0
 * http://www.codrops.com
 *
 * Licensed under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * Copyright 2013, Codrops
 * http://www.codrops.com
 */
(function() {

	'use strict';

	// http://stackoverflow.com/a/11381730/989439
	function mobilecheck() {
		var check = false;
		(function(a){if(/(android|ipad|playbook|silk|bbd+|meego).+mobile|avantgo|bada/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)/|plucker|pocket|psp|series(4|6)0|symbian|treo|up.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|_)|g1 u|g560|gene|gf-5|g-mo|go(.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac( |-|/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg( g|/(k|l|u)|50|54|-[a-w])|libw|lynx|m1-w|m3ga|m50/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-([1-8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk/|se(c(-|0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas-|your|zeto|zte-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera);
		return check;
	}

	var splitlayout = document.getElementById( 'splitlayout' ),
		leftSide = splitlayout.querySelector( 'div.intro > div.side-left' ),
		rightSide = splitlayout.querySelector( 'div.intro > div.side-right' ),
		pageLeft = splitlayout.querySelector( 'div.page-left' ),
		pageRight = splitlayout.querySelector( 'div.page-right' ),
		eventtype = mobilecheck() ? 'touchstart' : 'click',
		transEndEventNames = {
			'WebkitTransition': 'webkitTransitionEnd',
			'MozTransition': 'transitionend',
			'OTransition': 'oTransitionEnd',
			'msTransition': 'MSTransitionEnd',
			'transition': 'transitionend'
		},
		transEndEventName = transEndEventNames[Modernizr.prefixed( 'transition' )];

	function init() {
		if( mobilecheck() ) {
			classie.add( splitlayout, 'mobile-layout' );
		}
		classie.add( splitlayout, 'reset-layout' );

		leftSide.querySelector( 'div.intro-content' ).addEventListener( eventtype, function( ev ) {
			reset();
			classie.add( splitlayout, 'open-left' );
		} );

		rightSide.querySelector( 'div.intro-content' ).addEventListener( eventtype, function( ev ) {
			reset();
			classie.add( splitlayout, 'open-right' );
		} );

		// back to intro
		// after transition ends:
		var onEndTransFn = function() {
				this.removeEventListener( transEndEventName, onEndTransFn );
				classie.add( splitlayout, 'reset-layout' );
				document.body.scrollTop = document.documentElement.scrollTop = 0;
			},
			backToIntro = function( ev ) {
				ev.preventDefault();
				ev.stopPropagation();
				var dir = classie.has( ev.target, 'back-right' ) ? 'left' : 'right',
					page = dir === 'right' ? pageRight : pageLeft;
				classie.remove( splitlayout, 'open-' + dir );
				classie.add( splitlayout, 'close-' + dir );
				page.addEventListener( transEndEventName, onEndTransFn );
			};

		splitlayout.querySelector( 'a.back-left' ).addEventListener( eventtype, backToIntro );
		splitlayout.querySelector( 'a.back-right' ).addEventListener( eventtype, backToIntro );
	}

	function reset() {
		classie.remove( splitlayout, 'close-right' );
		classie.remove( splitlayout, 'close-left' );
		classie.remove( splitlayout, 'reset-layout' );
	}

	init();

})();

Tagged with:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

On-Scroll Typography Animations

Conway’s Game Of Life – Cellular Automata and Renderbuffers in Three.js

3D Glass Portal Card Effect with React Three Fiber and Gaussian Splatting

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 108

Comments are closed.

  2. Wow! Thanks for putting this up. I was just on the Mission R site yesterday wondering how they did that. This is just like it!

  3. Inspirational. That is real nice, Very fluid. I enjoy the way it works with the flat ui design also.

  4. God damn layout. Love it ! Love it ! Love it ! Love it ! Love it !……………………………………… LooooooVeeeeeee it !

  5. Clean, Simple and Minimalist Design, Nice starting point any web project.
    Thanks for Sharing!

  9. Hey MaryLou, this script is unbelievable, thanks!!

    On .page-left and .page-right if you cut the paragraphs to just one section, and press the ‘back arrow’, you get this dark background on bottom of the text when the transition is happening. Can you please tell me how to fix this??

    Thanks a lot 🙂

    • Hi there!

      I had the same problem when I tried to change default set of colors. I just changed the body color to the color I needed (#fff) and I also changed this part of css for both pages :

      outline: 5px solid #34495e; /* avoid rounding gaps */

      I wan’t you want to remove or change th color of the outline that appears at theen of the .

      Excuse my English, I’m French!

  12. When I Try to change anything (Background color/image) and preview it in a browser I suddenly can scroll horizontally and it looks really messy. Why is this happening when I only change the colors? pls help 🙂

  14. MaryLou, thank you! This Layout is really awesome!

    I have tried to change some colours and effects, but curiously i cannot put a background image instead of background color.
    Can you tell me what I have to do to obtain a fixed background image?

    • how did you solve the problem? in the inner pages i cannot load an image, i can only change background color!

    • .side-left {
      left: 0;
      background-image: url(“../img/bgCoesa.jpg”);
      background-size: cover;

      }

  16. Awesome Effect thanks …

    But its having one problem , the back link i.e back-left and back-right is not visible in Safari
    I have tried to solve this but no success.

  21. Hello, very nice layout, but I have a problem (I use chrome);
    when I open the demo1 and man, I want to go back (with the arrow) to the home page where there are both him and her.
    but I do not see the arrow.
    how can I?

    • hi. did u just download it and opened it afterwards or does this happen online?
      the most of the times u have to try it out online

  22. Desde Argentina, muy buen blog me encanta aprendo mucho de ustedes gracias!!

    the best web design!

  23. Hi guys,

    any news about the IE9 issue?

    Thanks to share if somebody maid the fix for IE9

    Great design

  24. MaryLou, first congratulations, I found amazing!

    I tried to change the arrow ? (→) by an arrow in the Font Awesome, but the action back does not work. It seems that the arrow is indistinguishable from the background that is with a different z-index.

    Have you seen something to help me troubleshoot?

  25. can someone help me. when i delete the right side, the effects doesnt works. i need only left side. one page.

  26. I want to use this but I only want in a specific div but it keeps sizing to the whole screen what should I do?

  27. Is there anyway to accomplish this without position:fixed? I hate to use something that prevents us from adding other widgets on the page, above and below it…

    • care to share how you accomplished this which allows for much more customization ?

    • hey Tim! how did you accomplish this without position:fixed? I want to add this to a one page vertical scroll and have the split screen layout occupy only one of the sections.

  28. Is there ANY way to put a FIXED nav bar on the top of page-inner so that I can smooth scroll to the sections below?
    Every time I do it, the nav bar just scrolls away, regardless if I set the entire inserted top nav bar to position:fixed. I’m thinking this has something to do with the fact that the side area gets fixed once it’s opened?? Can anyone help?

    blah blah blah ….hrefs…etc

  29. Hi,

    Thanks for the inspiration! Made my own build, and that one also works in IE7+.
    Keep up the good work!

    • Hey Kay,

      I am having few trouble with IE7+ browser. Do you mind sharing your solution/build?

      It will be great if you can 🙂

      Cheers, Kishor

    • Hi Kay,

      can you please tell us that how you make this crispy thing compatible with ie 7+ , if you can share us then it would be great 🙂 Thanks a million in advance

  30. Hi ! does someone knows how to add several sides ? I want to use this with more than 2 split sections.. is it possible ?? 😉

    Thanks for reply..

    Great job indeed !!!

  31. I want help on this; I want to have more than two profiles but the other two keep occupying the whole page. How can I resize them so than I can have more than two profiles on the same page?

  32. I have a bit of an indepth question…

    I’m currently using this as a split landing page between a restaurant and its catering service. I love the idea of being able to scroll/navigate the website while still having this option to quickly switch over to the other website. Ideally, left side would be the restaurant, right side would be the catering. I have both websites setup using a responsive WordPress theme, but I’m just wondering how I’d be able to include the WordPress/have the sections open to the index of whichever website. Most of the include methods I’ve tried just leave it blank, anybody have any ideas?

  35. Just wanted to drop a note that I appreciate all the blue prints, they are really helpful have have taught me a lot. Super grateful.

  36. Thank you for the code, its an awesome idea.

    Does anyone know how one would be able to incorporate this into a one page layout?

    So you can scroll down to it in a section and when clicked it will slide over to reveal some content?

    Cheers

  37. Hi…first of all, many thanks for sharing so many awesome ideas…

    I’m experiencing an issue with this layout. I tried to replace the back arrows ( back bact-to-intro>← ) with an image.
    On the right panel, everything works fine, but on the left one it doesn’t work; somehow, it get stuck midway.
    Any clue about how to solve it??

    Thanks

  42. Hi – I’m attempting to use this theme on a WordPress site, but the slider effect isn’t working – the two sides are just static and when I click them, nothing happens. Does anyone have advice on what I need to do to fix this? Thanks.

    • I have created a WordPress theme using this code, if you would like to download it, send me me an email and I will send you the theme zip.

    • Hey Hermes.
      I would love to get the wordpress theme you made using this code.
      I want to use it for a blog I am making.
      What is your email so you can send me the zip file please.
      Thanks.
      I will credit you of course.

    • And I as well. This would make a perfect platform for me to further study WordPress theme customizations. Thanks Hermes.

    • Hermes, I would be very grateful for a copy of your theme. Please let me know how to reach you!

    • I am having the same issue as Tiffany did trying to integrate it into wordpress. I would be grateful if someone could let me know why it is doing this and how to fix it. Thanks!! My email is mjwestern@gmail.com

    • Hey Hermes,

      can you send the wordpress theme to me as well? Thanks you very much!

    • Hermes can it be possible as well to have the link to the wordpress widget ?

    • Hi Hermes,
      Great that you already went ahead and created this. It would be great if you can upload it somewhere for everyone that asked (me too). I wonder if you changed anything in the responsive part of it since it could be improved.
      Thanks!

    • Hi Hermes,
      I would love to incorporate this theme for my site refresh. PLEASE send me the WordPress .zip file thank you very much indeed.

    • Did you have any luck with putting together a wordpress theme with this? I would really love to build out one (or even more so just create a child theme from one if anyone is able to share).

  43. Hi – great site i must say – well i’m trying use this “codrops” but i need to set up an image to background… and i cant get it up. still trying…. any idea? thank you very much

  44. Hi, i would like to use this blueprint on my weebly website but i don’t know nothing about HTML and all and i would like to know how to install it ? Because i think you did a very good job and i would love to have it on my page:) thank you in advance!

  45. Hi, I am trying to upload this theme on this wordpress website but no luck, I have tried many times and still getting an error( theme is missing the style.css stylesheet.). Can anyone help me with this please..

  48. Hi,
    Anyway to stop the site scrolling to the top after closing a side.
    Currently have the split layout positioned 300% from the top.
    Cheers in advance,
    Chris