Logo as item in Ubermenu issue

Support
#1

I’ve added my logo into the Ubermenu nav bar, because of the way the sub-menu being full width needed to be. However, this has caused two issues I’m not able to solve. Your expertise is needed!

The first is, would it be possible to have the menu items in the menu bar align vertically with the logo? Currently, the menu items are way up high compared to the logo.

The other item is when the menu bar needs to go to responsive mode, the logo obviously disappears… Would it be possible to have the logo appear above the menu when in responsive mode?

#2

Hello Heather,

Thanks for writing in!

Do you want something like this?

If that is the case, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.ubermenu-main .ubermenu-item-level-0 > .ubermenu-target {
    margin-top: 25px;
}


.ubermenu-main .ubermenu-item-352 .ubermenu-target {
     margin-top: 10px;
}

We would love to know if this has worked for you. Thank you.

#3

Yes, that’s it! THANK YOU!

Would this other be possible with it? As the logo is part of the Ubermenu nav bar, when it shifts to responsive mode, the logo disappears inside the menu bar toggle. When this happens, would it be possible to have a logo show (above the menu) in responsive mode? I would like the logo to be visible on the website at all times.

#4

Hi Heather,

We can add a logo on Theme Options > Header > Logo Image

We can hide it on Desktop view using custom CSS. Replace this custom CSS:

.x-brand {
    display: none;
}

With this:

@media(min-width:980px){ /* Adjust 980 accordingly */
.x-brand {
    display: none;
}
}
#5

That’s A W E S O M E!

Would it be possible in 480px or smaller that the menu drops to the next line (instead of being on the same line with logo) and then the logo and menu are centered?

#6

Hi Heather,

Happy holidays, yeah that is possible, please add this to Theme Options > CSS


@media (max-width: 480px) {
	.x-brand.img {
		float: none;
   	 	text-align: center;
	}
}

Please be reminded that this is now in the realm of customization, any further customization from here will not be supported.

You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

Thanks,

#7

Thank you for your kindness! This worked perfect!

#8

You’re welcome!
It’s good to know that it has worked for you.

Happy New Year!!!

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.