Trouble making the sub-menu a smaller font than top menu

  • Leslie_Biostar

    (@leslie_biostar)


    7 years, 7 months ago

    Hi,
    I have inherited the management of this blog: blog.biostarus.com
    My issue is that I cannot seem to get my sub-menus to have a smaller font than the main menu. Because of the long-ish list of items in the dropdown, it’s important that I can make them smaller to fit on the page. The blog is supposed to echo the style of the main website (www.biostarus.com), which is done correctly.

    I’ve looked through all kinds of forums and fixes and have exhausted myself trying various approaches… nothing seems to budge. I can change the font size and make the whole thing smaller, but I need the top menu to remain the size it is. I can’t seem to figure out why the sub-menus insist on staying the same as the top, despite adding css to the “li li” etc.. in site-navigation as well as primary-navigation.

    It’s a custom theme (a child based on twenty-fourteen), which was at one point created to have the entire header point to a different website. We aren’t doing that anymore, so I’ve had to recreate a header, including the navigation menus. Now I’m a little lost.

    I’m pretty good with CSS, but not great, so if there’s a suggestion, please be specific about the “where”s especially.

    Thanks!

Viewing 3 replies - 1 through 3 (of 3 total)
  • DrakeH

    (@drakeh)

    7 years, 7 months ago

    You should set something css like 

    
ul.sub-menu li a {
 font-size:12px;
}
    Thread Starter Leslie_Biostar

    (@leslie_biostar)

    7 years, 7 months ago

    Oh wow, that totally worked. Thank you so much. I should have asked the forum many hours ago!

    Can I also use that to adjust the sub-menu to have less space between the selections?

    THANKS!

    DrakeH

    (@drakeh)

    7 years, 7 months ago

    You mean the space between items in sub-menu, if so, yes. I see you have css set for submenu items like this 

    
@media screen and (min-width: 783px) {

.primary-navigation ul ul a {
    padding: 11px 10px; // Adjust spacing between items with this.. change 11px value to 7px or so
    white-space: normal;
    width: 150px;
    font-size: 12px;  // Adjust sub-menu items font-size with this
}

}
    • This reply was modified 7 years, 7 months ago by DrakeH.
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Trouble making the sub-menu a smaller font than top menu’ is closed to new replies.