How to Widen Drop Down Tabs of The Photography Theme

• 

  meghanjward · Member · Nov 21, 2014 at 4:14 am

  • Copy link
  • Add topic to favorites

  Words are getting cut off because drop down menu is too narrow, particularly when you hover over “Portfolio” – http://zizka.ca/portfolio/.

  Can someone help me with some CSS to widen that?

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

• 

  hallluke · Member · Nov 21, 2014 at 11:34 am

  • Copy link

  Can you provide a screenshot and let us know what browsers you have tried and on which operating system? I’ve tested this in Firefox 33.1 and it breaks the longer items onto two lines and hyphenates them.

  You could try explicitly setting some hyphenation rules in your CSS:

  nav.opened li {
    -webkit-hyphens:auto;
    -moz-hyphens:auto;
    hyphens:auto;
  }

• 

  meghanjward · Member · Nov 21, 2014 at 4:25 pm

  • Copy link

  I have viewed it in Chrome and Safari.

  Here is a screengrab: https://paulzizkaphotography.files.wordpress.com/2014/11/screen-shot-2014-11-21-at-9-20-29-am.png

  I definitely don’t want hyphens – just want to widen the menu.

• 

  hallluke · Member · Nov 22, 2014 at 1:39 pm

  • Copy link

  Try this instead:

  nav[role="navigation"] .nav ul.sub-menu li,
  nav[role="navigation"] .nav ul.children li {
    width:170px;
  }

• 

  meghanjward · Member · Nov 22, 2014 at 9:15 pm

  • Copy link

  Yes, that worked! Thanks!