Logos / Images

Top Image

To add an image like a logo at the top of your menu, go to the settings tab for your menu panel ( Appearance > ShiftNav > Main ShiftNav Settings or instance tab)

1. Click the Select button next to the “Top Image” setting

2. In the media selection overlay, upload and/or select your image and click the Select button in the lower right.

3. Your image will appear in the settings panel.

4. Click Save to save the settings and your image will appear in the panel.

How to make the image shift up on hover (like the demo)

If you’d like to make the image shift up on hover like on the ShiftNav demo site, here’s the code that was used to do that:

#shiftnav-main .shiftnav-menu-image{
	padding-top:15px;
	padding-bottom:0;
	position:relative;
	z-index:10;
}
#shiftnav-main .shiftnav-menu-image img{
	-webkit-transform: translateY(15px);
	-moz-transform: translateY(15px);
	-o-transform: translateY(15px);
	transform: translateY(15px);

	-webkit-transition:all .3s ease-in-out;
	-moz-transition:all .3s ease-in-out;
	-o-transition:all .3s ease-in-out;
	transition:all .3s ease-in-out;
}
#shiftnav-main:hover .shiftnav-menu-image img{
	-webkit-transform: translateY(0);
}
#shiftnav-main .shiftnav-search{
	margin-top:-50px;
	box-shadow:0 -10px 10px rgba(0,0,0,.5);
	position:relative;
	z-index:20;
}
#shiftnav-main .shiftnav-menu{
	position:relative;
	z-index:20;
}
#shiftnav-main .shiftnav-menu > li.menu-item:first-child > a{
	border-top:none;
}

You could drop this in your CSS Tweaks. Note that it targets the main configuration specifically.