Ubermenu mobile text size

Support
#1

Hi,

I can’t seem to find where to change text size of Menu when on mobile?

Thanks

#2

Hello @JohnyBeGood,

Thanks for asking. :slight_smile:

Can you please share website URL for us to take a closer look?

Thanks.

#3

Hi,

Please see above note.

#4

Hi,

To change the size in mobile, you can add the code below in Theme Options > CSS

@media(max-width:767px) {
    .ubermenu-skin-white {
         font-size: 12px !important;
     }
}

Change 12px to adjust.

Thanks

#5

Thanks! That works but if I start to increase font-size: 24px more than 24px entire menu starts to overlap on Galaxy S7 but not on Chrome developer ? Where can I put gap in the customizer between menu and content?

#6

Hey There,

Please have the css code updated and use this instead:

@media screen and (max-width: 979px){
  .ubermenu-responsive-default.ubermenu-responsive.ubermenu .ubermenu-nav{
    margin-top: 20px;
  }

  .ubermenu-skin-white {
         font-size: 12px !important;
   }
}

We would loved to know if this has work for you. Thank you.

#7

I’ve changed to this:

@media screen and (max-width: 979px){
.ubermenu-responsive-default.ubermenu-responsive.ubermenu .ubermenu-nav{
margin-top: 30px;
}

.ubermenu-skin-white {
font-size: 24px !important;
}
}

Sorry cant find code format here.

#8

Hi there,

That is because of the maximum height which is set to 500 pixels in the menu. You can override that by adding the CSS code below to X > Launch > Options > CSS:

@media screen and (max-width: 959px) {
	.ubermenu-responsive-default.ubermenu-responsive {
		max-height: none;
	}    
}

Thank you.

#9

I would like to find that limit and increase it because I will have more menu links and that will add more aspace and I assume CSS code will not work? Is this 500px limit https://prnt.sc/ik2bhl ?

#10

Hello there,

The code will work as advised by my colleague. I’ve also tested it on my end via inspect element on your site.

The height of the mobile menu will adjust if you set the max-height to none even though you add more menu items.

Responsive Max Height only accepts numerical values. Setting a value 0 to will disable the mobile menu and won’t slide down. Furthermore, when you set it to none, it will be converted to a text: nonepx, which isn’t a max-height value. Here are the values accepted by max-height:

Hope it helps.

#11

Thanks! I’ve added both codes and it looks like its working.

Please remove screenshots because its showing my website URL.

#12

Glad to hear it! :slight_smile:

I have moved and stored it on a secure note, instead.

#13

Thank you!

#14

You’re welcome! :slight_smile:

#15

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