Mobile text size ubermenu

[physicaspinal]

HI Team

Any help is welcome. I am after a code fix to help with my ubermenu mobile responsive text size.

I am after increasing the text size for the items under the main toggle and more consistent on the submenu.

I have tried changing some code in css and also ubermenu settings but not having much luck.

Appreciation in advance for any help.

www.physica.com.au

[tristup]

Hi @physicaspinal,

Thanks for reaching out.

There is already a prebuilt option available to control the font size and other styles of menu and submenus. You can find that at Tab Toggles Font Size under the Appearance > Uber Menu > Main Ubermenu Configuration > Style Customization.
I would suggest you remove all the custom CSS code and try the above process.

Please remember that we don’t offer any support to the custom codes and related issues.

Thanks

[physicaspinal]

Thank you Tristup- is it just the the ubermenu css code I remove?

.ubermenu.ubermenu-main .ubermenu-item-level-0 > .ubermenu-target{
padding: 0;
}
.ubermenu .ubermenu-icon{
display:none;
}
.ubermenu-main .ubermenu-item-level-0 > .ubermenu-target{
font-size: 20px;
}
header.masthead .x-container.max.width{
max-width: 1180px;
}
.ubermenu-responsive-default.ubermenu{
display: inline-block!important;
}
.ubermenu-responsive-default.ubermenu{
float: right;
position: relative;
top: -37px;
}
.x-navbar-inner{
min-height: 100px;
}
.x-brand img {
width: 100px;
}
.ubermenu .ubermenu-item-layout-icon_left>.ubermenu-target-title{
margin-left: 10px;
margin-right: 1.3em;
text-transform: capitalize;
}
.x-brand{
margin-top: 17px;
}
.ubermenu-sub-indicators .ubermenu-has-submenu-drop>.ubermenu-target>.ubermenu-sub-indicator{
top: 40%;
top: 60%;
font-size: 14px;
right: 13px;
}
body.x-navbar-fixed-top-active .x-navbar-wrap{
height: 100px;
}
.x-topbar{
background-color: #4fc070 !important;
}
.x-topbar .x-social-global a i{
color: #fff;
}
.x-slider-container.below{
border: 0;
}
.e12628-49.x-section .x-column:hover .x-bg .x-bg-layer-upper-color{
background-color: rgb(79, 192, 112,0.8)!important;
}
.x-social-global.new-social-sec a i{
color: #4fc070;
font-size: 25px;
}
.ubermenu-main .ubermenu-submenu .ubermenu-item-header > .ubermenu-target{
font-size: 20px;
}
.widget.widget_text i.fa{
margin-right: 10px;
}
.ubermenu-main .ubermenu-item-normal > .ubermenu-target{
font-size: 18px;
}
.p-info{
color: #fff !important;
font-size: 14px !important;
}
.p-info i{
margin-right: 4px;
}
.p-info span{
margin-right: 10px;
}
.wp_teamshowcase_slider.design-1 .member-content .member-desc{
text-transform: uppercase;
color: #a2a5a4;
font-size: 13px;
min-height: 35px;
}
.white-popup-block .wp-modal-body{
height: 300px;
overflow-y: scroll;
}
body p span{
font-family: “Roboto Slab”,serif;
}

.ubermenu .ubermenu-target-text{
margin-left: 10px;
margin-right: 1.3em;
text-transform: capitalize;
}
.ubermenu-main .ubermenu-item-level-0.ubermenu-current-menu-ancestor > .ubermenu-target{
color:#444 !important;
}
.ubermenu-main .ubermenu-item-level-0.ubermenu-current-menu-item > .ubermenu-target, .ubermenu.ubermenu-main .ubermenu-item-level-0:hover > .ubermenu-target, .ubermenu-main .ubermenu-item-level-0.ubermenu-active > .ubermenu-target, .ubermenu.ubermenu-main .ubermenu-item-normal > .ubermenu-target:hover, .ubermenu.ubermenu-main .ubermenu-item-normal.ubermenu-active > .ubermenu-target{
color:#4fc070 !important;
}
@media only screen and (max-width:959px){
.ubermenu-responsive-default.ubermenu{
top: 0 !important;
}
.ubermenu-responsive-default.ubermenu-responsive.ubermenu .ubermenu-nav {
padding-top: 10px !important;
}

.ubermenu-responsive-default.ubermenu-responsive.ubermenu .ubermenu-nav{
padding-top: 50px;
}
.e12628-70.x-section{
padding-left: 10px;
padding-right: 10px;
}
.e12628-10.x-container, .e12628-80.x-container, .e12628-106.x-container{
padding: 0 10px;
}
header .x-topbar{
padding: 0 10px;
}
header .x-navbar-wrap .x-navbar .x-navbar-inner{
padding: 0 10px;
}
.ubermenu-skin-vanilla-bar{
border: 0;
background: transparent !important;
}
.x-brand{
margin-top: 0;
font-size: 0;
}
.x-navbar-inner {
min-height: auto;
}
body.x-navbar-fixed-top-active .x-navbar-wrap{
height: auto !important;
}

[nabeel]

Hey @physicaspinal,

Yes you can remove all the custom CSS related to Ubermenu so that your custom CSS don’t override the ubermenu settings. You can also review the following guide here https://sevenspark.com/docs/ubermenu-3/faqs/font

Hope this helps!