Twenty Fourteen: How to change the size of the menu boxes

  • Author
  • #1782279

    I have a lot of menu items and they dissapear at the bottom of the page and cannot be accessed. I can change the size of the font bit the boxes they appear in remain the same size. Does anybody know how to fix this?




    This is a common issue with Twenty Fourteen and there’s really not much you can do about it. Even if we manage to make it work on a certain screen height, it might not work for smaller screens.

    So it looks like the way to do it is to have less sub menu items, maybe split them to more main menu items. I know this might not be ideal to you, but that’s the best solution I’ve found so far.


    Since I made my cry for help I have made these additions to my child theme:
    This changes the font size in the menu:
    .primary-navigation {
    font-size: 11px;
    padding-top: 0px;
    And this changes the size of the box around the menu items:
    .primary-navigation ul ul a {
    padding: 14px 14px;
    white-space: normal;
    width: 176px;
    It works on my pc but is this a bad thing to do?



    Hi there – you mention a child theme. Are you self-hosting WordPress on your own host? If so, I recommend you post over on, in the Twenty Fourteen forum:

    This site is for folks hosted here on

    Good luck!

    It works on my pc but is this a bad thing to do?

    As long as you test out the site on different browsers, platforms, and devices and it all looks OK, I don’t see any harm.


    I Thank you

The topic ‘Twenty Fourteen: How to change the size of the menu boxes’ is closed to new replies.