Space Out Links to Fill Entire Navigation Width

• 

  capadvising2015 · Member · May 2, 2016 at 4:49 pm

  • Copy link
  • Add topic to favorites

  In the Organization theme, I want to space out the main navigation links evenly to fill the entire width of the navigation bar… something along the lines of this: http://jsfiddle.net/thirtydot/jwJBd/

  How can I do this?

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

• 

  thesacredpath · Member · May 3, 2016 at 2:46 am

  • Copy link

  Hi there, this will space out the menu items across the screen. I’ve used a Media Query to limit this to 768px and wider screens/windows since below that the touch device menu activates.

  @media screen and (min-width: 768px) {
  .menu {
      display: table;
      width: 100%;
  }
  .menu li {
      display: table-cell;
      float: none;
  }
  .menu li a {
      display: block;
      text-align: center;
  }
  }

• 

  capadvising2015 · Member · May 3, 2016 at 2:35 pm

  • Copy link

  Works like a charm! Thank you!!

• 

  capadvising2015 · Member · May 3, 2016 at 2:35 pm

  • Copy link

  Works like a charm! Thank you!!

• 

  thesacredpath · Member · May 3, 2016 at 5:41 pm

  • Copy link

  Awesome, and you are welcome.