2. Creating a Responsive DDR Menu With Flexbox
  1. 9m 34s
    Nov 01, 2016

In this tutorial we walk you through how to use the fantastically versatile set of CSS3 properties called flexbox to help you build a responsive DNN menu and theme layout.

We’ll be covering all the main flexbox properties and I’ll demonstrate how they can be used to achieve responsive results that would previously have been very complicated and time consuming to set up.

We take the mobile first approach and walk you through how to create a stacked mobile menu that will responsively transform into a horizontal menu, then demonstrate all of the various flexbox spacing and sizing features.

We’ll then show you how we can use flexbox to create solid, responsive theme layouts.

This video contains:

  • Basic CSS menu styling
  • Building the mobile menu
  • Initializing the Flexbox container
  • How to use flex-direction
  • Building the tablet menu
  • Menu item justification and spacing
  • Introduction to flex-grow
Tags:
skin advanced dnn8
Author:
Andy Stephenson

About 2016 Edition

2h 45m 32s All Jan 01, 2016

DNN Video Tutorials posted during 2016

Tags:
dnn7 dnn8 advanced beginners skin
Author:
Andy Stephenson
Back

Try FREE
30 days money back guaranteed