How to reduce line height in a mega menu

Comments

• Albert

  November 2016

  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

  November 2016 edited November 2016

  Hi there
  

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

  Thanking you in advance.
• Albert

  November 2016

  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

  November 2016 edited November 2016

  
  
• Albert

  November 2016

  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

  November 2016 edited November 2016

  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

  November 2016

  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

  November 2016

  This is perfect, thank you
• Albert

  November 2016

  You're welcome!
  

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

  July 2018

  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

  July 2018

  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

  July 2018

  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

  July 2018 edited July 2018

  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

  July 2018

  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

  July 2018

  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

  July 2018 edited July 2018

  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

  July 2018

  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

  July 2018

  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

  July 2018

  Can it be like this?

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

  Thanks

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

  July 2018 edited July 2018

  Yes Pablo, thank you so much! :-)