How to reduce line height in a mega menu

5DDesign

Hi There

How do I reduce the line heigh between items in a mega menu? In other words, how do I reduce the overall heigh of a mega menu?

Kind Regards 

Albert

Hi,

please send us link to page where you got this menu so we can give you best possible solution.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

5DDesign

Hi there

On the menu, have a look at 'Programmes'.

Thanking you in advance.

Albert

Sorry but above link is wrong. This is what we get http://pasteboard.co/2vvlGmzff.png when we open above link.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

5DDesign

Albert

Ok, thanks. Now it works. So to decrease line height of menu items, please use below custom css:

.mm-vertical #Top_bar .menu > li > ul.mfn-megamenu > li a { line-height: 100% !important; }

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

5DDesign

Thank you for the code however as there are items on two lines they end up squashing together 

I know I asked how to reduce the line height, but is there an alternative option to reduce the overall height, perhaps reducing the padding (height) around the items? 

Albert

The other way is to decrease the padding of menu items but it's the only, other way to decrease it's size:

.mm-vertical #Top_bar .menu > li > ul.mfn-megamenu > li a { padding: 5px 15px !important; }

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

5DDesign

This is perfect, thank you

Albert

You're welcome!

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

blazej91

Hi there,

I've just used your .mm-vertical line on a website (http://www.nanoceramicprotect.com). Unfortunately it is not working.

To make it more interesting: i did the same thing on a polish version of the same website (another Wordpress). The adress of the proper working one is: http://www.nanoceramicprotect.pl. Can you see the difference? And it is it possible to take a closer look on this, please?

Thank you!

Yours sincerely

Blazej

Pablo

Please migrate your images from 'pl' on '.com' version of your website.

Because one is secured (HTTPS) and second isn't (http)

This can cause problems.

Tool to migrate: http://muffingroup.com/plugins/mfn-migrate-cb.zip

As you see, your console is full of errors (on .com version of site)

http://prntscr.com/k2gqtt

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

blazej91

Hi Pablo, thank you for your response.

I'm sorry I didn't mention it before: those websites may looks like clones, but they really are not. For example there is no WooCommerce shop in .com version, there are some extra pages with extra images on .pl version et cetera. Some images from .pl are not used in .com (that rule works in two directions). So my question is: are you sure that migrating images via mfn-migrate-cb is a good idea?

Thank you!

Best Regards

Blazej

Pablo

Yes.

Not migrating images can make few issues like this, but it could not be the main fault.

It's important to eliminate issues, even step by step

Thanks.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

blazej91

Thanks Pablo,

I've used your plugin on both websites. There was a lot of replaces (for example 139 changes in one website and 88 on other).

But it seems to not solving the problem. Mega menu items on .com version of the website are still not looking good.

Could we try to do something different with it?

Thank you!

Pablo

You still want to increase padding, right?

Let's try to do it with this:

#Top_bar li a { padding: 5px 15px !important; }

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

blazej91

Almost got it! I've changed it to

#Top_bar li a { padding: 2px 12px !important; }

There is only the last thing. Do you see the difference between https://www.nanoceramicprotect.pl/ and https://www.nanoceramicprotect.com now? It's all about the margins now.

I don't want to abuse your patience any longer. If you say "it's enough" I totally understand it.

Thanks Pablo!

Pablo

If you're talking about this "Przyśpieszamy", you have to edit it in Revolution Slider,

I can't do it through CSS.

Feel free to ask.

Cheers.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

blazej91

No, no, "Przyśpieszamy" is not the case.

Please let me explain the issue via screenshot: https://imgur.com/a/ALQiuvt

I hope that the difference is clear for you now :-)

Thank you!

Pablo

Can it be like this?

.sub-menu{
	padding:10px !important;
}

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

blazej91

Yes Pablo, thank you so much! :-)