Menu icon Foundation

Developer | San Diego, CA

I am a retired mathematician. I have built and maintained two websites using Zurb Foundation as a hobby.

My Posts










My Comments

George Benthien commented on George Benthien's post 8 months

Here is a simple example to show the problem. Copy the code for Top Bar from the docs, namely
<div class="top-bar">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text">Site Title</li>
<li>
<a href="#">One</a>
<ul class="menu vertical">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li><input type="search" placeholder="Search"></li>
<li><button type="button" class="button">Search</button></li>
</ul>
</div>
</div>
Paste this code in index.html. This will produce the top bar shown in the docs. Now add the class "active" to the second li element. This will correctly highlight Two on the top bar. now change the class active to "is-active". I now see no highlighting on the top bar. If I add the css that Rafi suggested, namely
.menu > li.is-active {
background: salmon;
}
I do get a salmon colored background on Two. However, if I hover over One on the top bar, the salmon background moves to One. If I then move away, all highlighting is gone.
 
 
 
 
 
 
 
 
 
 
 
 
 
h

George Benthien commented on George Benthien's post 8 months

Rafi
I wasn't trying to write css for is-active, I was just pointing out what inspecting the active element with the browser dev tools showed as far as which css element was dominating the selection of the background for the active element. I have not been able to get is-active to work properly, but the deprecated active works perfectly. I did try inserting the code you mentioned in my css to see what would happen. It did highlight the active element correctly, but any other item on the top-bar that had a dropdown menu was also highlighted when you hovered over it. That didn't happen for elements on the top-bar that didn't have a dropdown menu.
George

George Benthien commented on Carolyn Lee's post 10 months

The code below illustrates the approach I use. You can go to my website https://gbenthien.net to see how it works.
<nav>
<!-- off-canvas title bar for 'small' screen -->
<div class="data-sticky-container" data-sticky-container>
<div class="sticky" data-sticky data-sticky-on="small" data-options="marginTop: 0;">
<div class="title-bar" data-responsive-toggle="widemenu" data-hide-for="medium">
<div class="title-bar-left">
<button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
<span class="title-bar-title">Menu</span>
</div>
<div class="title-bar-right"></div>
</div>
</div>
</div>

<!-- off-canvas left menu for "small" screen -->
<div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>
<button class="close-button" aria-label="Close menu" type="button" data-close>
<span aria-hidden="true">&times;</span>
</button>
<ul class="vertical menu">
<li>
<a href="file1.html">item1</a>
</li>
<li>
<a href="file2.html">item2</a>
</li>
<li>
<a href="file3.html">item3</a>
</li>
</ul>
</div>

<!-- "top-bar menu for 'medium' and up -->
<div data-sticky-container>
<div id="widemenu" class="top-bar" data-sticky data-options="marginTop:0;">
<div class="top-bar-left">
<ul class="menu dropdown" data-dropdown-menu data-close-on-click-inside="false">
<li>
<a href="file1.html">item1</a>
</li>
<li>
<a href="file2.html">item2</a>
</li>
<li>
<a href="file3.html">item3</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
You also need to wrap your page content inside of <div class="off-canvas-content" data-off-canvas-content> ...</div>. I hope this helps 
 

George Benthien commented on Carolyn Lee's post 10 months

The code below shows the method I use. you can see an example o my web site https://gbnthien.net
<nav>
<!-- off-canvas title bar for 'small' screen -->
<div class="data-sticky-container" data-sticky-container>
<div class="sticky" data-sticky data-sticky-on="small" data-options="marginTop: 0;">
<div class="title-bar" data-responsive-toggle="widemenu" data-hide-for="medium">
<div class="title-bar-left">
<button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
<span class="title-bar-title">Menu</span>
</div>
<div class="title-bar-right"></div>
</div>
</div>
</div>

<!-- off-canvas left menu for "small" screen -->
<div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>
<button class="close-button" aria-label="Close menu" type="button" data-close>
<span aria-hidden="true">&times;</span>
</button>
<ul class="vertical menu">
<li>
<a href="file1.html">item1</a>
</li>
<li>
<a href="file2.html">item2</a>
</li>
<li>
<a href="file3.html">item3</a>
</li>
</ul>
</div>

<!-- "top-bar menu for 'medium' and up -->
<div data-sticky-container>
<div id="widemenu" class="top-bar" data-sticky data-options="marginTop:0;">
<div class="top-bar-left">
<ul class="menu dropdown" data-dropdown-menu data-close-on-click-inside="false">
<li>
<a href="file1.html">item1</a>
</li>
<li>
<a href="file2.html">item2</a>
</li>
<li>
<a href="file3.html">item3</a>
</li>
</ul>
</div>
</div>
</div>
</nav>

George Benthien commented on Carolyn Lee's post 10 months

The type of code I use is shown below. you can see how it works on my web site https://gbenthien.net .
<nav>
<!-- off-canvas title bar for 'small' screen -->
<div class="data-sticky-container" data-sticky-container>
<div class="sticky" data-sticky data-sticky-on="small" data-options="marginTop: 0;">
<div class="title-bar" data-responsive-toggle="widemenu" data-hide-for="medium">
<div class="title-bar-left">
<button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
<span class="title-bar-title">Menu</span>
</div>
<div class="title-bar-right"></div>
</div>
</div>
</div>

<!-- off-canvas left menu for "small" screen -->
<div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>
<button class="close-button" aria-label="Close menu" type="button" data-close>
<span aria-hidden="true">&times;</span>
</button>
<ul class="vertical menu">
<li>
<a href="file1.html">item1</a>
</li>
<li>
<a href="file2.html">item2</a>
</li>
<li>
<a href="file3.html">item3</a>
</li>
</ul>
</div>

<!-- "top-bar menu for 'medium' and up -->
<div data-sticky-container>
<div id="widemenu" class="top-bar" data-sticky data-options="marginTop:0;">
<div class="top-bar-left">
<ul class="menu dropdown" data-dropdown-menu data-close-on-click-inside="false">
<li>
<a href="file1.html">item1</a>
</li>
<li>
<a href="file2.html">item2</a>
</li>
<li>
<a href="file3.html">item3</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
 The offcanvas menu does overlap the content.
 
 
 
 
 
 
 
 
i

George Benthien commented on Carolyn Lee's post 10 months

The type of code I use is shown below. you can see how it works on my web site https://gbenthien.net .
<nav>
<!-- off-canvas title bar for 'small' screen -->
<div class="data-sticky-container" data-sticky-container>
<div class="sticky" data-sticky data-sticky-on="small" data-options="marginTop: 0;">
<div class="title-bar" data-responsive-toggle="widemenu" data-hide-for="medium">
<div class="title-bar-left">
<button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
<span class="title-bar-title">Menu</span>
</div>
<div class="title-bar-right"></div>
</div>
</div>
</div>

<!-- off-canvas left menu for "small" screen -->
<div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>
<button class="close-button" aria-label="Close menu" type="button" data-close>
<span aria-hidden="true">&times;</span>
</button>
<ul class="vertical menu">
<li>
<a href="file1.html">item1</a>
</li>
<li>
<a href="file2.html">item2</a>
</li>
<li>
<a href="file3.html">item3</a>
</li>
</ul>
</div>

<!-- "top-bar menu for 'medium' and up -->
<div data-sticky-container>
<div id="widemenu" class="top-bar" data-sticky data-options="marginTop:0;">
<div class="top-bar-left">
<ul class="menu dropdown" data-dropdown-menu data-close-on-click-inside="false">
<li>
<a href="file1.html">item1</a>
</li>
<li>
<a href="file2.html">item2</a>
</li>
<li>
<a href="file3.html">item3</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
 
 
 
 
 
 
 
 
 
i

George Benthien commented on Carolyn Lee's post 10 months

The type of code I use is shown below. you can see how it works on my web site https://gbenthien.net .
<nav>
<!-- off-canvas title bar for 'small' screen -->
<div class="data-sticky-container" data-sticky-container>
<div class="sticky" data-sticky data-sticky-on="small" data-options="marginTop: 0;">
<div class="title-bar" data-responsive-toggle="widemenu" data-hide-for="medium">
<div class="title-bar-left">
<button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
<span class="title-bar-title">Menu</span>
</div>
<div class="title-bar-right"></div>
</div>
</div>
</div>

<!-- off-canvas left menu for "small" screen -->
<div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>
<button class="close-button" aria-label="Close menu" type="button" data-close>
<span aria-hidden="true">&times;</span>
</button>
<ul class="vertical menu">
<li>
<a href="file1.html">item1</a>
</li>
<li>
<a href="file2.html">item2</a>
</li>
<li>
<a href="file3.html">item3</a>
</li>
</ul>
</div>

<!-- "top-bar menu for 'medium' and up -->
<div data-sticky-container>
<div id="widemenu" class="top-bar" data-sticky data-options="marginTop:0;">
<div class="top-bar-left">
<ul class="menu dropdown" data-dropdown-menu data-close-on-click-inside="false">
<li>
<a href="file1.html">item1</a>
</li>
<li>
<a href="file2.html">item2</a>
</li>
<li>
<a href="file3.html">item3</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
 
 
 
 
 
 
 
 
 
i

George Benthien commented on Carolyn Lee's post 10 months

The type of code I use is shown below. you can see how it works on my web site https://gbenthien.net .
<nav>
<!-- off-canvas title bar for 'small' screen -->
<div class="data-sticky-container" data-sticky-container>
<div class="sticky" data-sticky data-sticky-on="small" data-options="marginTop: 0;">
<div class="title-bar" data-responsive-toggle="widemenu" data-hide-for="medium">
<div class="title-bar-left">
<button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
<span class="title-bar-title">Menu</span>
</div>
<div class="title-bar-right"></div>
</div>
</div>
</div>

<!-- off-canvas left menu for "small" screen -->
<div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>
<button class="close-button" aria-label="Close menu" type="button" data-close>
<span aria-hidden="true">&times;</span>
</button>
<ul class="vertical menu">
<li>
<a href="file1.html">item1</a>
</li>
<li>
<a href="file2.html">item2</a>
</li>
<li>
<a href="file3.html">item3</a>
</li>
</ul>
</div>

<!-- "top-bar menu for 'medium' and up -->
<div data-sticky-container>
<div id="widemenu" class="top-bar" data-sticky data-options="marginTop:0;">
<div class="top-bar-left">
<ul class="menu dropdown" data-dropdown-menu data-close-on-click-inside="false">
<li>
<a href="file1.html">item1</a>
</li>
<li>
<a href="file2.html">item2</a>
</li>
<li>
<a href="file3.html">item3</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
 
 
 
 
 
 
 
 
 
i

George Benthien commented on Carolyn Lee's post 10 months

The code below illustrates what 
 
The type of code I use is shown below. you can see how it works on my web site https://gbenthien.net .
<nav>
<!-- off-canvas title bar for 'small' screen -->
<div class="data-sticky-container" data-sticky-container>
<div class="sticky" data-sticky data-sticky-on="small" data-options="marginTop: 0;">
<div class="title-bar" data-responsive-toggle="widemenu" data-hide-for="medium">
<div class="title-bar-left">
<button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
<span class="title-bar-title">Menu</span>
</div>
<div class="title-bar-right"></div>
</div>
</div>
</div>

<!-- off-canvas left menu for "small" screen -->
<div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>
<button class="close-button" aria-label="Close menu" type="button" data-close>
<span aria-hidden="true">&times;</span>
</button>
<ul class="vertical menu">
<li>
<a href="file1.html">item1</a>
</li>
<li>
<a href="file2.html">item2</a>
</li>
<li>
<a href="file3.html">item3</a>
</li>
</ul>
</div>

<!-- "top-bar menu for 'medium' and up -->
<div data-sticky-container>
<div id="widemenu" class="top-bar" data-sticky data-options="marginTop:0;">
<div class="top-bar-left">
<ul class="menu dropdown" data-dropdown-menu data-close-on-click-inside="false">
<li>
<a href="file1.html">item1</a>
</li>
<li>
<a href="file2.html">item2</a>
</li>
<li>
<a href="file3.html">item3</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
 
 
 
 
 
 
 
 
 
i

George Benthien commented on George Benthien's post 11 months

One way around this problem is to introduce a variable named php and test on that. Here is a sample
{{#if php}}
{{> phpvars}}
{{/if}}
Then set php to true in the front matter of the php files. For example
---
php: true
---
It is not necessary to set php in the remaining html files as the default value for php is false.

Posts Followed



  • NEW
  • Wrapping top-bar does not work.

    By anish mehta

    top-bar

    Hello! &nbsp; When I am trying to wrap the contents in top-bar-left or right, it does not work as intended. I found this issue with version 6.4.1 of Foundation. But it works fine on v.6.3.1. But if I wrap the whole top-bar it works fine albeit it does n... (continued)


Following

    No Content

Followers

My Posts

My Comments

You commented on George Benthien's post 8 months

Here is a simple example to show the problem. Copy the code for Top Bar from the docs, namely
<div class="top-bar">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text">Site Title</li>
<li>
<a href="#">One</a>
<ul class="menu vertical">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li><input type="search" placeholder="Search"></li>
<li><button type="button" class="button">Search</button></li>
</ul>
</div>
</div>
Paste this code in index.html. This will produce the top bar shown in the docs. Now add the class "active" to the second li element. This will correctly highlight Two on the top bar. now change the class active to "is-active". I now see no highlighting on the top bar. If I add the css that Rafi suggested, namely
.menu > li.is-active {
background: salmon;
}
I do get a salmon colored background on Two. However, if I hover over One on the top bar, the salmon background moves to One. If I then move away, all highlighting is gone.
 
 
 
 
 
 
 
 
 
 
 
 
 
h

You commented on George Benthien's post 8 months

Rafi
I wasn't trying to write css for is-active, I was just pointing out what inspecting the active element with the browser dev tools showed as far as which css element was dominating the selection of the background for the active element. I have not been able to get is-active to work properly, but the deprecated active works perfectly. I did try inserting the code you mentioned in my css to see what would happen. It did highlight the active element correctly, but any other item on the top-bar that had a dropdown menu was also highlighted when you hovered over it. That didn't happen for elements on the top-bar that didn't have a dropdown menu.
George

You commented on Carolyn Lee's post 10 months

The code below illustrates the approach I use. You can go to my website https://gbenthien.net to see how it works.
<nav>
<!-- off-canvas title bar for 'small' screen -->
<div class="data-sticky-container" data-sticky-container>
<div class="sticky" data-sticky data-sticky-on="small" data-options="marginTop: 0;">
<div class="title-bar" data-responsive-toggle="widemenu" data-hide-for="medium">
<div class="title-bar-left">
<button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
<span class="title-bar-title">Menu</span>
</div>
<div class="title-bar-right"></div>
</div>
</div>
</div>

<!-- off-canvas left menu for "small" screen -->
<div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>
<button class="close-button" aria-label="Close menu" type="button" data-close>
<span aria-hidden="true">&times;</span>
</button>
<ul class="vertical menu">
<li>
<a href="file1.html">item1</a>
</li>
<li>
<a href="file2.html">item2</a>
</li>
<li>
<a href="file3.html">item3</a>
</li>
</ul>
</div>

<!-- "top-bar menu for 'medium' and up -->
<div data-sticky-container>
<div id="widemenu" class="top-bar" data-sticky data-options="marginTop:0;">
<div class="top-bar-left">
<ul class="menu dropdown" data-dropdown-menu data-close-on-click-inside="false">
<li>
<a href="file1.html">item1</a>
</li>
<li>
<a href="file2.html">item2</a>
</li>
<li>
<a href="file3.html">item3</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
You also need to wrap your page content inside of <div class="off-canvas-content" data-off-canvas-content> ...</div>. I hope this helps 
 

You commented on Carolyn Lee's post 10 months

The code below shows the method I use. you can see an example o my web site https://gbnthien.net
<nav>
<!-- off-canvas title bar for 'small' screen -->
<div class="data-sticky-container" data-sticky-container>
<div class="sticky" data-sticky data-sticky-on="small" data-options="marginTop: 0;">
<div class="title-bar" data-responsive-toggle="widemenu" data-hide-for="medium">
<div class="title-bar-left">
<button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
<span class="title-bar-title">Menu</span>
</div>
<div class="title-bar-right"></div>
</div>
</div>
</div>

<!-- off-canvas left menu for "small" screen -->
<div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>
<button class="close-button" aria-label="Close menu" type="button" data-close>
<span aria-hidden="true">&times;</span>
</button>
<ul class="vertical menu">
<li>
<a href="file1.html">item1</a>
</li>
<li>
<a href="file2.html">item2</a>
</li>
<li>
<a href="file3.html">item3</a>
</li>
</ul>
</div>

<!-- "top-bar menu for 'medium' and up -->
<div data-sticky-container>
<div id="widemenu" class="top-bar" data-sticky data-options="marginTop:0;">
<div class="top-bar-left">
<ul class="menu dropdown" data-dropdown-menu data-close-on-click-inside="false">
<li>
<a href="file1.html">item1</a>
</li>
<li>
<a href="file2.html">item2</a>
</li>
<li>
<a href="file3.html">item3</a>
</li>
</ul>
</div>
</div>
</div>
</nav>

You commented on Carolyn Lee's post 10 months

The type of code I use is shown below. you can see how it works on my web site https://gbenthien.net .
<nav>
<!-- off-canvas title bar for 'small' screen -->
<div class="data-sticky-container" data-sticky-container>
<div class="sticky" data-sticky data-sticky-on="small" data-options="marginTop: 0;">
<div class="title-bar" data-responsive-toggle="widemenu" data-hide-for="medium">
<div class="title-bar-left">
<button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
<span class="title-bar-title">Menu</span>
</div>
<div class="title-bar-right"></div>
</div>
</div>
</div>

<!-- off-canvas left menu for "small" screen -->
<div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>
<button class="close-button" aria-label="Close menu" type="button" data-close>
<span aria-hidden="true">&times;</span>
</button>
<ul class="vertical menu">
<li>
<a href="file1.html">item1</a>
</li>
<li>
<a href="file2.html">item2</a>
</li>
<li>
<a href="file3.html">item3</a>
</li>
</ul>
</div>

<!-- "top-bar menu for 'medium' and up -->
<div data-sticky-container>
<div id="widemenu" class="top-bar" data-sticky data-options="marginTop:0;">
<div class="top-bar-left">
<ul class="menu dropdown" data-dropdown-menu data-close-on-click-inside="false">
<li>
<a href="file1.html">item1</a>
</li>
<li>
<a href="file2.html">item2</a>
</li>
<li>
<a href="file3.html">item3</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
 The offcanvas menu does overlap the content.
 
 
 
 
 
 
 
 
i

You commented on Carolyn Lee's post 10 months

The type of code I use is shown below. you can see how it works on my web site https://gbenthien.net .
<nav>
<!-- off-canvas title bar for 'small' screen -->
<div class="data-sticky-container" data-sticky-container>
<div class="sticky" data-sticky data-sticky-on="small" data-options="marginTop: 0;">
<div class="title-bar" data-responsive-toggle="widemenu" data-hide-for="medium">
<div class="title-bar-left">
<button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
<span class="title-bar-title">Menu</span>
</div>
<div class="title-bar-right"></div>
</div>
</div>
</div>

<!-- off-canvas left menu for "small" screen -->
<div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>
<button class="close-button" aria-label="Close menu" type="button" data-close>
<span aria-hidden="true">&times;</span>
</button>
<ul class="vertical menu">
<li>
<a href="file1.html">item1</a>
</li>
<li>
<a href="file2.html">item2</a>
</li>
<li>
<a href="file3.html">item3</a>
</li>
</ul>
</div>

<!-- "top-bar menu for 'medium' and up -->
<div data-sticky-container>
<div id="widemenu" class="top-bar" data-sticky data-options="marginTop:0;">
<div class="top-bar-left">
<ul class="menu dropdown" data-dropdown-menu data-close-on-click-inside="false">
<li>
<a href="file1.html">item1</a>
</li>
<li>
<a href="file2.html">item2</a>
</li>
<li>
<a href="file3.html">item3</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
 
 
 
 
 
 
 
 
 
i

You commented on Carolyn Lee's post 10 months

The type of code I use is shown below. you can see how it works on my web site https://gbenthien.net .
<nav>
<!-- off-canvas title bar for 'small' screen -->
<div class="data-sticky-container" data-sticky-container>
<div class="sticky" data-sticky data-sticky-on="small" data-options="marginTop: 0;">
<div class="title-bar" data-responsive-toggle="widemenu" data-hide-for="medium">
<div class="title-bar-left">
<button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
<span class="title-bar-title">Menu</span>
</div>
<div class="title-bar-right"></div>
</div>
</div>
</div>

<!-- off-canvas left menu for "small" screen -->
<div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>
<button class="close-button" aria-label="Close menu" type="button" data-close>
<span aria-hidden="true">&times;</span>
</button>
<ul class="vertical menu">
<li>
<a href="file1.html">item1</a>
</li>
<li>
<a href="file2.html">item2</a>
</li>
<li>
<a href="file3.html">item3</a>
</li>
</ul>
</div>

<!-- "top-bar menu for 'medium' and up -->
<div data-sticky-container>
<div id="widemenu" class="top-bar" data-sticky data-options="marginTop:0;">
<div class="top-bar-left">
<ul class="menu dropdown" data-dropdown-menu data-close-on-click-inside="false">
<li>
<a href="file1.html">item1</a>
</li>
<li>
<a href="file2.html">item2</a>
</li>
<li>
<a href="file3.html">item3</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
 
 
 
 
 
 
 
 
 
i

You commented on Carolyn Lee's post 10 months

The type of code I use is shown below. you can see how it works on my web site https://gbenthien.net .
<nav>
<!-- off-canvas title bar for 'small' screen -->
<div class="data-sticky-container" data-sticky-container>
<div class="sticky" data-sticky data-sticky-on="small" data-options="marginTop: 0;">
<div class="title-bar" data-responsive-toggle="widemenu" data-hide-for="medium">
<div class="title-bar-left">
<button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
<span class="title-bar-title">Menu</span>
</div>
<div class="title-bar-right"></div>
</div>
</div>
</div>

<!-- off-canvas left menu for "small" screen -->
<div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>
<button class="close-button" aria-label="Close menu" type="button" data-close>
<span aria-hidden="true">&times;</span>
</button>
<ul class="vertical menu">
<li>
<a href="file1.html">item1</a>
</li>
<li>
<a href="file2.html">item2</a>
</li>
<li>
<a href="file3.html">item3</a>
</li>
</ul>
</div>

<!-- "top-bar menu for 'medium' and up -->
<div data-sticky-container>
<div id="widemenu" class="top-bar" data-sticky data-options="marginTop:0;">
<div class="top-bar-left">
<ul class="menu dropdown" data-dropdown-menu data-close-on-click-inside="false">
<li>
<a href="file1.html">item1</a>
</li>
<li>
<a href="file2.html">item2</a>
</li>
<li>
<a href="file3.html">item3</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
 
 
 
 
 
 
 
 
 
i

You commented on Carolyn Lee's post 10 months

The code below illustrates what 
 
The type of code I use is shown below. you can see how it works on my web site https://gbenthien.net .
<nav>
<!-- off-canvas title bar for 'small' screen -->
<div class="data-sticky-container" data-sticky-container>
<div class="sticky" data-sticky data-sticky-on="small" data-options="marginTop: 0;">
<div class="title-bar" data-responsive-toggle="widemenu" data-hide-for="medium">
<div class="title-bar-left">
<button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
<span class="title-bar-title">Menu</span>
</div>
<div class="title-bar-right"></div>
</div>
</div>
</div>

<!-- off-canvas left menu for "small" screen -->
<div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>
<button class="close-button" aria-label="Close menu" type="button" data-close>
<span aria-hidden="true">&times;</span>
</button>
<ul class="vertical menu">
<li>
<a href="file1.html">item1</a>
</li>
<li>
<a href="file2.html">item2</a>
</li>
<li>
<a href="file3.html">item3</a>
</li>
</ul>
</div>

<!-- "top-bar menu for 'medium' and up -->
<div data-sticky-container>
<div id="widemenu" class="top-bar" data-sticky data-options="marginTop:0;">
<div class="top-bar-left">
<ul class="menu dropdown" data-dropdown-menu data-close-on-click-inside="false">
<li>
<a href="file1.html">item1</a>
</li>
<li>
<a href="file2.html">item2</a>
</li>
<li>
<a href="file3.html">item3</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
 
 
 
 
 
 
 
 
 
i

You commented on George Benthien's post 11 months

One way around this problem is to introduce a variable named php and test on that. Here is a sample
{{#if php}}
{{> phpvars}}
{{/if}}
Then set php to true in the front matter of the php files. For example
---
php: true
---
It is not necessary to set php in the remaining html files as the default value for php is false.

Posts Followed

Following

  • No Content

Followers