Unwrap Text in menu item

• 

  ewave4ed · Member · Dec 7, 2016 at 5:13 pm

  • Copy link
  • Add topic to favorites

  In my menu, the About item has a drop-down. The third item is “How is eWave different from other ED treatments?” I’d like for that text to not wrap, and for the menu item to extend, so it’s all in one line. What CSS do I need to use to make that happen?

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

• 

  kathrynwp · Staff · Dec 8, 2016 at 8:11 pm

  • Copy link

  Something like this should do the trick to widen up that specific element on larger screens:

  @media (min-width: 768px) {
    .menu-item-142 {
      width: 400px;
    }
  }

  Let me know how it goes.

• 

  ewave4ed · Member · Dec 9, 2016 at 2:45 pm

  • Copy link

  That worked! THank you. Is there a way to do this for the other Menu tabs as well?

• 

  kathrynwp · Staff · Dec 13, 2016 at 2:51 pm

  • Copy link

  If you want the same width on every drop-down, you could try targeting the whole sub-item class instead of what I provided earlier, which targeted one specific menu item:

  @media (min-width: 768px) {
    .sub-menu { width: 400px; }
  }