Menu icon Foundation

My Posts

  • 1
    Reply
  • Foundation 6 Flex Grid

    By Nick Ritson

    flex

    Just trying to find out if its possible to create a grid like this : http://prntscr.com/aogsx6 atm the trouble is that it tries to align all 3 columns to be equal width but i want the 1st and 3rd columns to be either 250px or something like 10% and ... (continued)

    Last Reply by Rafi Benkual over 3 years ago




My Comments

Nick Ritson commented on Nick Ritson's post over 3 years

Is there a way to get this working for WordPress where the layout is controlled using visual composer? I did start hacking a bit of the JointWP F6 version so all the current jquery and files should be loaded.

The thing im trying to wrangle through my head is how the menu would work since i wont be wrapping the entire page in the canvas. What i want is to have this menu type load only for mobile so im currently using media queries to only display this menu on mobile and not desktop.

Code is below for reference.

Screenshot of closed state followed by open state: While its functionally working theres an extra gap on the left. The other issue would be that if the content isnt long enough the menu's height is shorter and so some of the menu would be cut off.
http://prntscr.com/9s1vd4
http://prntscr.com/9s1x90

CODE REFERENCE

<!-- Mobile Only Menu
===================================================================================== -->


    <!-- Create off canvas menu -->
      <div class="off-canvas position-left" id="offCanvas" data-off-canvas>
        <?php dragoncove_mobile_slot_1(); ?>
      </div>

      <!-- CONTENT HERE APPEARS ON MAIN AREA -->
      <div class="off-canvas-content" data-off-canvas-content>
        <h3>here be the in canvas main content</h3>
        <P>
          Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate 
          B2C users after installed base benefits. Dramatically visualize customer directed convergence without 
          revolutionary ROI.
    </P>
    <p>
      Efficiently unleash cross-media information without cross-media value. Quickly maximize timely 
      deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without 
      functional solutions.
    </p>
    <p>
    Completely synergize resource taxing relationships via premier niche markets. Professionally 
    cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling 
    customer service for state of the art customer service.
        </P>
      </div>

  </div>

  <!-- Button Toggle -->
  <button type="button" class="dragoncove_mobile_button" data-toggle="offCanvas">
                 Open Menu
         </button>

<!-- Custom Media Queries
==================================================================================== -->

h3 {color: #222;}
.dragoncove_mobile_button {background: none; border: 2px solid #fff; border-radius: 5px; color: #fff; padding:10px;}

/* Small only /
@media screen and (max-width: 39.9375em) {
#dragoncove_desktop-menu {display: none;}
/
#dragoncove_mobile-menu {display: inline-block;}*/
}

/* Medium and up */
@media screen and (min-width: 40em) {
#dragoncove_desktop-menu {display: inline-block;}
#dragoncove_mobile-menu {display: none;}
}

Posts Followed


Following

    No Content

Followers

My Posts

My Comments

You commented on Nick Ritson's post over 3 years

Is there a way to get this working for WordPress where the layout is controlled using visual composer? I did start hacking a bit of the JointWP F6 version so all the current jquery and files should be loaded.

The thing im trying to wrangle through my head is how the menu would work since i wont be wrapping the entire page in the canvas. What i want is to have this menu type load only for mobile so im currently using media queries to only display this menu on mobile and not desktop.

Code is below for reference.

Screenshot of closed state followed by open state: While its functionally working theres an extra gap on the left. The other issue would be that if the content isnt long enough the menu's height is shorter and so some of the menu would be cut off.
http://prntscr.com/9s1vd4
http://prntscr.com/9s1x90

CODE REFERENCE

<!-- Mobile Only Menu
===================================================================================== -->


    <!-- Create off canvas menu -->
      <div class="off-canvas position-left" id="offCanvas" data-off-canvas>
        <?php dragoncove_mobile_slot_1(); ?>
      </div>

      <!-- CONTENT HERE APPEARS ON MAIN AREA -->
      <div class="off-canvas-content" data-off-canvas-content>
        <h3>here be the in canvas main content</h3>
        <P>
          Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate 
          B2C users after installed base benefits. Dramatically visualize customer directed convergence without 
          revolutionary ROI.
    </P>
    <p>
      Efficiently unleash cross-media information without cross-media value. Quickly maximize timely 
      deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without 
      functional solutions.
    </p>
    <p>
    Completely synergize resource taxing relationships via premier niche markets. Professionally 
    cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling 
    customer service for state of the art customer service.
        </P>
      </div>

  </div>

  <!-- Button Toggle -->
  <button type="button" class="dragoncove_mobile_button" data-toggle="offCanvas">
                 Open Menu
         </button>

<!-- Custom Media Queries
==================================================================================== -->

h3 {color: #222;}
.dragoncove_mobile_button {background: none; border: 2px solid #fff; border-radius: 5px; color: #fff; padding:10px;}

/* Small only /
@media screen and (max-width: 39.9375em) {
#dragoncove_desktop-menu {display: none;}
/
#dragoncove_mobile-menu {display: inline-block;}*/
}

/* Medium and up */
@media screen and (min-width: 40em) {
#dragoncove_desktop-menu {display: inline-block;}
#dragoncove_mobile-menu {display: none;}
}

Posts Followed

Following

  • No Content

Followers

  • No Content