Menu icon Foundation
Off-canvas menu and dropdown menu

Hello,

I want to make a navigation for mobile devices that has a logo on the left and 4 buttons on the right. The first 2 will be standard links (dialing a phone number and sending an email), and the 3rd will open a drop-down with a search box inside. The 4th section, farthest right, is the one I want to open the off-canvas menu. I tried doing it with the code below but when I size the screen down it looks messed up.

How can I achieve this?

<div class="off-canvas-wrap">
  <div class="inner-wrap">
    <nav class="tab-bar">
      
      <section class="left tab-bar-section">
        <h1 class="title left">Foundation</h1> 
      </section> 
      
      <section class="middle tab-bar-section">
        
        <section class="right">
          <a class="right-toggle menu-icon" style="border: 1px solid red; display:inherit;" data-dropdown="hover1" data-options="is_hover:true"><span></span></a>          
            <ul id="hover1" class="f-dropdown" data-dropdown-content>
              <li class="has-form">
                <div class="row collapse">
                  <div class="large-8 small-9 columns">
                    <input type="text" placeholder="Find Stuff">
                  </div>
                    <div class="large-4 small-3 columns">
                      <a href="#" class="alert button expand">Search</a>
                    </div>
                </div>
              </li>
            </ul>
        </section>
        
        <section class="right">
           <a class="right-toggle menu-icon" style="border: 1px solid blue; display:inherit; height: 45px;"><span></span></a>
        </section>
        
        <section class="right">
          <a class="right-toggle menu-icon" style="border: 1px solid black; display:inherit; width: 45px;height:45px;"><span></span></a>
        </section>
        
      </section>
 
      <section class="right-small">          
        <a class="right-off-canvas-toggle menu-icon" style="border: 1px solid green;"><span></span></a>       
      </section>
        
    </nav>
      
  <aside class="right-off-canvas-menu">
      <ul class="off-canvas-list">
        <li><label>Users</label></li>
          <li><a href="#">Hari Seldon</a></li>
          <li><a href="#">Hari Seldon</a></li>
          <li><a href="#">Hari Seldon</a></li>
          <li><a href="#">Hari Seldon</a></li>
          <li><a href="#">Hari Seldon</a></li>
          <li><a href="#">Hari Seldon</a></li>
        <li><label>Users</label></li>
          <li><a href="#">Hari Seldon</a></li>
          <li><a href="#">Hari Seldon</a></li>
          <li><a href="#">Hari Seldon</a></li>
          <li><a href="#">Hari Seldon</a></li>
          <li><a href="#">Hari Seldon</a></li>
          <li><a href="#">Hari Seldon</a></li>
        <li><label>Users</label></li>
          <li><a href="#">Hari Seldon</a></li>
          <li><a href="#">Hari Seldon</a></li>
          <li><a href="#">Hari Seldon</a></li>
          <li><a href="#">Hari Seldon</a></li>
          <li><a href="#">Hari Seldon</a></li>
          <li><a href="#">Hari Seldon</a></li>
      </ul>
   </aside>
      
  <section class="main-section">  

    <span>This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text.
      </span>
    </section>
    
    <a class="exit-off-canvas"></a>
    
  </div>
</div>
            

         

off-canvasdrop downsearchmenu

Hello,

I want to make a navigation for mobile devices that has a logo on the left and 4 buttons on the right. The first 2 will be standard links (dialing a phone number and sending an email), and the 3rd will open a drop-down with a search box inside. The 4th section, farthest right, is the one I want to open the off-canvas menu. I tried doing it with the code below but when I size the screen down it looks messed up.

How can I achieve this?

<div class="off-canvas-wrap">
  <div class="inner-wrap">
    <nav class="tab-bar">
      
      <section class="left tab-bar-section">
        <h1 class="title left">Foundation</h1> 
      </section> 
      
      <section class="middle tab-bar-section">
        
        <section class="right">
          <a class="right-toggle menu-icon" style="border: 1px solid red; display:inherit;" data-dropdown="hover1" data-options="is_hover:true"><span></span></a>          
            <ul id="hover1" class="f-dropdown" data-dropdown-content>
              <li class="has-form">
                <div class="row collapse">
                  <div class="large-8 small-9 columns">
                    <input type="text" placeholder="Find Stuff">
                  </div>
                    <div class="large-4 small-3 columns">
                      <a href="#" class="alert button expand">Search</a>
                    </div>
                </div>
              </li>
            </ul>
        </section>
        
        <section class="right">
           <a class="right-toggle menu-icon" style="border: 1px solid blue; display:inherit; height: 45px;"><span></span></a>
        </section>
        
        <section class="right">
          <a class="right-toggle menu-icon" style="border: 1px solid black; display:inherit; width: 45px;height:45px;"><span></span></a>
        </section>
        
      </section>
 
      <section class="right-small">          
        <a class="right-off-canvas-toggle menu-icon" style="border: 1px solid green;"><span></span></a>       
      </section>
        
    </nav>
      
  <aside class="right-off-canvas-menu">
      <ul class="off-canvas-list">
        <li><label>Users</label></li>
          <li><a href="#">Hari Seldon</a></li>
          <li><a href="#">Hari Seldon</a></li>
          <li><a href="#">Hari Seldon</a></li>
          <li><a href="#">Hari Seldon</a></li>
          <li><a href="#">Hari Seldon</a></li>
          <li><a href="#">Hari Seldon</a></li>
        <li><label>Users</label></li>
          <li><a href="#">Hari Seldon</a></li>
          <li><a href="#">Hari Seldon</a></li>
          <li><a href="#">Hari Seldon</a></li>
          <li><a href="#">Hari Seldon</a></li>
          <li><a href="#">Hari Seldon</a></li>
          <li><a href="#">Hari Seldon</a></li>
        <li><label>Users</label></li>
          <li><a href="#">Hari Seldon</a></li>
          <li><a href="#">Hari Seldon</a></li>
          <li><a href="#">Hari Seldon</a></li>
          <li><a href="#">Hari Seldon</a></li>
          <li><a href="#">Hari Seldon</a></li>
          <li><a href="#">Hari Seldon</a></li>
      </ul>
   </aside>
      
  <section class="main-section">  

    <span>This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text. This is a section with a lot of text.
      </span>
    </section>
    
    <a class="exit-off-canvas"></a>
    
  </div>
</div>