Docs

[Artur667]

Hi.

I have set some menu and I need two instructions:

1. I need to increase tab toggles left and right paddings – I want them wider.
2. Where can I decrease submenu and only submenu font size and change horizontal and vertical spacing?

Now it looks like this: https://www.dropbox.com/s/2i3exf9nb9n44e1/2016-08-11%2015_24_40-Klinika%20_%20Tazbir.png?dl=0

Url: http://dev.klinikatazbir.pl/

[Rupok]

Hi there,

Thanks for writing in!

#1. You can add this under Custom > CSS in the Customizer.

.ubermenu .ubermenu-submenu .ubermenu-column-auto.ubermenu-tab {
  min-width: 130px;
  text-align: center;
  width: auto;
}

#2. Let’s add this as well :

.ubermenu .ubermenu-submenu-type-stack > .ubermenu-item-normal > .ubermenu-target {
  font-size: 13px;
  min-width: 130px;
}

You can add you own CSS to them if needed.

Hope this helps.

[Artur667]

Thanks! Works fine but, it generated one issue with the phone version. Can we make toggles full width on the mobile?

[Rupok]

Hi there,

Thanks for writing back. In that case you can update the code a bit :

@media only screen and (min-width: 980px) {
.ubermenu .ubermenu-submenu .ubermenu-column-auto.ubermenu-tab {
  min-width: 180px;
  text-align: center;
  width: auto;
}
.ubermenu .ubermenu-submenu-type-stack > .ubermenu-item-normal > .ubermenu-target {
  font-size: 13px;
  min-width: 130px;
}
}

Hope this won’t interfere with mobile menu.

Cheers!

[Artur667]

Perfect! Could you also tell me how to control the color of those lines/dividers? Please see attachment.

[Joao]

Hi There,

Please add the following code to Appereance Customizer Custom CSS

.ubermenu .ubermenu-tab-layout-top>.ubermenu-tabs-group>.ubermenu-tab>.ubermenu-tab-content-panel {
    border-color: blue !important;
}

Change blue for the desired color.

Hope it helps

Joao

[Artur667]

Just one more question about this specific menu – I’m looking for the CSS rule to control the size of the submenu elements:

https://www.dropbox.com/s/2xnwio8i514z7yx/Untitled-2.png?dl=0 (I mean all of them, i marked three only for example), I managed to pull

.ubermenu-target-title .ubermenu-target-text

but it changes both submenu item size AND top level items :/

[Rupok]

Hi there,

You can use the following selector to control them :

.ubermenu-submenu > li.ubermenu-item-level-2 > .ubermenu-target.ubermenu-item-layout-text_only {
  font-size: 16px;
}

Hope this helps.

[Author]

Posts