You can change the height of the menu using CSS. There are three options below, but unless you are doing something very unique, you will almost certainly want the first solution. Solution: Increase the height of the top level menu items This solution is recommended for 99.9% of cases By adjusting the top and bottom padding on the top level menu item anchors, the item content remains vertically centered and the menu bar height is naturally adjusted. Other ways of increasing the height You would almost never want to use the following options unless you’re doing something unique with your menu. The solution above is recommended for almost every single case. Increase the padding of the menu bar Increase the height of the menu bar (Don’t use this on responsive sites, unless you wrap it in a media query)

UberMenu implements all of the standard current menu item classes, so you can target and adjust those properties via custom CSS . You can inspect the top level list items for each page using Firebug to see what is available to you at any given time. Based on menu hierarchy These are the standard class options available based on the menu hierarchy: Current Menu Item To highlight the current menu item red (regardless of level), you could use this style, for example: Depending on where you put your code, you may need to employ the !important flag. Ancestor of current menu item To highlight the top level item when either that item or a submenu item is selected, use Based on Page Hierarchy These are the classes available, and would be used in the same way as above: For example: The same structure works with other hierarchical custom post types, e.g. `current-{custom-post-type}-ancestor`. More Information

Font Family By default, the menu will inherit the font from your theme. You can change the font via custom CSS: Font Size To change the font size, grab one of the selectors from the customizer and set the font-size property. For the top level: Font Uppercase/lowercase To change the font to uppercase or lowercase, you use the text-transform CSS property Font Weight Or target a specific level with the Customization Assistant Style Generator If you are using the Style Generator, you can set the font size via the settings in the Style Generator options panel. But keep in mind that these styles only apply if you have set your Style Application to Style Generator; they will not augment a preset. Skins Pack Note if you are using a skins pack, you may need to further qualify your CSS selector to apply your style, for example:

Widget areas take up the entire width of a submenu by default. This is because the widgets inside the widget area form the columns, and a single menu item contains one widget area, which contains multiple widgets. This is explained in the Widgets section, and you can see a visualization in the Customization Assistant by clicking the “Uber” tab. If you wish to have a widget area share a row with normal menu items, you’ll need to make some CSS customizations to make them act like normal widget items. Essentially, this means floating the item left, adjusting its width, and removing the clear. To adjust the width of the widget area, you can target it directly Don’t forget to consider what will occur at responsive sizes if you set an explicit width Note that if you want to add more than one widget to this widget area, you may get unpredictable results (because the widget area is told to “size automatically”, while the widgets are told to “size to the parent container”. This is essentially a circular reference, and the result is unpredictable). Setting an explicit width (instead of ‘auto’) resolves the issue.

Please remember that customizations are not included in support. This FAQ is here to explain best practices, but you will need to implement the changes yourself Note: in UberMenu 3 you will be able to change colors via the menu item settings without writing custom CSS. The beta is available in the forum if you’d like to check it out. Styling an individual menu item Just want to style a single menu item? Every item has an ID, and you can target that item by its ID. Just open up Firebug or Chrome Developer Tools and inspect the menu item in question. The ID is attached to the list item (LI). To style the menu item, use this selector template, replacing menu-item-100 with the ID of your menu item: How to find a menu item ID in Chrome Developer Tools Right click the menu item Select Inspect Element Click on the containing li within the web inspector Read the ID, which looks like id=”menu-item-##” Styling a group of menu items Via highlighting One easy way to accomplish styling a group of menu items is to use UberMenu’s “Highlight” option for those menu items. You can customize the highlight style with this selector template: Via Custom Classes Want to pick and choose which menu items have your special styling? Add a class! This is a default WordPress menu feature. Just add your special class to each menu item you need styled differently, and style that CSS class however you like. Here are details on Adding a custom class Styling an entire level of menu items Want to change the way an entire level of menu items looks, like the whole top level, or all submenu headers? You can get all the style selector templates you need by using the UberMenu Customization […]

UberMenu is designed to be used with 3 level of menu items. Second level menu items are headers, while third level menu items align vertically beneath those headers. Sometimes users have only the need for two levels. In that case, the vertical spacing of the second level menu items seems excessive, as there are no third level menu items to pad. Adding this CSS to your custom styles will space the second level menu items more appropriately

You may wish to add a bit of transparency to the submenus or your menu bar. There are a couple of ways to do this, but I think rgba() colors are the best option. Option 1: Opacity CSS has a built in opacity property that can be added to any element. So it’s very easy to do this: However, the way opacity works is that it affects all parts of the item (background, text, images, borders, etc), as well as all descendants of that element. Opacities also compound. This generally makes links hard to read, so it’s not optimal. Option 2: rgba() background A better solution is to use rgba() colors for the background. rgba() allows you to set an alpha value for your color, which is just like an opacity value, but only affects that color. So the solution is: This solution gives an 80% opacity black background, but the images and text will remain fully opaque for easier reading. Most color pickers will give you rgb values, and then you can add your own alpha value. Note that rgba() colors don’t work on IE8. I think just setting a solid background fallback is the best solution (I don’t recommend using IE filters, as they can be problematic), but you can use a transparent png repeated background if you prefer.

There are a few way to make your customizations in UberMenu. Style Generator If you want to create a fully custom skin without writing any CSS, you should use the Style Generator. Please note that the Style Generator will build an entire skin for you, it won’t override colors from existing skins. Custom CSS If you want to tweak an existing skin’s colors, you can write a bit of custom CSS to do what you want. Which color? There are generally 3 types of colors in the menu, which are controlled by 3 distinct CSS properties. Note that I am using built in CSS colors as examples, but generally you’d use a hex value like this #000000. Background Color Generally you would want to change the background color on either the menu bar or the submenu. The CSS property for this is Text Color You can change the font color of the links in each level of the menu. The CSS property for this is Border Color You may also wish to change the border color on the menu bar, top level menu item dividers, submenu, or second level header underline. The CSS property for this is Which Element? To target a specific group of element in the menu (for example, top level menu items), you need to use the proper selector. The selectors can be found in the UberMenu Customization Assistant. (To target a more specific set or single element, see How to Style One or More Menu Items Differently) Example 1: Top Level Links Color For example, to change the color of the top level links to blue, we would grab the proper selector from the customization assistant Then set the properties that we want to change, in this case color. Please note that some skins, for example […]

If you want to make your menu items expand the full width of the menu bar, you can do so with some custom CSS. Basically, we’ll just set each top level menu item to be the same percentage of the bar. Before: After: Once you know your total number of top level menu items, just divide 100 by that number to get the proper percentage: Number of Items (n) Percentage (100/n) 2 50% 3 33% 4 25% 5 20% 6 16% 7 14% 8 12% 9 11% 10 10% So, for a menu with 5 top level menu items, we’d use this CSS: See also Adding Custom CSS Using Percentages As you’ll notice, for numbers of menu items that don’t divide evenly into 100, there will be left over percentages (for example, with 3 menu items × 33%, your menu items will fill 99% of the menu bar, leaving 1% at the end of the menu bar). Generally this is not noticeable. It is recommended that you round down to the nearest whole percent as different browsers use different rules to round percentages, and if you end up off by a pixel due to browser rounding, your last menu item will appear on the next line. That is, rather than 33.3333%, we use 33%, and rather than 16.666% we use 16%. While some browsers handle conversions from percentages to pixels intelligently, others do not. Remember, you can’t have a fraction of a pixel. Text fit Normally, UberMenu’s menu items size naturally to their contents. That is, if you have an item with a long label like “Contact us for special deals”, this will all appear on one line and you’ll have a wide menu item. Once you make all your menu items the same size, this may force some of […]