New Landing › How can we help? › Atelier › Mega Menu Icons – padding & margin settings

Viewing 6 posts - 1 through 6 (of 6 total)
  • Back to forum
    Posted in: Atelier
  • February 6, 2017 at 9:41 pm #312799
    Jamison64
    Member
    Post count: 23

    Hello,

    I have setup icons within the Mega Menu but as there are +20, the viewer can’t scroll down to see the last icon/btn (please see attached). If I could edit the padding/margin of the css I could remedy it.

    Could you please point me in the right direction of which style I need to edit ?

    many thanks
    regards
    Jim

    Attachments:
    You must be logged in to view attached files.
    February 8, 2017 at 2:06 pm #313012
    David Martin – Support
    Moderator
    Post count: 20834

    Please add this to Theme Options => Custom CSS:

    li.menu-item.sf-mega-menu.sf-mega-menu-fw > ul.sub-menu {
    overflow-y: scroll;
}
    February 8, 2017 at 10:38 pm #313082
    Jamison64
    Member
    Post count: 23

    Hi David,
    thanks for your time.

    Clever idea 😉 – I added the styling to the Custom CSS and it displayed a scrollbar to the right of the DropDown MM but unfortunately, when I place my cursor on it, it disappears.

    What I was really looking for was just to reduce the bottom-padding or bottom-margin of the Menu Item’s Text link. However I realise that they may cause a conflict elsewhere but that’s what I was hoping for (please see attached img).

    Thanks
    regards
    James

    Attachments:
    You must be logged in to view attached files.
    February 10, 2017 at 1:25 pm #313297
    Rui Guerreiro – SUPPORT
    Keymaster
    Post count: 25779

    What about increasing the number of columns to 8 with the css below 

    li.menu-item.sf-mega-menu[data-megamenucols="6"] > ul.sub-menu > li, li.menu-item.sf-mega-menu[data-megamenucols="6"] > ul.sub-menu > div > li {
    width: 12%;
}

    and use this one to reduce the vertical padding between the menu items.

    .sf-menu-item-html {
     padding-bottom: 0px!important;
}

    -Rui

    February 10, 2017 at 11:00 pm #313420
    Jamison64
    Member
    Post count: 23

    Thanks for your assistance Rui. I don’t want to go to 8 icons across but your code pointed me in the right direction. I decided to analyse the DropDown menu and using Firefox’s Inspector was able to isolate the class I required.

    li.sf-menu-item-html {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 10px !important;
    padding-bottom: 0px!important;
    }

    http://www.dpfaustralia.com.au/product-category/choose-your-vehicle/

    Thanks again.
    Jim

    February 14, 2017 at 4:08 pm #313737
    David Martin – Support
    Moderator
    Post count: 20834

    Glad you got this resolved Jim. Thanks for the update also.

    – David.

  • Back to forum
    Posted in: Atelier
Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.