UberMenu Responsive Toggle: Change the size of "burger" icon and transparent background

[Osas]

Dear Team,

this is the problem I cannot solve by myself. I didn’t find in the UberMenu settings how to change the size of the “burger” icon and also how to make the “burger” background transparent. In such a case the background of the burger menu icon would automatically show the color of the header and the burger icon itself is currently incredibly small…

Would this be possible to implement with a CSS coding?

Many thanks in advance!

[ruenel]

Hello @Osas,

Please go to Appearance > Ubermenu > Main UberMenu Configuration > Style Customizations and set the folowing:

• Responsive Toggle Font Size
• Responsive Toggle Background
• Responsive Toggle Font Color

Please let us know how it goes.

[Osas]

Hello,

Many thanks for the hint. Changing of the size was easy.

The problem still exits, hoverver, with the collor. For heading I am using the collor rgba(255, 255, 255, 0.9): white and a little transparent. For the HuberMenu is the Hex color code necessary so I cannot adjust the transparancy.

CSS code would be great here.

Many thanks!

[ruenel]

Hi @Osas,

You may use this css:

.site .ubermenu-responsive-toggle.ubermenu-responsive-toggle-main {
    font-size: 30px;
    background: rgba(255, 255, 255, 0.9);
    color: #000000;
}

Hope this helps. Kindly let us know.

[Osas]

Hello,

many thanks for the css code but there is no effect. In the meantime, I have find in the forum another css code, plese see below. What is actually the difference between your code and this one?

body .ubermenu-responsive-toggle.ubermenu-responsive-toggle-main

Font size is changing but not the background.

Many thanks!

[rad]

Hi @Osas,

It’s just the same, to be safe, just use this

.ubermenu-responsive-toggle.ubermenu-responsive-toggle-main {
    font-size: 30px !important;
    background: rgba(255, 255, 255, 0.9)  !important;
    color: #000000  !important;
}

Thanks!

[Osas]

Hello,

thank you very much for your advice! It worked at the end with

background: transparent;

Thanks again!

[rad]

You’re most welcome!

[Osas]

Hello,

just one last question if you could help me with the following: I would like to code in css for UberMenu that the font size of menu items depends from the screen size. It is quite easy but for this I would need to know the element name for UberMenu: level 1, level 2, level3 menus. It could go like this:

@media (max-width: 480px) {
ubermenu-menu level1 { << this is, however, something, I do not know the name of the ubermenu level 1, 2, 3
font-size: 18px;
}
}

Could you help me with this?

Thanks in advance!

[rad]

Hi @Osas,

It’s almost correct :), example for different levels.

@media (max-width: 480px) {
.ubermenu-item-level-0 a {
font-size: 10px;
}
}

@media (max-width: 767px) {
.ubermenu-item-level-1 a {
font-size: 12px;
}
}

First level always starts in zero, at least for Ubermenu.

Thanks!