Menu spacing

Comments

• Pablo

  January 2020

  Hello,

  We suggest, not to use the CSS code to decrease the spacing between menu items, it could issue the responsive view of the website.
  

  We provide this code in really problematic situations.

  
  

  The best way to decrease them, will be by changing the "Grid Width" option to smaller value.

  Theme Options > Global > General

  Thanks
  

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

  January 2020

  Hi Pablo,

  Thank you for  responding so quickly.  I tried the Grid Width first, and decreasing it put the menu items to 2 lines, what I don't want! So increasing it to 1300 put all the menu items on one line, but that makes the webpage too wide and for smaller screens, it still puts those menu items to 2 lines.  If I can just reduce the space between the menu items, that should fix a big part of the problem. Why doesn't the CSS code work?

  
  

  Thanks so much for your help.

  Cheers,

  Janell
  
• Pablo

  January 2020

  Every item must have some space between them, reducing it will make the menu looks bugged and misaligned.

  Changing it with CSS could make a lot of responsive troubles which we want to avoid, because fixing it require to remove the css or much more css tweaks.

  
  

  The menu items break to the second line while your grid width is smaller, because it does not have place to fit and it pushing them down, to prevent letters overlap.

  What you can do to fix that, is to create the submenu with some menu items inside, or by changing the font size of the menu items in Theme Options > Fonts > Size & Style - there you will find the "main menu" font size.

  Thanks
  

  
  

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