Sticky Scroll Header Menu in Ultimatum

There are many ways to implement a sticky scroll header menu feature in WordPress and Ultimatum; this blog post will focus on making a sticky scroll header menu in an Ultimatum partial header layout without using a sticky scroll plugin or the sticky header option in Ultimatum layouts.

I have set up a demo page here.

The Menus

In my previous blog post about flexbox menus, I had already made a menu called ‘FlexBox Test Menu’. I will copy that (using the nifty Duplicate Menu plugin) and call it ‘Sticky Scroll Menu’. I then re-labelled the Brand and one of the menu items. Because this demo will need a secondary cart menu, I also need to make this, which I shall call ‘Sticky Scroll Submenu’. The menu contains only one link for the cart (plus the site search), and I have set the label to be:
<i class="fa fa-shopping-cart fa-flip-horizontal"></i> Cart.

Ultimatum Partial Layout

The first thing to do is to make and save an Ultimatum partial layout for this header. I will name this layout ‘Sticky Scroll Header’. 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.

Into this layout insert four rows, of the type 100%:

• Into the first row I dragged and dropped the Ultimatum WYSIWYG widget.

  In the WYSIWYG editor I entered this as my site ‘tagline’:
  <h2 style="text-align: right; color: #004132; font-weight: 400;">Welcome to the Sticky Scroll Demo!!</h2>
  Obviously, you can put whatever you want here, as this is simply a demonstration.

  Now open the Wrapper CSS editor (the small edit icon in the bottom left of the row) and in the Additional Classes section add the Custom CSS class scroll-row-padding.

• For second row, drag and drop an Ultimatum Menu Widget.

  I selected the ‘Sticky Scroll Menu’ I had made, and set it to the ‘New – Ultimatum Menu’ script. No other changes to the widget settings were made – you may wish to make other settings for a mobile menu, and the search is set to OFF.

  In the same way as before, open the row’s Wrapper CSS editor (the small edit icon in the bottom left of the row) and in the Additional Classes section add the Custom CSS class scroll-menu-row. In the Background Color and Image section I set the wrapper background color to #97b8b4, in the Borders section I set the Top and Bottom borders to 2px, #004132, solid.

• For the third row, drag and drop the Ultimatum Logo Widget.

  Leave the Logo name and tagline empty and choose the logo image you want to use. Now open the Wrapper CSS editor and in the Additional Classes section add the Custom CSS class scroll-logo-row.

• For the fourth row, drag and drop an Ultimatum Menu Widget.

  I selected the ‘Sticky Scroll Submenu’ that I made for the Cart and site search, and set it to the ‘New – Ultimatum Menu’ script, with the ‘Show Search’ setting set to ‘ON’. Finally, open the Wrapper CSS editor and in the Additional Classes section add the Custom CSS class scroll-cart-menu-row.

The scroll-to-fixed.js JavaScript

This is the code file that does the work:

On line 8 you will see the number 76. This is the height (in pixels) of the first (white) row in the header (including the bottom-padding). As soon as the page is scrolled by this amount, the javascript switches the CSS class names on the header rows. On line 13 is the number 71. This is the height in pixels from the top of the page when the CSS classes are switched back to default. They are not the same as having them the same can cause the javascript to ‘flicker’ between the scroll states.

The functions.php file

You will need to load your scroll-to-fixed.js file and, if you use one, the external custom css stylesheet. 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 (it may well open to that) and set ‘Enable the Posts Editor’ to ‘No’ and save.

Having installed this plugin, in the WordPress admin side menu, under the Appearance menu, you will now see a revised sub menu option ‘Theme Editor’. In here you can edit some of the theme files and you can also use this page to upload files to the theme folder. One file you will see is called functions.php. It is normally empty except 3 comment lines at the top. This is what my version looks like for this sticky scroll header menu page:

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

The scroll-to-fixed.css file

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

And that’s it! Enjoy!