Menu icon Foundation
off canvas menu icon disappears in Chrome

I'm trying to integrate the off canvas navigation to my project. The menu icon disappears when I open the project with Chrome, and it's visible within Safari and Firefox. I wonder what that could be.

off-canvasmenuchrome

I'm trying to integrate the off canvas navigation to my project. The menu icon disappears when I open the project with Chrome, and it's visible within Safari and Firefox. I wonder what that could be.

James Dullaghan almost 6 years ago

Hey Alexis,

Are you able to provide us with a link to the code?

-James

Caleb Winters almost 6 years ago

Hey Alexis, please show us your code or provide a link to your project. Otherwise, we won't be able to diagnose the problem.

Alexis Yan almost 6 years ago

Sure, is there a way I can make the code private? Because the code is confidential...

Thanks!

David Peters over 5 years ago

I am also having this problem. I have icons and in chrome they are delayed showing up and disappear early..

Wing-Hou Chan over 5 years ago

Hey Alexis!

Yep, I'm going to say the same thing as everyone else. It's impossible to diagnose the problem without seeing the problem itself. We can throw at you random things that may or may not be useful but with the code it would help us give you definitive solution.

If you post your code here it isn't going to be private. Anyone who visits this thread will see the code.

Alternatively you could post the code and then remove it after the problem is resolved but it won't help other community members who have the same problem.

You could also email the code to a member that would like to help and is willing to give their email address.

Or you could recreate the situation, but without the parts that you don't want people to see!

If you want to email it to me, my address is: [email protected]

Hey David!

Could we take a look at your code or could you post a link?

Pam Bifaro over 3 years ago

I am having this issue with the off-canvas not showing up or not working in Safari and chrome. Here is my code.

<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="utf-8" EnableEventValidation="false"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
   <link rel="stylesheet" href="css/foundation.css">
    <link rel="stylesheet" href="css/app.css">
 
    
     <!-- Orbit Foundation -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/motion-ui/1.1.1/motion-ui.min.css" />
<link href="css/myslider.scss.css" rel="stylesheet" type="text/css" />
</head>

  <form runat="server">

 
 <div class="off-canvas-wrapper">
  <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
 
 
<!---- <div class="row wrap">
    <div class="large-12 medium-12 hide-for-small-only columns">
      <p class="marginLess top20"></p>
    </div>
 </div> --->
 
 
  <!-- off-canvas title bar for 'small' screen -->
  <div class="row wrap3">
  <div class="small-12 hide-for-medium hide-for-landscape" >
    <div class="title-bar title-bar2" data-responsive-toggle="widemenu" data-hide-for="medium">
      <div class="title-bar-left" style="padding:10px;">
     
   <!--     <button class="menu-icon" type="button" data-open="offCanvasLeft"></button> -->
        <button class="tiny button caps"  type="button" data-toggle="offCanvasLeft">Open Menu</button>
      </div>
      <div class="title-bar-right" style="padding:10px;">
       <button class="tiny button caps">login</button>
    
      </div>
      <div class="blue text-center show-for-small-only" style="padding-top:20px;"><a href="tel:8005749813" class="blue">800.574.9813</a></div>
     
    </div>
</div>
</div>

    <!-- off-canvas left menu -->
    <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas style="padding:10px;">
   
        <!-- Close button -->
        <button type="button" class="tiny button caps" data-toggle="offCanvas" data-close>Close Menu</button>
      <ul class="vertical dropdown menu" data-dropdown-menu>
        <li class="blue"><a href="#">Industrial/Skilled Trades</a></li>
        <li><a href="#">Technical</a></li>
        <li><a href="#">Architecture/Engineering</a></li>
        <li><a href="#">Why AurStaff</a></li>
        <li><a href="#">Career Options</a></li>
        <li><a href="#">Candidate Process</a></li>
        <li><a href="#">Staffing Solutions</a></li>
        <li><a href="#">Employer Process</a></li>
        <li><a href="#">Contact Us</a></li>
       
      </ul>
    </div>

 


      <div class="off-canvas-content" data-off-canvas-content>
     
  <!--- END OF OFF CANVIS MENU ---------> 

      <div class="large-12 columns">
     
     
<!-- Grid --->
<div class="row wrap">
<div class="12-large">
        <div class="row">
         
            <!-- logo phone and social icons -->
  <div class="row">
    <div class="medium-4 columns">
      <img src="img/AurStaff-logo.png" alt="company logo" style="padding-bottom:15px; padding-top:10px;">
    </div>
    <div class="medium-4 columns medium-pu11-1 text-right">
       <p class="lineheight hide-for-small-only" style="padding-top:10px;"><span class="hide-for-small-only">
<a class="tiny button caps hidden-for-small-only" href="#">Log In</a><br /></span>
                    <span class="blue hidden-for-small-only"><a href="tel:8005749813" class="blue">800.574.9813</a></span><br/>
                <a href="#" class="hidden-for-small-only"><img src="img/facebook.png" alt="AurStaff Facebook" width="40" height="40"></a><a href="#"><img src="img/linkedIn.png" alt="AurStaff Linked In" width="40" height="40"></a><a href="#"><img src="img/blog.png" alt="AurStaff Blog" width="40" height="40"></a><a href="#"><img src="img/twitter.png" alt="AurStaff Twitter" width="40" height="40"></a> </p>
    </div>
  </div>
  <!-- / logo phone social icons -->
         
         
         
         
        </div>
<div class="row wrap">
          <div class="large-12 columns">
        
             <div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">

  <div class="title-bar-title"></div>
</div>

<div class="title-bar hide-for-small-only" id="example-menu">
  <div class="title-bar-left">
    <ul class="dropdown menu hide-for-small-only" data-dropdown-menu>
     <li><a href="#"><span class="yellow">Home</span></a></li>
      <li>
        <a href="#"><span class="yellow">Job Seekers</span></a>
        <ul class="menu vertical">
          <li class="blue"><a href="#">Areas of Specialization</a></li>
          <li class="blue"><a href="#">Our Process</a></li>
          <li class="blue"><a href="#">Career Options</a></li>
          <li class="blue"><a href="#">Benefits</a></li>
          <li class="blue"><a href="#">Resources</a></li>
          <li class="blue"><a href="#">Employee of the Quarter</a></li>
          <li class="blue"><a href="#">Newsletter</a></li>
          </ul>
       <li>
        <a href="#"><span class="yellow">Employers</span></a>
        <ul class="menu vertical">
          <li class="blue"><a href="#">Employer Overview</a></li>
          <li class="blue"><a href="#">Our Process</a></li>
          <li class="blue"><a href="#">Staffing Solutions</a></li>
          <li class="blue"><a href="#">Request Talent</a></li>
          <li class="blue"><a href="#">Resources</a></li>
          <li class="blue"><a href="#">Newsletter</a></li>
        </ul>
      </li>
     <li>
        <a href="#"><span class="yellow">Areas of Specialization</span></a>
        <ul class="menu vertical">
          <li class="blue"><a href="#">Industrial/Skilled Trades</a></li>
          <li class="blue"><a href="#">Technical</a></li>
          <li class="blue"><a href="#">Architecture/Engineering</a></li>
        </ul>
      </li>
       <li>
        <a href="#"><span class="yellow">About Us</span></a>
        <ul class="menu vertical">
          <li class="blue"><a href="#">About AurStaff</a></li>
          <li class="blue"><a href="#">Affiliated Firms</a></li>
          <li class="blue"><a href="#">Community</a></li>
          <li class="blue"><a href="#">Mission Statement</a></li>
        </ul>
      </li>
      <li><a href="#"><span class="yellow">Contact Us</span></a></li>
    </ul>
  </div>
</div>
       
          </div>
        </div>
       
       
       
<!--- ORBIT Slider --------      
        <div class="row">
          <div class="large-12 columns">
            <div class="orbit" role="region" aria-label="Areas of Specialization"  data-animate="fade-in fade-out" data-orbit>
  <ul class="orbit-container">
 
    <li class="is-active orbit-slide">
      <img class="orbit-image" src="img/imageSlider1.jpg" alt="Areas of Specialization">
    </li>
    <li class="orbit-slide">
      <img class="orbit-image" src="img/imageSlider2.jpg" alt="Industrial">
    </li>
    <li class="orbit-slide">
      <img class="orbit-image" src="img/imageSlider3.jpg" alt="Architechtural">
    </li>
    <li class="orbit-slide">
      <img class="orbit-image" src="img/imageSlider4.jpg" alt="Technical">
    </li>
  </ul>
</div>
          </div>
        </div>
-- End of ORBIT Slider -------->    
   
   
   
   
<!--- ORBIT Slider2 -------->
<div class="row wrap">
<div class="medium-12 small-12 columns">
<div class="orbit" role="region" aria-label="Areas of Specialties" data-orbit data-options="animInFromLeft:fade-in; animInFromRight:fade-in; animOutToLeft:fade-out; animOutToRight:fade-out;">

<div id="myslider" data-orbit>
    <ul class="orbit-container">
        <li class="orbit-slide">
            <span class="layer-centered">
            </span>
            <img width="2000" height="667" src="img/imageSlider1.jpg">
        </li>
        <li class="orbit-slide">
            <span class="layer-centered">
            </span>
            <img width="2000" height="667" src="img/imageSlider2.jpg">
        </li>
        <li class="orbit-slide">
            <span class="layer-centered">
            </span>
            <img width="2000" height="667" src="img/imageSlider3.jpg">
        </li>
        <li class="orbit-slide">
            <span class="layer-centered">
            </span>
            <img width="2000" height="667" src="img/imageSlider4.jpg">
        </li>
    </ul>
</div>

</div>
</div>
</div>


<!--- ORBIT Slider2 -------->    
   
   
   
   
   
   
   
    <div class="row wrap"><div class="large-12 columns"><p></p></div></div>   
<!--- Body copy -------->        
       
        <div class="row wrap">
       
        <div class="large-3 medium-12 small-12 columns float-right">
            <div class="primary callout">
              <h6 class="text-center"><strong>Job Search</strong></h6>
       <div align="center"> 
          <div id="main_UpdatePanelJobSearch" style="width:200px; text-align:center;">
   
                    <span style="Color:Red;"></span><table width="190" class="JobSearchTable">
        <tr style="class:JobSearchRow;">
       
            <td width="190"><select name="ctl00$main$jobSearchBox1$cboDiscipline" onchange="javascript:setTimeout(&#39;__doPostBack(\&#39;ctl00$main$jobSearchBox1$cboDiscipline\&#39;,\&#39;\&#39;)&#39;, 0)" id="main_jobSearchBox1_cboDiscipline" style="width:190px;">
                <option selected="selected" value="-1">select a Profession</option>
                <option value="8">Eng-Architecture/Construct/Civil</option>
                <option value="6">Eng-Design</option>
                <option value="3">Eng-Manufacturing/Production</option>
                <option value="30">Food Service</option>
                <option value="19">Logistics/Warehouse Mgmt/Procurement</option>
                <option value="18">Maintenance</option>
                <option value="20">Manufacturing/Production</option>
                <option value="21">Trades</option>

            </select></td>
        </tr>
        <tr style="class:JobSearchRow;">
       
            <td width="215"><select name="ctl00$main$jobSearchBox1$cboJSPos" onchange="javascript:setTimeout(&#39;__doPostBack(\&#39;ctl00$main$jobSearchBox1$cboJSPos\&#39;,\&#39;\&#39;)&#39;, 0)" id="main_jobSearchBox1_cboJSPos" style="width:190px;">
                <option selected="selected" value="select a Position">select a Position</option>

            </select></td>
        </tr>
        <tr style="class:JobSearchRow;">
   
            <td width="215"></td>
        </tr>
    </table>
    <table width="190" class="JobSearchLocationTable">
        <tr style="class:JobSearchLocationTitleRow;">
            <td id="main_jobSearchBox1_cellJobSearchLocationTitle" style="class:JobSearchLocationTitleCell;" colspan="2"><span id="main_jobSearchBox1_lblJobSearchLocation" class="JobSearchLocationTitleLabel">Location</span></td>
        </tr>
        <tr style="class:JobSearchRow;">
       
            <td width="190"><select name="ctl00$main$jobSearchBox1$cboState" onchange="javascript:setTimeout(&#39;__doPostBack(\&#39;ctl00$main$jobSearchBox1$cboState\&#39;,\&#39;\&#39;)&#39;, 0)" id="main_jobSearchBox1_cboState" style="width:190px;">
                <option selected="selected" value="-1">select a State</option>
                <option value="9">California</option>
                <option value="22">Iowa</option>
                <option value="35">Nebraska</option>

            </select></td>
        </tr>
        <tr style="class:JobSearchRow;">
           
            <td width="190"><select name="ctl00$main$jobSearchBox1$cboMsa" id="main_jobSearchBox1_cboMsa" style="width:190px;">
                <option selected="selected" value="select a Metro">select a Metro</option>

            </select></td>
        </tr>
    </table>
    <br /><input type="submit" name="ctl00$main$jobSearchBox1$ctl21" value="Begin Job Search" onclick="__doPostBack(&#39;ctl00$main$jobSearchBox1$ctl21&#39;,&#39;&#39;);this.disabled = true;" class="default" />
                        <div id="main_updProgress" style="display:none;">
                           
            <span style="font-size:12px;">Processing...<img src="design/background/ajax_progress.gif" style="vertical-align:text-bottom; width:180px;" /></span>
    </div>
                       
                       
</div>
</div>
            </div>
          </div>
          <div class="large-9 medium-12 small-12 columns">
          <div class="primary callout2">
            <div>
            <p></p>
           <h3>A New Headline To Go Here.</h3>  
           <p>Find the opportunity that fits like a glove. Identify the employees with the skills you need. As a leader in staffing and recruitment, AurStaff® brings more than 45 years of experience, extensive resources, and a vast network to your search, uncovering the very best people and jobs that will lead to your success. Partner with AurStaff. We specialize in <strong>industrial</strong>, <strong>technical</strong>, <strong>engineering</strong> and <strong>architecture fields</strong>.</p>
            </div>
            </div>
          </div>
         
        </div>
       
<!--- End of Body copy -------->      
       


<!--- Specialties -------->

          <div class="row wrap small-up-1 medium-up-3 large-up-3" data-equalizer>
  <div class="column">
<div class="GreenBox callout warning" data-equalizer-watch>
<p> <img src="img/Industrial.jpg" alt="Industrial/Skilled Trades" class="img"></p>
<p class="specialtyHRD"><span class="caps">Industrial</span></p>
<ul class="specialty">
              <li>Warehouse</li>
                <li>Manufacturing</li>
                <li>General Labor</li>
                <li>Grounds</li>
              </ul>
</div>
</div>
<div class="column">
<div class="BlueBox callout warning" data-equalizer-watch>
<p><img src="img/Technical.jpg" alt="Industrial/Skilled Trades" class="img"></p>
<p class="specialtyHRD"><span class="caps">Technical</span></p>
<ul class="specialty">
               <li>Maintenance</li>
                <li>QC/QA</li>
                <li>Electronics</li>
                <li>Assembly</li>
              </ul>
</div>
</div>
<div class="column">
<div class="OrangeBox callout warning" data-equalizer-watch>
<p><img src="img/Architecture.jpg" alt="Industrial/Skilled Trades" class="img"></p>
<p class="specialtyHRD"><span class="caps">Architechtural</span></p>
<ul class="specialty">
                <li>Drafting</li>
                <li>Architectural</li>
                <li>Engineering</li>
                <li>Project Management</li>
              </ul>
</div>
</div>
</div>

<!--- End of Specialties -------->



<div class="row wrap">
<div class="large-12 columns"></div>
</div> 



    
<!-- Footer -->
<footer class="row footer">
<div class="large-12 columns">
       <div class="large-3 medium-4 small-12 columns">
       <p><span class="MenuLinksHDR caps">JOB SEEKERS</span><br>
       <a href="#" class="caps MenuLinks">Areas of Specialization</a><br>
        <a href="#" class="caps MenuLinks">Our Process</a><br>
        <a href="#" class="caps MenuLinks">Career Options</a><br>
        <a href="#" class="caps MenuLinks">Benefits</a><br>
        <a href="#" class="caps MenuLinks">Resources</a><br>
        <a href="#" class="caps MenuLinks">Employee of the Quarter</a><br>
       <a href="#" class="caps MenuLinks">Newsletter</a>
        </p>
        </div>
           
        <div class="large-3 medium-4 small-12 columns"><p><span class="MenuLinksHDR caps">EMPLOYERS</span><br>
        <a href="#" class="caps MenuLinks">Employer Overview</a><br>
        <a href="#" class="caps MenuLinks">Our Process</a><br>
        <a href="#" class="caps MenuLinks">Staffing Solutions</a><br>
        <a href="#" class="caps MenuLinks">Request Talent</a><br>
        <a href="#" class="caps MenuLinks">Resources</a><br>
        <a href="#" class="caps MenuLinks">Newsletter</a>
        </p>
        </div>
           
            <div class="large-3 medium-4 small-12 columns">
<p><span class="MenuLinksHDR caps">AREAS OF SPECIALIZATION</span><br>
<a href="#" class="caps MenuLinks">Industrial/Skilled Trades</a><br>
<a href="#" class="caps MenuLinks">Technical</a><br>
<a href="#" class="caps MenuLinks">Architecture/Engineering</a>
               </p>
<p><span class="MenuLinksHDR caps">About Us</span><br>
         <a href="#" class="caps MenuLinks">About AurStaff</a><br>
           <a href="#" class="caps MenuLinks">Affiliated Firms</a><br>
           <a href="#" class="caps MenuLinks">Community</a><br>
           <a href="#" class="caps MenuLinks">Mission Statement</a>
               </p>

</div>
            <div class="large-3 medium-4 small-12 columns"><p><span class="MenuLinksHDR caps">GET IN TOUCH</span><br>
                <a href="#" class="caps MenuLinks">Contact us</a><br>
                <a href="#" class="caps MenuLinks">facebook</a><br>
                <a href="#" class="caps MenuLinks">linkedin</a><br>
                <a href="#" class="caps MenuLinks">blog</a><br>
                <a href="#" class="caps MenuLinks">twitter</a></p></div>
          </div>
          <div class="row">
<div class="large-12 columns">
 <p class="copywrite">Join our Internal Team |  &#169;Copyright <%= DateTime.Now.Year.ToString() %> AurStaff &#174;<br />
AurStaff is an affiliate of C&A Industries, Inc. | EEO / Veteran / Disabled / E-Verify Employer</p>
</div>
</div>
  </footer>
   <!-- Footer -->
  
        </div></div>
        </div></div>
       
       
        <!---- End of grid ---->
      </div>
  </div>
  </div>
    </div>
  </div>
 </div>
    </div>
  <!-- close wrapper, no more content after this -->
  </div>
</div>
</form>
    <script src="js/vendor/jquery.js"></script>
    <script src="js/vendor/what-input.js"></script>
    <script src="js/vendor/foundation.js"></script>
     <script src="js/vendor/motion-ui.js"></script>
     <script src="js/vendor/modernizr.js"></script>
     <script src="js/vendor/foundation.orbit2.js"></script>
    <script src="js/app.js"></script>
   
 </body>
</html>