[kalanicommunicationsParticipant]

Hi,

I’m using Uber menu to create a stylized menu and I have two questions for modifying it.

1) The responsive menu button… the 3 line icon to open the menu when in a “mobile” viewport, or what some call “the hamburger”, is too small on my mobile device. I’d like to change the size of the icon as well as maybe it’s color. I don’t see anything in Uber menu’s settings to change that.. not even under the “responsive” section of their settings.

2) Part of my menu design is to have our brand logo in the middle of the menu, so there are site links on the left and site links on the right of our logo, which is centered.

I acheived this by placing a custom link in my menu then setting it to our logo. But the issue is that the length of the link text on either side will change the location of the logo. I was wondering if you guys have a fix for this…

The website is
hawaiiyogafest.com

[kalanicommunicationsParticipant]

This reply has been marked as private.

[FriechModerator]

Hi There,

Thanks for writing in! You can add this under Custom > CSS in the Customizer.

@media (max-width:  979px) {
		.ubermenu-skin-clean-white.ubermenu-responsive-toggle {
			color: #ff6600;
		   font-size: 1.5em;
	}
}

Feel free to adjust those color and size value.

#2 Sorry but I am not entirely certain of the issue, I assume it is the breaking of menu item in a narrow width screen. You can add this on your custom CSS.

@media (min-width:  959px) and (max-width: 1200px) {
	.ubermenu-main .ubermenu-item-level-0 > .ubermenu-target {
		padding-right: 5px;
		padding-left: 5px;
	}
}

Please provide us with a little more clarification if this does not address the issue.

Thanks.

[kalanicommunicationsParticipant]

Thanks that first one worked great, but I realized something.. even before I put the code you suggested in, my responsive menu was doubling up. where there was an “hamburger” icon, then when you clicked it another “hamburger” then when you clicked the second one the menu items would show.

this is only happening on my live site Hawaiiyogafestival.com

but on my dev site, Hawaiiyogafest.com , its alright. Maybe its from when I migrated… can you help me solve this?

The other question that Friech wasn’t sure about is kind of complex and maybe I’ll make a new thread for it, but basically… on my full size site (desktop view) I want to have my logo in the middle of my menu. I want to have menu links on the left and the right of the icon. I have that now, but the way i did it isn’t good. sometimes the logo gets pushed around depending on the length of the menu links before it.

The best way to do this would probably be to have the logo load in the middle, and then have 2 menus load on the left and the right of the icon. In this way the logo won’t move because of the menu text length.

[Paul RModerator]

Hi,

To fix these issue, you can add this under Custom > CSS in the Customizer.

@media (max-width: 1200px) {
.x-navbar .x-nav-wrap.mobile.collapse {
    display: block !important;
    height: auto !important;
}

.masthead-stacked .x-btn-navbar {
    display: none;
}

.x-navbar .x-nav-wrap.desktop {
   display:none;
}
}

Hope that helps.

[kalanicommunicationsParticipant]

Thanks Paul that worked perfectly, but why did the problem even happen in the first place?

[FriechModerator]

Hi There,

Its weird that both of the native X menu and Uber menu is showing up on your live site: Hawaiiyogafestival.com

Try to deactivate and reactivate your Ubermenu extension.

Thanks.

[Author]

Posts