Padding of submenu items in Twenty Seventeen theme

  • Author
  • #3060830

    I have defined the padding of the top-level menu items in Twenty Seventeen theme thus:

    /*define padding of main menu items*/
    .main-navigation a {
    	padding-top: 7px;
    	padding-bottom: 7px;
    	padding-right: 10px;
    	padding-left: 10px;

    But this does not seem to affect the padding of the submenu items that appear on dropdown of these main menu items.
    Can I set the padding of these submenu items, too?
    Specifically, I would like to reduce their padding. This would compress the submenu items vertically a bit, enabling the user to see more of them on the screen at one time.
    Of course, I guess only the top and bottom padding would be able to be altered (as the drop down menu items must be the same width as the corresponding main menu item). So, can the top and bottom padding of these submenu items be customised? Many thanks, Rob

    Moderator’s note: moved to CSS Customization

    The blog I need help with is


    I have since tried using this CSS:

    /*define padding of submenu items*/
    .main-navigation li li {
    	padding-top: 0px !important;
    	padding-bottom: 0px !important;

    This does work to some extent. For example, if (for testing purposes) you set the padding-top and padding-bottom to 100px, rather than 0px, then the gap between submenu items is correspondingly large. However, it doesn’t seem possible to reduce the distance between submenu items beyond the default. Is there a way round this? Thanks, Rob


    Hi there, you are close. The padding for the submenu items is controlled here. The 0.75em is the top/bottom padding and the 1.25em is the left/right padding.

    @media screen and (min-width: 48em) {
    .main-navigation ul ul a {
        padding: 0.75em 1.25em;


    Hi @thesacredpath
    Many thanks for this code. I have adjusted the padding as below to get the optimum effect for my own site.
    I have also found how to extend the width of the submenu items a bit, too. Now fewer of the submenu items extend over two lines. This also looks much better.
    The code I’ve used is as follows:

    /*define padding of submenu items*/
    @media screen and (min-width: 48em) {
    .main-navigation ul ul a {
    	padding: 0.5em 0.5em;
    /*define width of submenu items (to allow a greater percentage of submenu items to be on one line)*/
    @media screen and (min-width: 48em) {
    .main-navigation ul ul a {
    	width: 250px;

    This looks great – thank you for all your help on this, I really appreciate it.
    I now have a set of CSS to customise both the header and the menu of the TwentySeventeen theme in various ways.
    I’d like to share this set of CSS as I think quite a few people might find this helpful (all items are commented to show what they do). Since they are the result of more than one thread, how should I do this? Should I, in fact, start a new thread, including the word ‘solution’ in the title and indexing?
    Or is there a kind of public databank where CSS solutions for the TwentySeventeen theme can be posted? If not, could I make this a suggestion?
    Once again, many thanks, Rob.


    You are welcome, and thanks for sharing. You can start a new post and share your CSS. Tag your post with the theme name and some other descriptive and then you can add a brief description of what you have done and what it accomplishes.

The topic ‘Padding of submenu items in Twenty Seventeen theme’ is closed to new replies.