Ubermenu submenu

Hello,

Can someone help me with my submenu? It won’t spread evenly across the area and stacks the components on top of each-other. Also, i still cant find a way to turn it off completely for mobile and tablet devices. I would love to just have the x theme mobile menu for these instances. Thanks!

Hi,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation.

For the mean time kindly review the link below

Thank you.

I tried for a good hour mate, I will attach my info. I would like the menu section for “Categories” to spread evenly.

I’ve set your Submenus to Unbounded.

It now looks like this

For more submenu layout configurations, please see http://sevenspark.com/docs/ubermenu-3/settings/submenu

Thanks.

Okay I managed to erase some css, delete the menu, restart it, and now it is looking good. Can you give me some css in order for the “category” and “search-bar” items in my menu to be straightened out and in line with the others? I can’t seem to get it all in one straight line. Also, why is the menu opening unbounded when i have it set to inner width?

Hi There,

To align the item you can add the following CSS to Theme Options CSS

.ubermenu.ubermenu-sub-indicators .ubermenu-item.ubermenu-disable-padding.ubermenu-has-submenu-drop>.ubermenu-target {
  
    padding: 15px 20px;
}

As you are using Ubermenu, you should use ubermenu search functionality instead of X menu search.

So go to Theme Options Header and turn off the search

Refer to this link to learn about Ubermenu Search and how to implement it.

Hope it helps!

Awesome! that worked.

The last thing I will ask about it is how would I go about bringing the menu items closer together? while they are on desktop? Home and About are both spread out further, as seen by their hover box. I just can’t seem to target it.

Also, how would I go about aligning my mobile menu to be centered and full width? And the items there in? Last time i tried adding the CSS it messed up my desktop menu.

Thanks team.

Hi there,

Please add this CSS as well :slight_smile:

.ubermenu-main .ubermenu-item-level-0 > .ubermenu-target {
    padding-left: 10px;
    padding-right: 10px;
} 

@media screen and (max-width: 959px) {
.ubermenu-responsive-default.ubermenu.ubermenu-responsive .ubermenu-column, .ubermenu-responsive-default.ubermenu.ubermenu-responsive .ubermenu-column-auto {
    min-width: 100%;
    text-align: center;
}
.ubermenu-main .ubermenu-nav .ubermenu-item.ubermenu-item-level-0 > .ubermenu-target {
    text-align: center;
}
}

Hope this helps :slight_smile:

The mobile menu code worked perfect but the Main Menu did not. I would like to keep them relatively in the same spot as they are in now except all evenly laid out

Hello There,

It seems that you have applied the code incorrectly.

It should be like this:



.ubermenu-responsive-toggle.ubermenu-responsive-toggle-main.ubermenu-skin-deepsky.ubermenu-loc-primary.ubermenu-responsive-toggle-content-align-right.ubermenu-responsive-toggle-align-right{
	width:100%;
  	text-align:center;
	margin-top:15px!important;
}

.ubermenu.ubermenu-main {
    background: none;
    border: none;
    box-shadow: none;
    margin-bottom: 3px;
}

@media screen and (max-width: 959px) {
	.ubermenu-responsive-default.ubermenu.ubermenu-responsive .ubermenu-column, .ubermenu-responsive-default.ubermenu.ubermenu-responsive .ubermenu-column-auto {
    	min-width: 100%;
    	text-align: center;
	}

	.ubermenu-main .ubermenu-nav .ubermenu-item.ubermenu-item-level-0 > .ubermenu-target {
		text-align: center;
	}
}

The best css practice is that all @media blocks should be at the end of the other css codes or else it will just be overridden with another code.

Hope this helps.

This might not be the code I am looking for. All I want to do is bring the home and about sections of the menu closer together so everything is even. I did find great use with some of the code you gave me though!

Hi there,

Please kindly add the CSS code below:


.ubermenu.ubermenu-main .ubermenu-item-level-0#menu-item-285 > .ubermenu-target {
  padding-right: 0;
}

.ubermenu.ubermenu-main .ubermenu-item-level-0#menu-item-286 > .ubermenu-target {
  padding-left: 0;
}

Play with the padding left and right values there to find the best spacing for the Home and About menu items.

Kindly open up new threads for additional questions as it will help us to focus on each issue and give you a better support which you deserve. Having a long threads makes the maintaining job harder and also it will be harder for the other customers to find the correct information if they have similar issues. You are always welcomed to reply to this thread to follow up the same question.

Thank you.

You are such a boss, thank-you for your help!

Anyway to make this code for only the desktop? It messes up the mobile nav. Code works great though, just what i needed.

Hello There,

To make this code work only for the desktop, you use this code instead:

@media(min-width: 980px){
  .ubermenu.ubermenu-main .ubermenu-item-level-0#menu-item-285 > .ubermenu-target {
    padding-right: 0;
  }

  .ubermenu.ubermenu-main .ubermenu-item-level-0#menu-item-286 > .ubermenu-target {
    padding-left: 0;
  }
}

Hope this helps.

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