increase space between menu items – Rebalance Theme

• 

  thenameofthenextsong · Member · Nov 8, 2016 at 10:18 pm

  • Copy link
  • Add topic to favorites

  Hello,

  Please could you help me? – I would like to add space between the menu, in order to align each column with the posts below.

  Also, is there a way to have the menu all in one line?

  Many thanks

  Valentina

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Nov 9, 2016 at 4:28 am

  • Copy link

  Hi Valentina, there are three divs for the menu, the left, center and right. Each of those is allotted 33% of the width, so we can’t really increase the space since 33% x 3 = 99%, and we can’t go over 100%.

  About all I can think of is to size the left and center wider than 33% and then the right one much less. I’ve used a Media Query in the following since we don’t want to mess up the touch device menu on smaller screens. Add the following at the very bottom of your custom CSS and see what you think.

  @media screen and (min-width: 881px) {
  .main-navigation div > ul {
      width: 42% !important;
  }
  .main-navigation div > ul:first-child {
      width: 42% !important;
  }
  .main-navigation div > ul:last-child {
      width: 15% !important;
  }
  }

• 

  thenameofthenextsong · Member · Nov 9, 2016 at 8:24 am

  • Copy link

  Hello,

  Many thanks. Not sure this has worked. Otherwise, is there a way to align it all in one line with same spacing?

  Many thanks

• 

  thesacredpath · Member · Nov 12, 2016 at 11:27 am

  • Copy link

  … is there a way to align it all in one line with same spacing?

  No, as I said, the three sections of the menu are in three different divs in the HTML, which means we can’t make them all one line.