Tagged: , ,

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • September 1, 2014 at 10:30 pm #312002
    venturephoto

    Hi

    Ive created a mega menu on my webpage. My goal is to use images only in a row.
    The problem is that i cant get rid of the padding outside the pictures in my dropdown mega menu row.

    Problem

    September 2, 2014 at 10:23 am #312171
    Ismael

    Hi venturephoto!

    Thank you for using Enfold.

    Do you mind if we take a look at the actual page? You can somehow remove the padding with this:

    #header .avia_mega_div .units {
padding: 0;
}

    You might still need to adjust the width of the mega menu units.

    Cheers!
    Ismael

    September 2, 2014 at 3:07 pm #312328
    venturephoto

    Hi! Thank you for responding

    Here is the link – http://www.sfn.academy/
    Youll find the menu im talking about under “SFN ACADEMY”, and i would like to remove all of the green surface so its just the pictures visable.

    One second thing aswell. Do you perhaps know how to remove the top border visable on the advanced layerslider.
    as you can see, it doesnt play well with the picture in the slider.

    Thanks so much!
    Cheers
    Joakim

    September 2, 2014 at 4:24 pm #312377
    Yigit

    Hi!

    Please add following code to Quick CSS as well

    #top #header .avia_mega_div > .sub-menu > li { padding: 0; border: none; width: auto!important; }
#header .avia_mega_div { width: auto; }

    Best regards,
    Yigit

    September 2, 2014 at 5:45 pm #312436
    venturephoto

    Hello,

    It didnt work. you can see the result at http://www.sfn.academy
    it just shrunk the pictures, and there´s still padding around it.

    September 2, 2014 at 6:06 pm #312445
    Yigit

    Hey!

    Please add following code to Quick CSS as well

    #top #header .avia_mega_div > .sub-menu { padding: 0; }

    and change following line

    #top #header .avia_mega_div > .sub-menu > li { padding: 0; border: none; width: auto!important; }

    to 

    #top #header .avia_mega_div > .sub-menu > li { padding: 0; border: none; width: 100%; }

    Cheers!
    Yigit

    September 2, 2014 at 7:49 pm #312478
    venturephoto

    Ive changed it, still problems. now only one is visable

    September 2, 2014 at 8:23 pm #312486
    venturephoto

    I am currently using following tags in my quick CSS

    #top #header .avia_mega_div > .sub-menu { padding: 0; }

    #top #header .avia_mega_div > .sub-menu > li { padding: 0; border: none; width: 100%; }

    #header .avia_mega_div { width: auto; }

    September 3, 2014 at 5:32 am #312623
    Ismael

    Hey!

    Thank you for the update.

    I checked the website again but the mega menu only got one image on it and there is a weird bright green color on the submenu. Please add the images again on the mega menu. We need to inspect it.

    Cheers!
    Ismael

    September 3, 2014 at 8:10 pm #313082
    venturephoto

    Hi!

    I used a bright green color as a BG color just to make it more clear if the padding is gone.
    There are currently 3 pictures/menu items. You can only see one as a result of the quick css you gave me :)

    Thank you

    September 3, 2014 at 8:11 pm #313083
    venturephoto

    I just noticed one thing, when im previewing the page in Firefox, all of the (3) images are visable.
    But only one when previewing in chrome.

    September 6, 2014 at 1:52 am #314236
    Josue

    Hey!

    To make the images appear on Chrome, use this:

    .avia_mega_div .mega_menu_title img {
    min-width: 125px;
}

    Regarding the padding question, there is actually no padding, the problem is that your header has a white space at the bottom, something like this does the trick:

    nav.main_menu li a{
    max-height: 125px;
}

    Cheers,
    Josue

    September 6, 2014 at 11:40 am #314456
    venturephoto

    Hey!

    Thanks alot, that did the trick. Looks great

    Have a nice day!

    September 6, 2014 at 4:57 pm #314507
    Josue

    You are welcome, you too :)

    Regards,
    Josue

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Mega menu padding (with images)’ is closed to new replies.