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!!
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:
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):
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
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).
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!