I recently purchased a template with an expanding sidebar, that slides out from the left side like so:
However, I need this menu to be on the right side of my page.
I have most of the code work figured out. I got the menu to slide out from the right side, BUT there are still two things wrong:
1) The page content doesn't get pushed to the left like it should (the menu just slides out on top of the content), because
2) the page is still being pushed from the left side, even though the menu is now on the right.
It looks like this:
I have narrowed it down, and I have figured out that this code is what's causing the page content to still be pushed towards the right. Unfortunately I don't know enough about CSS to know what this is or means:
.step-right {
-webkit-transition:all 550ms cubic-bezier(0.645,0.045,0.355,1.000);
-moz-transition:all 550ms cubic-bezier(0.645,0.045,0.355,1.000);
-o-transition:all 550ms cubic-bezier(0.645,0.045,0.355,1.000);
transition:all 550ms cubic-bezier(0.645,0.045,0.355,1.000);
/* easeInOutCubic */
-webkit-transition-timing-function:cubic-bezier(0.645,0.045,0.355,1.000);
-moz-transition-timing-function:cubic-bezier(0.645,0.045,0.355,1.000);
-o-transition-timing-function:cubic-bezier(0.645,0.045,0.355,1.000);
transition-timing-function:cubic-bezier(0.645,0.045,0.355,1.000);
/* easeInOutCubic */
}
.step-right.active {
-webkit-transition:all 450ms cubic-bezier(0.250,0.460,0.450,0.940);
-moz-transition:all 450ms cubic-bezier(0.250,0.460,0.450,0.940);
-o-transition:all 450ms cubic-bezier(0.250,0.460,0.450,0.940);
transition:all 450ms cubic-bezier(0.250,0.460,0.450,0.940);
/* easeOutQuad */
-webkit-transition-timing-function:cubic-bezier(0.250,0.460,0.450,0.940);
-moz-transition-timing-function:cubic-bezier(0.250,0.460,0.450,0.940);
-o-transition-timing-function:cubic-bezier(0.250,0.460,0.450,0.940);
transition-timing-function:cubic-bezier(0.250,0.460,0.450,0.940);
/* easeOutQuad */
-moz-transform:scale(1) rotate(0deg) translate(250px,0px) skew(0deg,0deg);
-webkit-transform:scale(1) rotate(0deg) translate(250px,0px) skew(0deg,0deg);
-o-transform:scale(1) rotate(0deg) translate(250px,0px) skew(0deg,0deg);
-ms-transform:scale(1) rotate(0deg) translate(250px,0px) skew(0deg,0deg);
transform:scale(1) rotate(0deg) translate(250px,0px) skew(0deg,0deg);
}
Here is the HTML for the menu:
<!-- Navigation header -->
<header class="main custom-scroll" style="">
<!-- #header-scrollarea adds custom scrollbar for header -->
<div id="header-scrollarea">
<!-- navigation -->
<nav class="main-nav">
<ul class="site-nav">
<!-- li class active for active page link add gumby-trigger=#id to target drawer with child navigation -->
<li class="active"><a href="" class="toggle" gumby-trigger="#home-sub">Home<span>We Start Here</span></a>
<ul id="home-sub" class="drawer">
<li class="active"><a href="index.html">Home Default</a></li>
<li><a href="home-two.html">Home Extended</a></li>
<li><a href="home-work.html">Home Work / AJAX</a></li>
</ul>
</li>
<li><a href="" class="toggle" gumby-trigger="#about-sub">Studio<span>Read More About Us</span></a>
<ul id="about-sub" class="drawer">
<li><a href="about.html">About Us</a></li>
<li><a href="about-alt.html">About Us Alt</a></li>
</ul>
</li>
<li><a href="" class="toggle" gumby-trigger="#work-sub">Portfolio<span>Some Recent Work</span></a>
<ul id="work-sub" class="drawer">
<li><a href="folio-stripe.html">Folio Stripe</a></li>
<li><a href="folio-grid.html">Folio Grid</a></li>
<li><a href="folio-grid-alt.html">Folio Grid Alt</a></li>
<li><a href="folio-single.html">Folio Single</a></li>
<li><a href="folio-single-alt.html">Folio Single Alt</a></li>
</ul>
</li>
<li><a href="contact.html">Contact<span>Get In Touch With Us</span></a></li>
</ul>
</nav>
</div>
</header>
<!-- back to top button displays after 850px vertical scroll value in ../js/main.js -->
<div class="back-to-top">
<a id="top-trigger">
<i class="fa fa-angle-up"></i>
</a>
</div>
</div>
<!-- Main content block - all page content -->
<div class="content custom-scroll">
<!-- blocker active with active header -->
<div class="blocker">
</div>
<!-- #scrollarea adds custom scrollbar for main content -->
<div id="scrollarea">
<!-- action class for animating page content when header is active -->
<div class="action step-right">
<!-- superslides -->
<section class="home-slider">
<!-- #crumbs for page title bar and top navigation add abs class to make crumbs stick to top(background slideshow) -->
<div id="crumbs" class="abs">
<div class="row large dark">
<div class="six columns">
<!-- page title/statement -->
<h6 class="sub-heading"></h6>
</div>
<div class="six columns text-right">
<!-- top on-page nav -->
<ul class="nav-icon-list">
<li><a class="search-btn"><span>Search</span></a></li>
<li><a class="search-btn"><span>Search</span></a></li>
<li><a class="search-btn"><span>Search</span></a></li>
</ul>
<!-- header trigger -->
<div class="trigger">
<div class="trigger-box">
<a class="toggle" gumby-trigger="header.main" id="trigger">
<i class="fa fa-bars active"></i>
<i class="fa fa-times"></i>
</a>
</div>
</div>
</div>
</div>
Can anyone please help me fix this code so the page content gets pushed to the left? Help is greatly appreciated!
