Menu icon Foundation
Off-Canvas with full-screen Orbit Slider

Hello Everyone,

I'm trying to create a landing page for my company website that utilizes a full-screen background image with 2 lines of text, 2 buttons and a bit of animation. At present, the image, text and buttons are inside a full-screen orbit slider which works fine until I add the tab-bar with the off-canvas menu.

My problem is that activating the off-canvas menu pushes the slider down and creates a mess.

I have a pretty good idea what the problem(s) is(are) and I've tried several different approaches, none of which have worked. I believe the background image needs to sit underneath the tab-bar and then the size of the Orbit slider needs to be reduced. In addition, the ending inner and outer off-canvas div wrappers need to be below all the elements on the page.

If someone in the community can take a look at my codepen and markup I'd be grateful. My HTML, CSS and JS appear below.

Finally, if someone could suggest a more elegant way of aligning the buttons that would be great

CODEPEN: http://codepen.io/WideGlide/pen/mIkAo

Tom

HTML

<div class="off-canvas-wrap" data-offcanvas>
  <div class="inner-wrap">


<!--<div class="background">-->
  
  <nav class="tab-bar">
    <section class="left-small">
      <a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
    </section>

    <section class="middle tab-bar-section">
      <h1 class="title">Level 1 Resources</h1>
    </section>

    <section class="right-small">
      <a class="right-off-canvas-toggle menu-icon" href="#"><span></span></a>
    </section>
  </nav>

  <aside class="left-off-canvas-menu">
    <ul class="off-canvas-list">
      <li><label>Menu</label></li>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
        <li><a href="#">Item 4</a></li>
    </ul>
  </aside>
  
    <a class="exit-off-canvas"></a>
  </div><!-- END INNER WRAP -->
</div><!-- END OFF CANVAS WRAP -->

  <!-- BEGIN ORBIT SLIDER -->
  <ul data-orbit>
    <li class="slide1">
        <!-- BEGIN HEADINGS -->
		<div class="small-12 columns text-center y-center">
            <!-- SHOW FOR MEDIUM UP -->
		    <h1 class="show-for-medium-up animated slideInDown landing-page h1" style="font-size:4.55rem">Level 1 Resources</h1>
            <h2 class="show-for-medium-up animated slideInLeft landing-page h2">Accounting and Finance Recruiting</h2>
                
            <!-- SHOW FOR SMALL -->
            <h1 class="show-for-small animated slideInDown landing-page h1">Level 1 Resources</h1>
		    <h2 class="show-for-small animated slideInLeft landing-page h2">Accounting and Finance Recruiting</h2>
            <br />
		</div>
        
        <!-- BEGIN BUTTONS -->
        <div class="text-center row y-center">
            <div class="small-5 push-1 columns">
                <a href="#" class="animated-button fadeIn button radius">Employers</a>
            </div>
        
            <div class="small-5 pull-1 columns">
                <a href="#" class="animated-button fadeIn button radius">Candidates</a>
            </div>
        </div>
	</li>   
  </ul> <!--END ORBIT SLIDER -->
  
<!-- </div> END BACKGROUND -->

/* CSS */

/* Not Used */
/* set full-screen background 
.background {
    min-width:100%;
    min-height:100%;
    background-repeat:no-repeat;
  	background-position:center;
	  background-image:url('http://www.hiphoprepublican.com/wp-content/uploads/2013/06/New-York-City-Sun.jpg');
  	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
   	background-size: cover;
} */

/* Orbit Container */
.orbit-container {
    width: 100%;
    height: 100%;
}

.orbit-slides-container {
    width: 100%;
    height: 100% !important;
}

ul[data-orbit] li {
    width: 100%;
    height: 100%;
    background-size: cover;
}

.slide1 {
    background: url("http://www.hiphoprepublican.com/wp-content/uploads/2013/06/New-York-City-Sun.jpg") no-repeat center;
} 

/* Headings */
.landing-page.h1, .landing-page.h2, .landing-page.p {
	  color: #000; /* #FDB62D #6A7DFE #D1D3E3*/
	  font-family: viga, 'Open Sans', sans-serif;
	  -webkit-animation-delay: 1.5s; /* Animation delay */
	  -moz-animation-delay: 1.5s;
	  -o-animation-delay: 1.5s;
	  animation-delay: 1.5s; /* Animation delay */
}

.y-center {
	  position: relative;
}

/* Animation from Animate.CSS */

.animated {
    -webkit-animation-duration: 2s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	animation-duration: 2s;
}

.animated-button {
	-webkit-animation-delay: 3.5s; /* Animation delay */
	-moz-animation-delay: 3.5s;
  	-o-animation-delay: 3.5s;
  	animation-delay: 3.5s;
    -webkit-animation-duration: 2s; /* Animation duration */
  	-webkit-animation-fill-mode: both;
  	animation-duration: 2s;
  	animation-fill-mode: both;
}

/* SlideInDown */

@-webkit-keyframes slideInDown {
  0% {
  opacity: 0;
  -webkit-transform: translateY(-2000px);
  transform: translateY(-2000px);
}

  100% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  }
}

@keyframes slideInDown {
  0% {
  opacity: 0;
  -webkit-transform: translateY(-2000px);
  -ms-transform: translateY(-2000px);
  transform: translateY(-2000px);
  }

  100% {
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
  }
}

.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}

/* SlideInLeft */

@-webkit-keyframes slideInLeft {
  0% {
  opacity: 0;
  -webkit-transform: translateX(-2000px);
  transform: translateX(-2000px);
  }

  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
}

@keyframes slideInLeft {
  0% {
  opacity: 0;
  -webkit-transform: translateX(-2000px);
  -ms-transform: translateX(-2000px);
  transform: translateX(-2000px);
  }

  100% {
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  }
}

.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}

/* FadIn */

@-webkit-keyframes fadeIn {
  0% {
  opacity: 0;
  }

  100% {
  opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
  opacity: 0;
  }

  100% {
  opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

// JS

$(document).foundation({
    orbit: {
	    stack_on_small: false,
    	navigation_arrows: false,
    	slide_number: false,
    	pause_on_hover: false,
    	resume_on_mouseout: false,
    	bullets: false,
    	timer: false,
    	variable_height: false,
			}
	});

// CENTER LANDING PAGE TEXT
  
$(document).ready(function(){
    $(".y-center").css("top",$(".y-center").parent().height()/3.5);
});
		


            

         

off-canvastab-barorbit slider

Hello Everyone,

I'm trying to create a landing page for my company website that utilizes a full-screen background image with 2 lines of text, 2 buttons and a bit of animation. At present, the image, text and buttons are inside a full-screen orbit slider which works fine until I add the tab-bar with the off-canvas menu.

My problem is that activating the off-canvas menu pushes the slider down and creates a mess.

I have a pretty good idea what the problem(s) is(are) and I've tried several different approaches, none of which have worked. I believe the background image needs to sit underneath the tab-bar and then the size of the Orbit slider needs to be reduced. In addition, the ending inner and outer off-canvas div wrappers need to be below all the elements on the page.

If someone in the community can take a look at my codepen and markup I'd be grateful. My HTML, CSS and JS appear below.

Finally, if someone could suggest a more elegant way of aligning the buttons that would be great

CODEPEN: http://codepen.io/WideGlide/pen/mIkAo

Tom

HTML

<div class="off-canvas-wrap" data-offcanvas>
  <div class="inner-wrap">


<!--<div class="background">-->
  
  <nav class="tab-bar">
    <section class="left-small">
      <a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
    </section>

    <section class="middle tab-bar-section">
      <h1 class="title">Level 1 Resources</h1>
    </section>

    <section class="right-small">
      <a class="right-off-canvas-toggle menu-icon" href="#"><span></span></a>
    </section>
  </nav>

  <aside class="left-off-canvas-menu">
    <ul class="off-canvas-list">
      <li><label>Menu</label></li>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
        <li><a href="#">Item 4</a></li>
    </ul>
  </aside>
  
    <a class="exit-off-canvas"></a>
  </div><!-- END INNER WRAP -->
</div><!-- END OFF CANVAS WRAP -->

  <!-- BEGIN ORBIT SLIDER -->
  <ul data-orbit>
    <li class="slide1">
        <!-- BEGIN HEADINGS -->
		<div class="small-12 columns text-center y-center">
            <!-- SHOW FOR MEDIUM UP -->
		    <h1 class="show-for-medium-up animated slideInDown landing-page h1" style="font-size:4.55rem">Level 1 Resources</h1>
            <h2 class="show-for-medium-up animated slideInLeft landing-page h2">Accounting and Finance Recruiting</h2>
                
            <!-- SHOW FOR SMALL -->
            <h1 class="show-for-small animated slideInDown landing-page h1">Level 1 Resources</h1>
		    <h2 class="show-for-small animated slideInLeft landing-page h2">Accounting and Finance Recruiting</h2>
            <br />
		</div>
        
        <!-- BEGIN BUTTONS -->
        <div class="text-center row y-center">
            <div class="small-5 push-1 columns">
                <a href="#" class="animated-button fadeIn button radius">Employers</a>
            </div>
        
            <div class="small-5 pull-1 columns">
                <a href="#" class="animated-button fadeIn button radius">Candidates</a>
            </div>
        </div>
	</li>   
  </ul> <!--END ORBIT SLIDER -->
  
<!-- </div> END BACKGROUND -->

/* CSS */

/* Not Used */
/* set full-screen background 
.background {
    min-width:100%;
    min-height:100%;
    background-repeat:no-repeat;
  	background-position:center;
	  background-image:url('http://www.hiphoprepublican.com/wp-content/uploads/2013/06/New-York-City-Sun.jpg');
  	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
   	background-size: cover;
} */

/* Orbit Container */
.orbit-container {
    width: 100%;
    height: 100%;
}

.orbit-slides-container {
    width: 100%;
    height: 100% !important;
}

ul[data-orbit] li {
    width: 100%;
    height: 100%;
    background-size: cover;
}

.slide1 {
    background: url("http://www.hiphoprepublican.com/wp-content/uploads/2013/06/New-York-City-Sun.jpg") no-repeat center;
} 

/* Headings */
.landing-page.h1, .landing-page.h2, .landing-page.p {
	  color: #000; /* #FDB62D #6A7DFE #D1D3E3*/
	  font-family: viga, 'Open Sans', sans-serif;
	  -webkit-animation-delay: 1.5s; /* Animation delay */
	  -moz-animation-delay: 1.5s;
	  -o-animation-delay: 1.5s;
	  animation-delay: 1.5s; /* Animation delay */
}

.y-center {
	  position: relative;
}

/* Animation from Animate.CSS */

.animated {
    -webkit-animation-duration: 2s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	animation-duration: 2s;
}

.animated-button {
	-webkit-animation-delay: 3.5s; /* Animation delay */
	-moz-animation-delay: 3.5s;
  	-o-animation-delay: 3.5s;
  	animation-delay: 3.5s;
    -webkit-animation-duration: 2s; /* Animation duration */
  	-webkit-animation-fill-mode: both;
  	animation-duration: 2s;
  	animation-fill-mode: both;
}

/* SlideInDown */

@-webkit-keyframes slideInDown {
  0% {
  opacity: 0;
  -webkit-transform: translateY(-2000px);
  transform: translateY(-2000px);
}

  100% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  }
}

@keyframes slideInDown {
  0% {
  opacity: 0;
  -webkit-transform: translateY(-2000px);
  -ms-transform: translateY(-2000px);
  transform: translateY(-2000px);
  }

  100% {
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
  }
}

.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}

/* SlideInLeft */

@-webkit-keyframes slideInLeft {
  0% {
  opacity: 0;
  -webkit-transform: translateX(-2000px);
  transform: translateX(-2000px);
  }

  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
}

@keyframes slideInLeft {
  0% {
  opacity: 0;
  -webkit-transform: translateX(-2000px);
  -ms-transform: translateX(-2000px);
  transform: translateX(-2000px);
  }

  100% {
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  }
}

.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}

/* FadIn */

@-webkit-keyframes fadeIn {
  0% {
  opacity: 0;
  }

  100% {
  opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
  opacity: 0;
  }

  100% {
  opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

// JS

$(document).foundation({
    orbit: {
	    stack_on_small: false,
    	navigation_arrows: false,
    	slide_number: false,
    	pause_on_hover: false,
    	resume_on_mouseout: false,
    	bullets: false,
    	timer: false,
    	variable_height: false,
			}
	});

// CENTER LANDING PAGE TEXT
  
$(document).ready(function(){
    $(".y-center").css("top",$(".y-center").parent().height()/3.5);
});
		


            

         

Wing-Hou Chan gave the most helpful answer for this post
Wing-Hou Chan about 5 years ago

Hey Tom!

You need to close .off-canvas-wrap and .inner-wrap after your Orbit slider. Something like this

<div class="off-canvas-wrap">
  <div class="inner-wrap">

    <!-- Offcanvas Asides, Tab-bars, etc -->

    <ul data-orbit>
      <!-- Orbit Slider Slide + Content -->
    </ul>
  </div>
</div>

Then apply this CSS:

html, body, .off-canvas-wrap, .inner-wrap {
  height: 100%;
}

I'd also recommend applying a min-height, of maybe 500px, as well, so you don't lose the content within your slider once the viewport height becomes quite small.

Wing-Hou Chan about 5 years ago

Hey Tom!

You need to close .off-canvas-wrap and .inner-wrap after your Orbit slider. Something like this

<div class="off-canvas-wrap">
  <div class="inner-wrap">

    <!-- Offcanvas Asides, Tab-bars, etc -->

    <ul data-orbit>
      <!-- Orbit Slider Slide + Content -->
    </ul>
  </div>
</div>

Then apply this CSS:

html, body, .off-canvas-wrap, .inner-wrap {
  height: 100%;
}

I'd also recommend applying a min-height, of maybe 500px, as well, so you don't lose the content within your slider once the viewport height becomes quite small.

Tom Hogan about 5 years ago

Wing-Hou,

Thank you so much!

I knew I needed to close off the off-canvas wrappers after the Orbit slide but when I did the page disappeared. Your CSS did the trick. I also added the min-height as you suggested.

Now.. any thoughts on a more elegant way of aligning the buttons so the outside edge of each button align with the end of the text? You can see the issue here when you shrink the screen: http://www.nycaafp.org/zzzzz/

Again, Thank you so much!

Tom

Wing-Hou Chan about 5 years ago

Add .collapse to the .row containing your divs that wrap your buttons. This will remove the padding present which is making your buttons appear out of alignment when the viewport is <641px.

Tom Hogan about 5 years ago

Like so?

<!-- BEGIN BUTTONS -->
```

Employers

Candidates

```

Wing-Hou Chan about 5 years ago

Your code disappeared.

Make sure you wrap a block of code with six backticks. Three backticks marking the beginning of the code block and three backticks marking the end of the code block.

I guess you were trying to confirm if you have placed .collapse on the correct element. It should look like this:

<!-- BEGIN BUTTONS -->
<div class="row collapse text-center y-center">
  <div class="small-5 push-1 collapse columns">
    <a href="#" class="animated-button fadeIn button radius">Employers</a>
  </div>
  <div class="small-5 pull-1 collapse columns">
    <a href="#" class="animated-button fadeIn button radius">Candidates</a>
  </div>
</div>