Submenu & Mobile Submenu font

DinDin
edited January 2020 in Fonts
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; }


Comments

  • 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
  • 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.
  • 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.
  • 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.
    image
  • edited 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
  • 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.
  • Hey,
    I just edited the previous CSS that Pablo pasted, replace it and it will only work for the submenu.
    thanks
  • It worked.  Thank you.
Sign In or Register to comment.