Adding a logo

Knowledgebase Docs » UberMenu 3
USEFUL? 16
UberMenu 3

UberMenu Logo in menu

You can add an Image to any standard menu item. Please refer to that article for details on setting an image.

It’s worth noting that for most sites, you would not place the logo inside of a menu. Generally, keeping the logo separate from the menu, as most themes do, provides the maximum flexibility for your layouts. This article is specifically for those who have made the design choice to have a logo in their menu, and is not a recommendation that you necessarily do so if you already have a logo in your theme layout.

Add the Home item

Since a logo item would normally link to the home page, generally you would add the “Home” menu item to your menu:

Set your image

In the Image tab for the Home item’s UberMenu Item Settings, select your logo (for more details, see Images)

UberMenu logo image selection

Disable the text

To display an image with no text beside it, check the “Disable Text” setting

UberMenu Disable Text Setting

Balancing the logo with other content

Remember, if your image is taller than your other menu content, it will expand the height of the menu. You will need to configure your logo and regular items to display at the same height. You can mix and match the following strategies to create a logo at the appropriate size:

Image Size

Ideally, you would upload your image at the proper size to be displayed in the menu. This way there is no need to scale the image, and you don’t load any more data than you need to.

Scaling the Image

If you want to use an existing image that is larger than necessary, you can scale your image by setting the Image Width

UberMenu Image Width setting

UberMenu image logo in menu

Above, the logo is scaled to the height of the menu items to keep its height the same as the rest of the items

Balancing heights with Item Padding

To balance your logo’s height with your normal menu items’ height, you can adjust the item padding globally and on individual items to accommodate larger images.

For example, you can increase the Top Level Vertical Padding globally in the Customizer

UberMenu Top Level Vertical Padding

and then reduce the padding on the logo item to keep the menu item heights consistent while their content heights (image vs text) differ.

UberMenu menu item padding

UberMenu larger logo image in menu

Above, the image is displayed at a larger height than the text in the other menu items, but the padding on the image item is set to less than the padding on the other items to keep their heights balanced.

Centering a Logo

There are two techniques you might use to center a logo within a menu.

Organically

To organically center a logo, you would place the logo within a menu item, and adjust the widths of the items so that the logo item is naturally centered.

To do this, you would add a logo item as above. Then place it as the middle item of your top level items. Then either adjust the top level item column width settings, or use custom CSS, to adjust the widths of the top level items such that the middle item is visually centered.

You can also change the item content alignment on each top level item to center the text as well.

Overlay

Please note that this technique may require additional customization and CSS skills to accomplish

If you would like to create a logo that overlays your menu and is centered – meaning the logo exceeds the bounds of the menu bar – then you don’t want to place your logo inside the menu at all (if you do, it’ll stretch the menu’s height by default, rather than creating an overlap).

Instead, what you’ll want to do is place the image before your menu, then use absolute positioning to center it.

Keep in mind that with this technique, the logo will not displace any items in your menu, so you run the risk of overlapping the menu items if your logo is too wide, or your items are too many.

1. First, separate your items to the left and right of your menu

To maintain the normal order, set your Horizontal Item Alignment to Right in the Control Panel.

Then change the Alignment setting to Left in the Menu Item Settings for each item you wish to appear to the left of the logo.

This will give you a menu bar with your items separated to the left and right, leaving a space in the middle for your logo.

2. Next, add the logo before the menu

First, upload your logo to the Media Library

Then, copy the URL to create an HTML img tag. You’ll likely want to wrap it in an anchor pointing to your home page.

<a class="my-logo" href="http://mysite.com"><img class="my-logo-img" src="http://uber.dev/wp-content/uploads/2016/02/wordpress-logo-notext-rgb.png" /></a>

In the UberMenu Control Panel > Main UberMenu Configuration > Miscellaneous, add your logo content in the Content Before Menu textarea.

3. Finally, position the logo

To center the logo over the menu bar, you’ll want to position it absolutely and center it.

Here is some sample code:

.my-logo-img{
	position:absolute;
	z-index:200;
	left:50%;
	margin-left:-100px;
	top:-80px;
}

The left and margin-left properties center the logo. The margin-left should be 1/2 of the image’s width. Note that this is assuming the logo’s container is relatively positioned and wraps the menu precisely.

Naturally, you’ll need to adjust the top positioning depending on your logo size.

You will want to place this in the Desktop CSS Tweaks, so that it does not apply on mobile.

If your site is responsive such that as the viewport narrows, the menu items begin to overlap the logo, a good strategy is to use a media query to either reduce the logo width, or else simply only apply absolute positioning above that width, so that once the logo no longer fits, its simply appears above the menu.

Note that depending on how your theme is set up, you may need to further custom style the logo and menu margins to set your layout up nicely as your viewport resizes.

Mobile Considerations

Out of the box, all top level items are hidden by default when the menu is below the responsive breakpoint. This means that your menu item logo will not be visible when viewing the site on mobile prior to toggling the menu open.

UberMenu responsive menu with logo closed

UberMenu responsive menu with logo open

If you want, you can place a logo either in the responsive toggle, or outside of the menu.

Placing a logo in the responsive toggle

Please note if you place a logo in the responsive toggle, it cannot link to another page, because the toggle itself has a click/tap action bound to it.

Disabling the menu item logo

To prevent the logo from displaying in the menu itself, hide the item on mobile in the logo menu item by checking “Hide below breakpoint”

UberMenu hide item on mobile

First grab the URL for your image, or upload a new image in the media library.

Media Library Image URL

Then in the UberMenu Control Panel, add your image to the Responsive Toggle Content setting

<img src="//uber.dev/wp-content/uploads/2016/02/SevenSparkLogo2.png" alt="My logo"/>

UberMenu Responsive Toggle Content Setting

If you’d like to align your hamburger bars to the right, add this CSS in your Mobile Tweaks

.ubermenu-responsive-toggle .fas{
  float:right;
  margin:0;
  font-size:20px;
  padding:5px 0;
}

Adjust the padding and font-size as necessary to match the toggle icon size with that of your logo.

UberMenu Responsive Toggle Image Logo Closed

UberMenu Responsive Toggle Image Logo Open

Placing a logo above the menu

To place the logo above the menu, you can follow the same strategy except place the img tag before the menu instead of in the toggle content.

Disabling the menu item logo

To prevent the logo from displaying in the menu itself, hide the item on mobile in the logo menu item by checking “Hide below breakpoint”

UberMenu hide item on mobile

First grab the URL for your image, or upload a new image in the media library.

Media Library Image URL

Then in the UberMenu Control Panel, add your image to the Content Before Menu setting

<a href="http://mysite.com" class="um-logo"><img src="http://uber.dev/wp-content/uploads/2016/02/SevenSparkLogo2.png" alt="My logo"/></a>

(Replace mysite.com with your domain)

UberMenu Content Before Menu Setting - Logo

To center align the logo and space it out a bit, you can add this CSS in your Mobile CSS Tweaks

.um-logo{
	padding:20px;
	display:block;
	text-align:center;
}

Or style it however you like, of course.

UberMenu Logo Above - closed

UberMenu Logo Above - open

To ensure that this logo only appears on mobile, add this CSS to your Desktop CSS Tweaks:

.um-logo{
  display:none;
}