Support » Theme: Storefront » How to reduce space between navigation menu and the header bottom?

  • Resolved boppar


    I want to reduce space in the header. The space below the navigation menu. I.e the space between the bottom of the navigation menu and the very bottom of the header.

    Is this possible?

    Picture explains what I want to do:

Viewing 12 replies - 1 through 12 (of 12 total)
  • It is hard to say without seeing the live code since you’re using the Max Mega Menu plugin. I set it up on my test install of Storefront and you might be able to get what you’re looking for using something like the following

    .storefront-primary-navigation .mega-menu-wrap {
        margin-bottom: 0px;

    Thanks @jarretc.
    Unfortunately it didn’t change anything.

    Maybe it’s Storefront cart in the header that’s causing this space?

    Hi @boppar

    If you can give us a link to your site, we can take a look.

    @jarretc and @senff
    This is how it looks using Max Mega Menu and when not using it:

    @senff. At the moment I rather not post the link here. Is it possible to send it to you?

    I changed the settings in MMM from height 40 to 76 px and changed the background to transparent. The result is that the menu using MMM or not is at the same height.

    However I continue with the problem that I want to reduce the space below the menu.

    Any ideas?

    Actually it looks worse now after the changes I made in MMM.

    Before the changes it looked like
    (The part it says Now it looks like this.)

    After the changes it looks like

    A very high navigation menu.

    No progress in acheiving what I need.

    Hi boppar,

    Try changing the menu height back to 40px, then adding maybe 10 or 20px Top Padding to the menu bar? (both can be done in the theme editor).

    If you need further help please post a link to your site so I can take a look.


    @megamenu Hi Tom.
    I changed the height back to 40px. When I set the Top padding to 25px I get the space I want below the navigation menu.

    The problem is that this makes the menu very high:

    Is there a way to send the site link to you without posting it here?

    Hi Boppar,

    Ok, set the top padding back to 0px, then go to Mega Menu > Menu Themes > Custom Styling and add the following:

    @include desktop {
        #{$wrap} {
            margin-top: 20px;

    There is no private message system on these forums, sorry.


    @megamenu Thanks a lot, Tom!
    That worked fine:

    Do you have any idea how to reduce the space between the logo and the navigation menu?

    Maybe it’s not proper to make this question here as the original problem is solved?

    Hi Boppar,

    I don’t off the top of my head. We would need to see your site in our own browsers to work out the correct CSS to use, but it is a bit outside the scope of the support I offer for Max Mega Menu. As this issue is resolved, you may wish to try starting a new thread within these (StoreFront) forums.


    Thanks Tom, you’ve been great.

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘How to reduce space between navigation menu and the header bottom?’ is closed to new replies.