Spacing in mega menu dropdown? - by shakka219

This topic has 7 replies, 3 voices, and was last updated 7 years, 7 months ago ago by Eva Kemp

  • Avatar: shakka219
    shakka219
    Participant
    August 31, 2016 at 13:39

    I have a drop down menu on the shop tab on my main menu, Brands page is listed as a sub category and all brands are listed underneath.

    How can I change the spacing of the brands within the full width drop down so that they are closer together?

    Also can I have some of the brands in the drop down in another column of the full width menu so that they appear side by side instead of taking one column only?

    Please, contact administrator
    for this information.
    6 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    August 31, 2016 at 14:01

    Hello,

    Please try to add this code in Custom.css:

    .menu .nav-sublist-dropdown ul > li > a, .menu .item-design-full-width .nav-sublist-dropdown .nav-sublist li a {
       padding: 1px;
    }
    #menu-item-5590 {
      width: 100%;
    }

    Regards,
    Rose Tyler.

    Avatar: Eva
    Eva Kemp
    Support staff
    August 31, 2016 at 14:01

    Hello,

    How can I change the spacing of the brands within the full width drop down so that they are closer together?

    Use this code in Theme Options > Styling > Custom CSS > Global Custom CSS:

    .menu .item-design-full-width .nav-sublist-dropdown .nav-sublist li a {
       line-height: 12px !important;
    }

    can I have some of the brands in the drop down in another column of the full width menu so that they appear side by side instead of taking one column only?

    You need select columns number in Appearance > Menus > edit your menu http://storage6.static.itmages.com/i/16/0831/h_1472648520_4342111_04787970b1.png

    Regards,
    Eva Kemp.

    Avatar: shakka219
    shakka219
    Participant
    August 31, 2016 at 15:05

    Thanks, the spacing has worked but the advice for the columns has not, please see image url in private content.

    As you can see on the image my ‘shop’ drop down full width menu has 4 columns, brands is a page listed as a sub category under ‘shop’, all brands are sub-sub categories under the brands page on the drop down all the brands are listed in the 1st column on the left however on a laptop it cuts some of the brands off underneath so you have to scroll to see them.

    I want to move the bottom half of the brands list to the next column so they all appear when hovering on the drop down menu. If possible i’d like to centre the ‘BRANDS’ page header centre top.

    Is this possible?

    Please, contact administrator
    for this information.
    Avatar: Eva
    Eva Kemp
    Support staff
    August 31, 2016 at 15:36

    Hello,

    Unfortunately there is no such possibility.
    You may try solutions described here:
    http://www.phpcluster.com/how-to-split-wordpress-submenu-in-2-column.html
    http://www.prowebdesign.ro/wordpress-sub-menu-items-split-in-2-columns-the-easy-way/

    Or try some mega menu plugin (please note we don’t guarantee full compatibility of 3rd-party plugins).

    Regards,
    Eva Kemp.

    Avatar: shakka219
    shakka219
    Participant
    August 31, 2016 at 16:03

    Ok thank you for your help.

    Final question!:: How can I change hover colour of brands in drop down menu?

    Avatar: Eva
    Eva Kemp
    Support staff
    August 31, 2016 at 16:26

    Hello,

    Use this css code:

    .menu .item-design-full-width .nav-sublist-dropdown .nav-sublist li a:hover {
        color: #737373;
    }

    Change color value to yours.

    Regards,
    Eva Kemp.

  • Viewing 7 results - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.