[Resolved] Spacing in mega menu

[davide]

Hello,
in the mega menu of my site, there is a right spacing which I cannot get rid of. I would like the fourth column of the mega menu not to be separated from the right edge of the menu, but I can’t figure out how to do this. At least, I would like the block of the four columns to be centered in the available area of the mega menu.
Can you help please?
Thank you
Davide

[Leo]

Hi there,

Have you fixed this?

I don’t believe I’m seeing the issue?
https://www.screencast.com/t/LKDSJRYE5vlA

Let me know 🙂

[davide]

If you check another time the page, I added a right border to the fourth column of the mega menu, and the left borders to all the columns. Can you see that at the right side of the last right border there is an empty space? Do you know how to change it or even eliminate it?
Thank you!

[Leo]

This space?
https://www.screencast.com/t/4PHdzUIYDhf

[davide]

Yes, I cannot identify the class which it belongs to.

[David]

Hi there,

this CSS defines the width and the margins for each of the sub menus:

@media (min-width: 769px) {
    nav .main-nav .mega-menu>ul>li {
        display: inline-block;
        width: 21%;
        vertical-align: top;
        margin: 20px 10px 10px 20px;
        border-right: 2px solid #176463;
        border-left: 2px solid #176463;
    }
}

The spacing around them comes from the width of each only being 21%. So to get a handle on that replace it with this CSS:

@media (min-width: 769px) {
    nav .main-nav .mega-menu>ul>li {
        display: inline-block;
        width: 25%;
        vertical-align: top;
        margin: 10px 0;
        padding: 0 10px;
        border-right: 2px solid #176463;
        border-left: 2px solid #176463;
    }
}

The entire width will now be filled and a little padding as been added to the left and right so the menu items don’t touch the borders.

[davide]

Thanks!

[David]

You’re welcome

[Author]

Posts