UberMenu forced to two lines on devices 1024px wide (2nd time around)

[Adams]

Hello. Awhile back the problem of the UberMenu being forced to two lines on devices 1024px wide was resolved — see post https://theme.co/apex/forum/t/ubermenu-forced-to-two-lines-on-devices-1024px-wide/26694

Our website is https://www.thumbprintbooks.ca/

However, it appears that with the newer version of Pro (we’re running Pro 2.1.6), the problem is back, despite the global CSS having been applied as suggested in the earlier post, i.e.

.e347-4.x-text {
max-width: 100px !important;
}

Can you please let me know what I should do now?

Thank you.

[Alaa]

Hi @Adams

Actually, this is the code snippet you need:

@media(min-width: 960px)and (max-width: 1150px){
  .ubermenu-main .ubermenu-item-level-0 > .ubermenu-target {
    font-size: 1.2em;
  }
  .ubermenu .ubermenu-target {
      padding: 15px 10px;
  }    
}

It should work fine even if the theme is updated.

Thanks.

[Adams]

Can you please confirm that I should replace the following code with your code (the following code was what one of your team suggested I should use):

@media ( min-width: 980px ) and ( max-width: 1011px ) {
.ubermenu .ubermenu-colgroup .ubermenu-column, .ubermenu .ubermenu-custom-content-padded, .ubermenu .ubermenu-nonlink, .ubermenu .ubermenu-retractor, .ubermenu .ubermenu-submenu-padded, .ubermenu .ubermenu-submenu-type-stack>.ubermenu-item-normal>.ubermenu-target, .ubermenu .ubermenu-target, .ubermenu .ubermenu-widget, .ubermenu-responsive-toggle {
padding: 12px 0.8vw !important;
}
.ubermenu-items-align-left.ubermenu-horizontal .ubermenu-item.ubermenu-item-has-children,
.ubermenu.ubermenu-horizontal .ubermenu-item.ubermenu-item-has-children {
margin-right: 15px;
}
}

.e347-4.x-text {
max-width: 100px !important;
}

PLEASE NOTE that I also have the following code for the Ubermenu:

.ubermenu .ubermenu-colgroup .ubermenu-column, .ubermenu .ubermenu-custom-content-padded, .ubermenu .ubermenu-nonlink, .ubermenu .ubermenu-retractor, .ubermenu .ubermenu-submenu-padded, .ubermenu .ubermenu-submenu-type-stack>.ubermenu-item-normal>.ubermenu-target, .ubermenu .ubermenu-target, .ubermenu .ubermenu-widget, .ubermenu-responsive-toggle {
letter-spacing: 0.3px;
}

Please let me know which of these code snippets (if any) I should keep, and which I should replace with your code.

Thank you.

[paul.r]

Hi,

You need to change this code

@media ( min-width: 980px ) and ( max-width: 1011px ) {
.ubermenu .ubermenu-colgroup .ubermenu-column, .ubermenu .ubermenu-custom-content-padded, .ubermenu .ubermenu-nonlink, .ubermenu .ubermenu-retractor, .ubermenu .ubermenu-submenu-padded, .ubermenu .ubermenu-submenu-type-stack>.ubermenu-item-normal>.ubermenu-target, .ubermenu .ubermenu-target, .ubermenu .ubermenu-widget, .ubermenu-responsive-toggle {
padding: 12px 0.8vw !important;
}
.ubermenu-items-align-left.ubermenu-horizontal .ubermenu-item.ubermenu-item-has-children, 
.ubermenu.ubermenu-horizontal .ubermenu-item.ubermenu-item-has-children {
margin-right: 15px;
}
}

with this

@media(min-width: 960px)and (max-width: 1150px){
  .ubermenu-main .ubermenu-item-level-0 > .ubermenu-target {
    font-size: 1.2em;
  }
  .ubermenu .ubermenu-target {
      padding: 15px 10px;
  }    
}

Thanks

[Adams]

Thank you. That fixed it.

[friech]

We are delighted to assist you with this.

Cheers!