How can I change the responsive breakpoints?

UberMenu 3 supports Custom Breakpoints. Please consider updating to UberMenu 3 (don’t forget to read the migration guide!) if you would like to change your breakpoint.

Please note that this is a general overview/guide for advanced users who want to customize their responsive break points; UberMenu 2 does not support breakpoint adjustments out of the box

Out of the box, UberMenu responsive breakpoints are fixed at the de facto standards of 960, 767, and 480 pixels, as described here: UberMenu Responsiveness

These breakpoints are built into the basic.css, as making these values configurable would require printing a large amount of CSS in the site head.

Therefore, adjusting these breakpoints requires altering the basic.css. As you know from the Customizing UberMenu section of the guide, you should never edit any UberMenu core files. Therefore the strategy to alter these breakpoints will be to:

1. Disable the default basic.css in the UberMenu Control Panel > Advanced Settings
2. Include a customized version of basic.css in your custom.css file

Since we’re playing with the core styles, any time you update UberMenu you’re going to have to do a little extra maintenance to maintain your customizations. There’s an low maintenance way and high maintenance way to do this. We’ll cover the high maintenance strategy first.

High Maintenance Route – Edit basic.css

Of course, we can always just edit the CSS files directly. Copy the basic.css and your skin preset into your custom.css. Edit the media queries in basic.css to your desired breakpoints. Switch your Style Application to Custom and you’re good to go!

The problem with this method is that when there is an update and basic.css changes, you’re going to need to update your customized basic.css manually.

Low Maintenance Route – LESS

Please note that you should be familiar with LESS to use this section; if not, you can always just customize the CSS files as usual rather than use LESS. There are lots of great resources around the internet on how to use LESS if you’d like to learn it – details on installing and using LESS are outside the scope of this document or support. Here’s a nice Intro to LESS if you are unfamiliar.

This takes a bit more skill to set up, but is worth the effort.

UberMenu’s basic.css is split up into several LESS files that are shipped with UberMenu. basic.less imports these individual LESS files and is compiled into basic.css

What we’re basically going to do is set up our own basic.less from which we can automatically rebuild the basic.css – including our own customizations – in an instant after each update.

Here are the steps:

1. Create a custom.less file in the ubermenu/custom directory. This file will be our source for building our custom.css.

2. Set the contents of the custom.less file like the basic.less file, but adjust the import statements to be relative to the custom directory. The contents should look like this:

@import "../core/styles/less/core.less";
@import "../core/styles/less/arrows.less";
@import "../core/styles/less/divider.less";


@import "../standard/styles/less/images.less";
@import "../standard/styles/less/vertical.less";
@import "../standard/styles/less/centering.less";
@import "../standard/styles/less/searchbar.less";
@import "../standard/styles/less/recent-posts.less";
@import "../standard/styles/less/contact-form-7.less";


@import "../core/styles/less/clearfix.less";
@import "../core/styles/less/responsive.less";

(If you were to run a LESS build right now, you’d get the contents of basics.css in your custom/custom.css file).

As of UberMenu v2.3.2, a custom/custom-sample.less is included, which you can simply rename to custom.less

3. Also add your skin as an import (at the end of the list). This may be a preset or a style generator skin (skin.css). You can also add your custom CSS styles below the imports in the custom.less if you like.

//you would add one of these three lines
@import "../core/styles/skins/blackwhite.css";  //example for Black & White skin
@import "../standard/styles/skins/shinyblack.css";  //example for Shiny Black skin
@import "../standard/stylegenerator/skin.css"; // example for Style Generator

4. Adjust the custom/less/config.less breakpoints as you require.

5. Change the custom.less file to import your new custom/less/config.less file, (this already exists in the sample file in v2.3.2).

@import "less/config.less";

6. Compile/build your custom.css file from the custom.less (you’ll need to have a less compiler installed – that is outside the scope of this documentation).

7. In the UberMenu Control Panel > Style Configuration, switch your Style Application to custom to pick up your new custom stylesheet. Don’t forget to disable basic.css as well in the UberMenu Control Panel > Advanced Settings.

8. When a new release of UberMenu comes out, just rebuild your custom.css, and the contents will automatically be pulled from the updated files. (This is important!!)

Enjoy!

Video Walkthrough

Below is the custom.css file generated in this video. You can copy and paste your preferred skin at the end of it and then drop it in your /custom directory.

custom.css