Menu icon Foundation
Off Canvas menu at bottom of html doc

hi there,

I'm currently using two Off Canvas panels; on to the left and one to the right. They slide in to display different nav menus.

One of the menus is quite long and so - for seo purposes - I would rather that code was at the bottom of my html doc.

Is there a hack to make this possible?

This is what I currently have...

<body>
  <div class="off-canvas-wrapper">
    <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>
      <!-- Your menu or Off-canvas content goes here -->
      <nav>
      <!-- Long nav menu here... -->
      </nav>
    </div>
    <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas>
      <!-- Your menu or Off-canvas content goes here -->
    </div>
    <div class="off-canvas-content" data-off-canvas-content>
      <!-- Your page content lives here -->
    </div>
  </div>
</body>

What I would prefer is:

<body>
  <div class="off-canvas-wrapper">
    <div class="off-canvas-content" data-off-canvas-content>
      <!-- Your page content lives here -->
    </div>
    <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>
      <!-- Your menu or Off-canvas content goes here -->
      <nav>
      <!-- Long nav menu here... -->
      </nav>
    </div>
    <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas>
      <!-- Your menu or Off-canvas content goes here -->
    </div>
  </div>
</body>

 

Thanks!

 

seooffcanvasoff-canvas

hi there,

I'm currently using two Off Canvas panels; on to the left and one to the right. They slide in to display different nav menus.

One of the menus is quite long and so - for seo purposes - I would rather that code was at the bottom of my html doc.

Is there a hack to make this possible?

This is what I currently have...

<body>
  <div class="off-canvas-wrapper">
    <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>
      <!-- Your menu or Off-canvas content goes here -->
      <nav>
      <!-- Long nav menu here... -->
      </nav>
    </div>
    <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas>
      <!-- Your menu or Off-canvas content goes here -->
    </div>
    <div class="off-canvas-content" data-off-canvas-content>
      <!-- Your page content lives here -->
    </div>
  </div>
</body>

What I would prefer is:

<body>
  <div class="off-canvas-wrapper">
    <div class="off-canvas-content" data-off-canvas-content>
      <!-- Your page content lives here -->
    </div>
    <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>
      <!-- Your menu or Off-canvas content goes here -->
      <nav>
      <!-- Long nav menu here... -->
      </nav>
    </div>
    <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas>
      <!-- Your menu or Off-canvas content goes here -->
    </div>
  </div>
</body>

 

Thanks!