Support Center Visit Demo License manager Buy @ envato

Edit spacing on megamenu

leadoptimizeleadoptimize
in Menu / Mega menu
See menu item Tools & Resources on http://dev.thinkreliability.com/

That is using megamenu with images and text for the submenu items.

However, the spacing (or padding) between each item in the columns is way too big. It's even forcing some of the menu items out of the bottom of the screen. So my question is how do I decrease the space between each menu item in a column.

I tried this:

#Top_bar .menu li ul li a {
0 10px 0 20px;
}

But that still left too much space between the menu items....and plus that also applied the css to other menu items that were already fine, messing them up.

So my questions is: How can I decrease the space between menu items in a column of a megamenu, but only apply that to a single top level menu item. I know editing css for a single menu item can be done. I've seen a tutorial on it, but I'm not sure how to make it work with this theme.

Please help. Thanks.

Comments

  • AlbertAlbert
    Hi,

    the only way to play with padding is the css you showed above and there is no other way to decrease mega menu paddings.

    Thanks!
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • leadoptimizeleadoptimize
    Hmm. Well I'm using tables as the Label for each menu item - a tale with an image on the left and text on the right.

    Is that the best way to accomplish the look I have? The table is adding extra padding and spacing apparently, even when I set the table to 0 padding and spacing in the html of the table. So is there a different way to get the image next to the text for each sub-megamenu item like I have set up for Tools & Resources? 

    Or is there some CSS in the theme that is overriding the padding and spacing set in the html of the tables?

    Also, I can't seem to get the images and the text to align themselves horizonatlly with each other. You'll see the text in each is slightly above center vertically. I have vertical align set to middle in the table, but it's not coming out that way in the menu.

    Can you provide any help there?

  • leadoptimizeleadoptimize
    Regarding the issue of the text not centering vertically, I figured it out. It was because it was an h font. I forgot that tends to have a certain amount of padding below the font. I changed it to regular p font, and it was centered normally.

    Now if I can just get the padding down between sub menu items....
  • AlbertAlbert
    Can you show us on screenshot how you want to down padding between sub menu items? Because we are not sure what you exactly want to do.
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • leadoptimizeleadoptimize
    Well for now I have worked around it. The issue was that I had actual tables as the submenu item names - to display custom icons to the left of each submenu item, which was in H4 or H5 font. The addition of the table within the submenu in megamenu was adding the padding. I changed the submenu items for that menu to just an image (custom icon and text as image), removing the table, and that got rid of the extra padding. 

    But if you go to http://dev.thinkreliability.com/ and hover on Tools & Resources, you'll see the items under Tools have normal padding, but the items under Resources have too much padding. Those items in columsn 2 and 3 in the megamenu there are made up of table in each menu item's name. The padding is too large. The items in column 1 (Tools) are just images, so the padding is normal.

    By the time you see this post, though, I may have replaced all the items in columns 2 and 3 with images like in column 1, so you may not even see what I am referring to.
Sign In or Register to comment.