Menu icon Foundation
Using Top-Bar on the left side

Hi there!

I've just installed the Foundation Theme for Drupal. What I'm trying to do now is to use the Top-Bar as a Sidebar on the left, the Content should float on the right side of the Sidebar and the Footer should stay on the bottom.

Usually I know how to handle Foundation, but when it comes to using the Header on the left side instead of on top, I don't even know where to start without destroying the Responsive Elements of the Theme.

I am attaching an Image for you in order to know how the Grid should look like and also some snippets of the Code from the page.tpl of the Drupal Theme.

Thanks in Advance!
Anna :)

Foundation

<div role="document" class="page">
  <header role="banner" class="l-header">
    <nav class="top-bar" data-options="">
      <ul class="title-area">
        <li class="name"><h1><a href="#" rel="home" class="active">Website</a></h1></li>
        <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
      </ul>
      <section class="top-bar-section">
        <ul id="main-menu" class="main-nav left">
          <li class="first last leaf"><a href="/si/" class="active">Home</a></li>
        </ul>                                 
      </section>
    </nav>
</header>
<main role="main" class="row l-main">
  <div class="large-12 main columns">
    <a id="main-content"></a>
    <div id="first-time">
      <p>No front page content has been created yet.</p>
    </div>  
  </div>
</main>
<footer class="l-footer panel row" role="contentinfo">
  <div class="copyright large-12 columns">Footer</div>
</footer>
</div>
            

         

drupaltop-barnavigationsidebarleft side

Hi there!

I've just installed the Foundation Theme for Drupal. What I'm trying to do now is to use the Top-Bar as a Sidebar on the left, the Content should float on the right side of the Sidebar and the Footer should stay on the bottom.

Usually I know how to handle Foundation, but when it comes to using the Header on the left side instead of on top, I don't even know where to start without destroying the Responsive Elements of the Theme.

I am attaching an Image for you in order to know how the Grid should look like and also some snippets of the Code from the page.tpl of the Drupal Theme.

Thanks in Advance!
Anna :)

Foundation

<div role="document" class="page">
  <header role="banner" class="l-header">
    <nav class="top-bar" data-options="">
      <ul class="title-area">
        <li class="name"><h1><a href="#" rel="home" class="active">Website</a></h1></li>
        <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
      </ul>
      <section class="top-bar-section">
        <ul id="main-menu" class="main-nav left">
          <li class="first last leaf"><a href="/si/" class="active">Home</a></li>
        </ul>                                 
      </section>
    </nav>
</header>
<main role="main" class="row l-main">
  <div class="large-12 main columns">
    <a id="main-content"></a>
    <div id="first-time">
      <p>No front page content has been created yet.</p>
    </div>  
  </div>
</main>
<footer class="l-footer panel row" role="contentinfo">
  <div class="copyright large-12 columns">Footer</div>
</footer>
</div>
            

         
Samuel Kelemen over 5 years ago

i start off from the off canvas menu. its already meant for side use.