Uber menu width issues

Support
#1

Would you please check the custom css for the uber menu.
I’m not sure what happened to the code because i did not edit it.

I have 2 different menus that are both full width. I divide the number of items by 100 to get the correct percentage.
The main menu has 6 items so it’s set to 16.6666%
the menu after login has 12 items which is set to 8.3333%

not sure why it’s not distributed evenly across navbar (fullwidth)

thanks

#2

Hi There,

Thanks for writing in!

I can see the menu is full width, not sure what exactly you want to achieve in the menu. Please give us a mockup so that we can suggest you better.

Thanks

#3

If you look at the menu, there is space to the left and the right of the navbar. I want the 6 tabs of the navbar to be distributed from the left side to the right side, full width.

also, the navbar menu, after user login has 12 tabs on the navbar. I want to achieve the same full width distribution of the tabs on the navbar.

Here is the css that i was provided by support a couple weeks ago. as you can see, there are 2 different menus. in order to achieve equal distribution of the tabs, the 8.333% and 16.444% values were used.
not sure why the css is no longer working.

/*
// to fix UberMenu width Issues
*//

#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega ul.sub-menu-1{
padding-top:10px;
padding-bottom:10px;
}
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega ul.sub-menu li.menu-item{
padding-top:0;
padding-bottom:0;
}
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega ul.sub-menu li.menu-item > a,
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega ul.sub-menu li.menu-item:hover > a,
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega ul.sub-menu li.menu-item > a:hover{
border-bottom:none;
padding-bottom:0;
margin-bottom:0;
}

#ubermenu-main-346-primary-2 {
background-color: #ffffff;
background: -webkit-gradient(linear,left top,left bottom,from(#ffffff),to(#dbdbdb));
background: -webkit-linear-gradient(top,#ffffff,#dbdbdb);
background: -moz-linear-gradient(top,#ffffff,#dbdbdb);
background: -ms-linear-gradient(top,#ffffff,#dbdbdb);
background: -o-linear-gradient(top,#ffffff,#dbdbdb);
background: linear-gradient(top,#ffffff,#dbdbdb);
}
#ubermenu-main-346-primary-2 ul.ubermenu-nav > li.ubermenu-item{
width:16.6666%;
text-align:center;
}
.logged-in #ubermenu-main-346-primary-2 ul.ubermenu-nav > li.ubermenu-item{
width:8.33333%;

#4

Hi,

To fix it, you can add this in Theme Options > CSS

body .x-navbar .x-container.max.width {
     width: 100%;
    max-width: 100%;
}

Hope this helps

#5

I already have that css

#6

Hello There,

I have investigated your issue and it turns out that it is because of your broken css inserted in the custom css area. Please check out the following:



If you can fixed this issues, then we can get back and test that the code given by Paul should have work already.

Please let us know how it goes.

#7

Hello.
I think I fixed all of them correctly.
Can you please check?

Thanks so very much.
jane

#8

Hello Jane,

There are still a few problems with your css.

These should correct other issues in your css problems.

Please let us know how it goes.

#9

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