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:
- Disable the default
basic.cssin the UberMenu Control Panel > Advanced Settings
- Include a customized version of
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.
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
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
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
As of UberMenu v2.3.2, a
custom/custom-sample.less is included, which you can simply rename to
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).
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!!)
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.