Bringing Flexbox to the Ultimatum Menu

flexbox750
FlexBox is often described by those who stumble upon it as the ‘Holy Grail’ of web design. The problem is that it is not so well supported by older browsers, and Internet Explorer in particular. But not any more, thanks to the folks at 10up, who have open sourced Flexibility, a polyfill that uses JavaScript to allow FlexBox to work with Internet Explorer versions 8 and 9.

I have set up a demo site here.

FlexBox CSS for Flexible Layout

FlexBox is the new alignment and layout tool for modern browsers; it is what you really need to make a site truly responsive and flexible. CSS-Tricks has a good explanation and demo. A little fun is to be had at FlexBox Froggy, which is a game where you help Froggy and friends by writing FlexBox CSS code! Be warned: each level is much harder than the one before, and coding hints given on one level are not repeated again, so make a note of them – you WILL need them to progress!!

Which browsers support Flexbox? See here and the table below (light green means partial support – with IE8 and IE9 support hopefully provided by Flexibility).

browsersupport

Make a FlexBox Test Menu

This demonstration page does not require actual pages for the menu; instead I will use what WordPress calls Custom Links, with the URL set at ‘#’ (which means that they will not actually work). In the WordPress admin, we need to make a menu called ‘FlexBox Test Menu’. The menu will contain these ‘links’: FlexBox Demo Menu (as the navbar ‘brand’ or site name, normally linked to the front page, or ‘home’), About Us, Features, Our Fantastic Winning Team (really long to test long labels), Projects, Shop and Contact. If you want to make first item on the bar the site ‘brand’, then see this screenshot of how I did that by adding the CSS class to ‘navbar-brand’ to first menu item:

flexboxcssnavbarbrand

Ultimatum Partial Layouts

The Ultimatum Layout tools are very powerful, and give you the option of making Full and Partial layouts. Where possible, make as much of your site in Partial Layouts as you can, especially for sections of pages that will be used in more than one layout, and for the header and footer. For the purposes of this tutorial, I need only to make one partial layout for what would be sued as the nav section of a header inn a full layout, which will hold all of the different menu variations I shall make. When making your menu, you would make just the one you want.

FlexBox Menus Partial Layout

Create and name the partial layout for the navbar; I called mine ‘FlexBox Menus’. Into that insert a row, of the type 100%. Drag and drop the Ultimatum Menu widget into the row.

Select your Menu (in my case called FlexBox Test menu) and the Menu Script to use is the ‘New – Ultimatum Menu’. You may want to set a different font-size, font colour, padding and margins for the logo, tagline and menu parts, using the Template or Layout CSS panels. Here is a screenshot of the menu widget settings that I used (mainly at their defaults):

flexboxmenuwidget

In the image above, see the little blue cog to the top right? In my case next to the row/column number ‘col-60-1’. In your layout, click that to open the modal settings panel. Click and open the accordion for ‘Additional Classes’. The only thing you need to do is to choose which of the four menu types you want from the list below and paste the required two CSS classes for the option that you want into the ‘Custom CSS Classes field and click Save, then Close (the CSS classes are next to each option, in bold):

Centered – justify-content-center align-items-center
Left Aligned – justify-content-end align-items-center
Right Aligned – justify-content-start align-items-center
Justified – flex-grow align-items-center

flexboxcssclasses

In the screenshot above, you can see how I set my first menu to be centered. The first CSS class sets the horizontal alignment, the second class sets the menu label to be vertically centered (yes, no need for padding).

The flexibility.js JavaScript

This is the code file that lets you use FlexBox while supporting older Internet Explorer browsers (8 and 9). This is the link for the flexibility.js file (right mouse click and Save Link as … to your local computer). You will need to use ftp to upload this file to the desired Ultimatum child theme folder on your server.

The functions.php file

You will need to load your flexibility.js file (conditionally for Internet Explorer 8 and 9 only), the additional FlexBox menu stylesheet and, if you use one, the external custom css stylesheet for your site. This is done in your child theme’s functions.php file. To help you find and edit this, you might find it useful to load a free WordPress plugin called WP Editor. One thing to note about WP Editor is that it takes over as your default Post/Page editor, so if you do not want it to do this, after you install and activate it, go to the plugin’s settings and select the Posts Editor side tab and set ‘Enable the Posts Editor’ to ‘No’ and save.

I have put comment lines in to explain what the code is doing.

The ult-flexbox-menu.css file

This is the custom css that enables FlexBox in the Ultimatum Menu, in addition to style added in the Template, Layout and Wrapper CSS panels:

And that’s it! Enjoy!

by Trevor Nelmes

Trevor is the head of support and testing at Ultimatum Theme and owns a WordPress-based web design business called CDNWebDesign. He has been programming since the 1970’s and web designing since 1999. In his spare time, he likes to take scenic photographs in the beautiful Cotswolds in the UK.

Comments

    • It allows a lot of alignment and sizing options that are very hard to do without flexbox. For example, the justified menu where they re-size according to the page width, but you can switch the re-sizing off, for example, the first and last itesm.