Last Item in Top Menu Runs Off Screen Top Right

[Samuel]

Hi Bill: I’ve created a Top Menu for our client’s site, and have adjusted the width for the drop downs as per an earlier forum topic. But my issue is that with the rightmost menu item, when you click on it for the drop down sub menu items, they run off the right hand side of the screen. Here’s the link

http://www.paceministries.org/pace/

[Bill Robbins]

Hello Samuel,

Thank you for your business first of all. One option here would be to make the drop down on the last item there be narrower on certain screen sizes so it won’t extend off the screen. Here’s how to do that:

1. Go to the Theme Options page and select the Advanced tab.
2. Scroll down to the Custom CSS box and paste this:

   
   @media only screen and (min-width: 768px) and (max-width: 1330px) {
   
   	#header nav#top-menu ul li:hover#menu-item-167 ul {
   		width: 150px;
   	}
   	
   	#header nav#top-menu li#menu-item-167 li {
   		white-space: normal;
   		width: 120px;
   		word-wrap: normal;
   	}
   
   }
   

3. Update your settings.

See if that doesn’t help things out for you. It’s set to be tied to that specific menu item so if you more that item around in your navigation structure (the Partner one) you’ll need to change the ID number to reflect the new last one. If that happens and you need help, let me know.

Thanks again,
Bill

[Author]

Posts