Menu icon Foundation
Div Alignment Issue

Hi,

I'm new to foundation and I've problem.
I don't understand why nav and my header doesn't align with my panel (see screenshot) ?

A huge thanks in advance for your help :)!

Capture d  cran 2014 04 25   17.45.58

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation</title>
    <link rel="stylesheet" href="stylesheets/app.css" />
    <script src="bower_components/modernizr/modernizr.js"></script>
  </head>
  <body>
      
<div class="off-canvas-wrap " data-offcanvas>
    <div class="inner-wrap ">
      
<header class="header">
    <div class="row">
       
        
        <div class="large-12 columns">
            
             <div id="langues" class=" hide-for-small-only medium-3 large-3">
        Test
        </div>
        
            <div class="head hide-for-small-only">
                
                
                
                <nav class="top-bar">
                
                
                    <ul class="title-area">
    <li class="name">
      <h1><a href="#">My Site</a></h1>
    </li>
    <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
  </ul>

  <section class="top-bar-section">
    <!-- Right Nav Section -->
    <ul class="left">
      <li class="active"><a href="#">Right Button Active</a></li>
      <li class="has-dropdown">
        <a href="#">Right Button Dropdown</a>
        <ul class="dropdown">
          <li><a href="#">First link in dropdown</a></li>
        </ul>
      </li>
    </ul>
      </section>
                          
                    
                </nav>
            
        
            </div>
        
        </div>
    </div>
      
</header>
      
      

      
      
      
      
      
    
  
      <div class="show-for-small-only">
    <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">
        <h2 class="title">Les notes de mon Jardin </h2>
      </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>Foundation</label></li>
        <li><a href="#">The Psychohistorians</a></li>
        <li><a href="#">...</a></li>
      </ul>
    </aside> -->

    <aside class="right-off-canvas-menu">
      <ul class="off-canvas-list">
        <li><label>Accueil</label></li>
        <li><a href="http://www/google.be">Hari Seldon</a></li>
        <li><a href="#">Hari Seldon</a></li>
        <li><a href="#">Hari Seldon</a></li>
      </ul>
    </aside>

    <section class="main-section">
      <!-- content goes here -->
    </section>

  <a class="exit-off-canvas"></a>
          </div>
        
     

    
     <div class="row">  
  <div class="small-12">
        <p class="panel" test></p>
        </div>    
        
        </div> 
</div> 
    
    
    
</div>
      
      
      
      
      
      
      
      
      
      
    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="bower_components/foundation/js/foundation.min.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>
            

         

panelsgrid

Hi,

I'm new to foundation and I've problem.
I don't understand why nav and my header doesn't align with my panel (see screenshot) ?

A huge thanks in advance for your help :)!

Capture d  cran 2014 04 25   17.45.58

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation</title>
    <link rel="stylesheet" href="stylesheets/app.css" />
    <script src="bower_components/modernizr/modernizr.js"></script>
  </head>
  <body>
      
<div class="off-canvas-wrap " data-offcanvas>
    <div class="inner-wrap ">
      
<header class="header">
    <div class="row">
       
        
        <div class="large-12 columns">
            
             <div id="langues" class=" hide-for-small-only medium-3 large-3">
        Test
        </div>
        
            <div class="head hide-for-small-only">
                
                
                
                <nav class="top-bar">
                
                
                    <ul class="title-area">
    <li class="name">
      <h1><a href="#">My Site</a></h1>
    </li>
    <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
  </ul>

  <section class="top-bar-section">
    <!-- Right Nav Section -->
    <ul class="left">
      <li class="active"><a href="#">Right Button Active</a></li>
      <li class="has-dropdown">
        <a href="#">Right Button Dropdown</a>
        <ul class="dropdown">
          <li><a href="#">First link in dropdown</a></li>
        </ul>
      </li>
    </ul>
      </section>
                          
                    
                </nav>
            
        
            </div>
        
        </div>
    </div>
      
</header>
      
      

      
      
      
      
      
    
  
      <div class="show-for-small-only">
    <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">
        <h2 class="title">Les notes de mon Jardin </h2>
      </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>Foundation</label></li>
        <li><a href="#">The Psychohistorians</a></li>
        <li><a href="#">...</a></li>
      </ul>
    </aside> -->

    <aside class="right-off-canvas-menu">
      <ul class="off-canvas-list">
        <li><label>Accueil</label></li>
        <li><a href="http://www/google.be">Hari Seldon</a></li>
        <li><a href="#">Hari Seldon</a></li>
        <li><a href="#">Hari Seldon</a></li>
      </ul>
    </aside>

    <section class="main-section">
      <!-- content goes here -->
    </section>

  <a class="exit-off-canvas"></a>
          </div>
        
     

    
     <div class="row">  
  <div class="small-12">
        <p class="panel" test></p>
        </div>    
        
        </div> 
</div> 
    
    
    
</div>
      
      
      
      
      
      
      
      
      
      
    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="bower_components/foundation/js/foundation.min.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>
            

         
Varun Chin over 5 years ago

hi, add column class with your panel class in your tag.






this will make your panel's width equal to your header and nav's width.

Pierre Adriaenssens over 5 years ago

Thanks a lot, you solved my problem :)!!

But it leads me to an other one. Everything is fine in Large en medium but in small it gives me that: http://imageshack.com/a/img834/7527/mcbi.png.

How can I adjust the length with the mobile nav bar ?

Thanks in advance :)