Submenu & Mobile Submenu font

Din · January 2020

Hello

It is strange that the submenu fonts and sizes cannot be adjusted for the website through the options. Most themes offer that adjustability.

My Question for MOBILE DEVICES sideslide submenu:

1. select submenu font name

2. adjust submenu font size

3. adjust submenu line height adjust.

Right now the font on the mobile submenu is too large, different font style and the
line spacing is not enough as it overlaps as well as the submenu item is 2 lines of text in some cases.

I saw some css in the comments how to adjust the submenu font style and size which works for desktops, but it did not change for Mobile devices and the text overlaps as well.

This is the CSS i have set for desktop submenu below that i found. How can i do the same for mobile submenu?

Here is the link to the temporary domain where i am building my website, in case you need it: http://l79.23a.myftpupload.com/

/*
Submenu font and size
*/
#Top_bar .menu > li ul li a {
font-family: "Open Sans Condensed" !important;
}
#Top_bar .menu li ul li a span { font-size: 19px; }

Pablo · January 2020

Hello,

You can use this CSS code, it will change the font family and font size on mobile only.

@media (max-width:768px){
  #Top_bar .menu > li ul li a {
    font-family: "Open Sans Condensed" !important;
  }
	
  #Top_bar .menu li ul li a span { font-size: 19px; }
}

Thanks

Din · February 2020

What about the line-height? I am finding that submenu items are touching each other when they are on 2 lines of text. How can increase line height.

Din · February 2020

Also this code did not do anything for the SUB-MENU on a mobile device.

Is the code you provided for a SUB-menu ? I have side-slide menu active for mobile devices and i am looking for format the following 3 items for the sub-menu of a side-slide mobile menu.

1. select submenu font name

2. adjust submenu font size

3. adjust submenu line height adjust.

Din · February 2020

I have tried this css for sub-menu (2nd level sub-menu ) on side_slide

The font style worked, the line height worked. But the Font size will not adjust. Am I missing something?

/*
Mobile Device Submenu font and size
*/
@media (max-width:767px) {
    #Side_slide .menu > li ul li a {
    font-family: "Open Sans Condensed" !important;
    line-height: 24px !important;
          }
   #Side_slide #Top_bar .menu li ul li a span { font-size: 12px !important; }
}

See attached screenshot of what i am trying to make adjustments to.

Pablo · February 2020

You applied some CSS code for font size already, remove it and apply this code:

@media (max-width:768px){
 html #Side_slide #menu ul.sub-menu li span { font-size: 12px !important; }
}

thanks

Din · February 2020

The code you provided did not work properly. It changed ALL mobile menu font size. including the main (1st level).

I am looking to change ONLY the sub-menu (2nd level) menu on mobile devices. My screenshot is highlighting the sub menu items. When you click on the '+' to show sub-menu, that is what i want to change the font size to be a bit smaller. Please look at the screenshot.

ONLY SUB-MENU font size is what i am trying to change.

Bryan · February 2020

Hey,

I just edited the previous CSS that Pablo pasted, replace it and it will only work for the submenu.

thanks

Din · February 2020

It worked. Thank you.

Submenu &amp; Mobile Submenu font

Comments

Submenu & Mobile Submenu font