[Resolved] Spacing in mega menu

Home Forums Support Spacing in mega menu

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #924878
    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

    #925020
    Leo
    Staff
    Customer Support

    Hi there,

    Have you fixed this?

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

    Let me know 🙂

    #925201
    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!

    #925202
    Leo
    Staff
    Customer Support
    #925547
    davide

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

    #925649
    David
    Staff
    Customer Support

    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.

    #926335
    davide

    Thanks!

    #926587
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.