extend width of secondary navigation

• 

  tcolello62 · Member · May 30, 2016 at 5:53 pm

  • Copy link
  • Add topic to favorites

  Hello,

  I need to increase the max width of the secondary navigation menu on the Prosperity theme. How do I do that? I’m trying to add 4 nav, but it goes to the second line. secondary nav is “about vadxx, why vadxx etc..”

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

• 

  carladoria · Member · May 30, 2016 at 9:15 pm

  • Copy link

  Hi there,
  You can try the following CSS (paste it in Customize > CSS):

  .secondary-navigation {
     max-width: 100%;
  
  }

  By default, it was set to 64%, so 100% should give you more space, if not you can increase this percentage.

• 

  tcolello62 · Member · May 30, 2016 at 11:49 pm

  • Copy link

  Hello,

  Thanks for the reply but it didn’t work. Changed it to 200% and nothing happened. Any other suggestions?

• 

  carladoria · Member · May 31, 2016 at 1:15 pm

  • Copy link

  Hi,
  It seems that above 3 items on your menu, the CSS conditioned to a specific format. Try adding this CSS to remove that format:
  `
  .secondary-navigation > div > ul > li:nth-of-type(3n+1) {
  clear: none;
  }
  .secondary-navigation > div > ul > li:nth-of-type(3n+1) {
  margin-left: 32px;
  padding-left: 32px;
  border: none;
  }

  I hope this time works, if not let me know ;)

• 

  carladoria · Member · May 31, 2016 at 1:16 pm

  • Copy link

  Hi,
  It seems that above 3 items on your menu, the CSS conditioned to a specific format. Try adding this CSS to remove that format:

  .secondary-navigation > div > ul > li:nth-of-type(3n+1) {
      clear: none;
  }
  .secondary-navigation > div > ul > li:nth-of-type(3n+1) {
      margin-left: 32px;
      padding-left: 32px;
      border: none;
  }

  I hope this time works, if not let me know ;)

• 

  tcolello62 · Member · May 31, 2016 at 11:04 pm

  • Copy link

  Great! It worked, now how do I add a divider line in between resources and contact us.

• 

  tcolello62 · Member · May 31, 2016 at 11:05 pm

  • Copy link

  Great! It worked, now how do I add a vertical divider line in between resources and contact us. Thank you!

• 

  carladoria · Member · Jun 1, 2016 at 1:59 pm

  • Copy link

  Sure, forgot that menu line…
  Please add this:

  .secondary-navigation > div > ul > li:nth-of-type(3n+1) {
  border-left: 1px solid rgba(0,0,0,0.1);
  }