Title: Drop Down menu box not centered Last modified: August 1, 2019 --- # Drop Down menu box not centered * [Phase](https://wordpress.org/support/users/phaseband/) * (@phaseband) * [7 years, 1 month ago](https://wordpress.org/support/topic/drop-down-menu-box-not-centered/) * Searched every page I possibly could on the internet and couldn’t find a fix for that. if you hover the cursor over the PHONOGRAPHY section you’ll see that the box is astoundingly offset. can you please help with that? I assume there’s something to do with the word’s length… * Thank you so much! * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fdrop-down-menu-box-not-centered%2F%3Foutput_format%3Dmd&locale=en_US) to see the link]_ Viewing 14 replies - 1 through 14 (of 14 total) * [Joy](https://wordpress.org/support/users/joyously/) * (@joyously) * [7 years, 1 month ago](https://wordpress.org/support/topic/drop-down-menu-box-not-centered/#post-11789993) * You should ask at your theme’s support forum, unless you are using a plugin for menus (then ask in the plugin’s support forum). * Thread Starter [Phase](https://wordpress.org/support/users/phaseband/) * (@phaseband) * [7 years, 1 month ago](https://wordpress.org/support/topic/drop-down-menu-box-not-centered/#post-11790011) * I see… stack exchange it is.. * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [7 years, 1 month ago](https://wordpress.org/support/topic/drop-down-menu-box-not-centered/#post-11790106) * Joy’s advice is legitimate, [@phaseband](https://wordpress.org/support/users/phaseband/). There’s a style coming from your theme that indicates it is intentional: * ``` .nav li:hover ul, .nav li.sfhover ul { left: -75%; ... } ``` * Instead of overriding intention code from your theme, you should explore the underlying issue of why your theme is being offset. Your theme developer, having full context of the Whys of your theme, will be the best person to ask. - This reply was modified 7 years, 1 month ago by [Andrew Nevins](https://wordpress.org/support/users/anevins/). * Thread Starter [Phase](https://wordpress.org/support/users/phaseband/) * (@phaseband) * [7 years, 1 month ago](https://wordpress.org/support/topic/drop-down-menu-box-not-centered/#post-11790126) * Thanks for your reply Andrew, with the rest drop downs (Gallery, Party) this isn’t happening/visible though. any ideas on why would that be happening? * Thank you * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [7 years, 1 month ago](https://wordpress.org/support/topic/drop-down-menu-box-not-centered/#post-11790151) * I can’t really tell, looks to me like those other menu items just have hard-coded` left` styles as well but with different values. For example ‘Gallery’ dropdown has ‘left: -47%’ on hover. That could be something to do with JS you’ve got going there * Thread Starter [Phase](https://wordpress.org/support/users/phaseband/) * (@phaseband) * [7 years, 1 month ago](https://wordpress.org/support/topic/drop-down-menu-box-not-centered/#post-11790213) * It only happens on it even if i change the order of the items * ``` /* Dropdown */ .nav li ul { position: absolute; left: -999em; padding: 4px 0 0 0; z-index:99; } .nav li:hover ul, .nav li.sfhover ul { /*left: 0;*/ left: -75%; top: 30px; } .brat2 { display: none; left: -52% !important; } .nav li:hover li, .nav li.sfhover li, .nav li.current-menu-item li, .nav li.current_page_item li, .nav li li { background: #333 url(images/dropdown.jpg) 0 0; width: 160px; height: 28px; line-height: 14px; border: 1px solid #303030; border-top: none; padding-top: 4px; text-align: center; } .nav li:hover li a, .nav li.sfhover li a { background: none; color: #999!important; height: auto; line-height: 14px; padding: 8px 10px; text-align: center; } ``` - This reply was modified 7 years, 1 month ago by [Steven Stern (sterndata)](https://wordpress.org/support/users/sterndata/). * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [7 years, 1 month ago](https://wordpress.org/support/topic/drop-down-menu-box-not-centered/#post-11790565) * There’s some pretty horrible JS in your theme: * ``` // Edit PARTY menu item dropdown position $('.page-item-8').hover(function() { $(this).children()[1].style.left = "-70%"; }, function() { $(this).children()[1].style.left = "-999em"; }); // Edit GALLERY menu item dropdown position $('.page-item-11').hover(function() { $(this).children()[1].style.left = "-47%"; }, function() { $(this).children()[1].style.left = "-999em"; }); ``` * Are you developing this? If so, we can help you find a better way of fixing the dropdown than adding this bottleneck JS and CSS in. * Thread Starter [Phase](https://wordpress.org/support/users/phaseband/) * (@phaseband) * [7 years, 1 month ago](https://wordpress.org/support/topic/drop-down-menu-box-not-centered/#post-11792325) * thank you… what should I replace it with? * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [7 years, 1 month ago](https://wordpress.org/support/topic/drop-down-menu-box-not-centered/#post-11792364) * Can you tell us first why you are writing this JS and CSS; what is the issue you are trying to resolve? * Thread Starter [Phase](https://wordpress.org/support/users/phaseband/) * (@phaseband) * [7 years, 1 month ago](https://wordpress.org/support/topic/drop-down-menu-box-not-centered/#post-11792622) * I am a hobbyist really, Not a proessional, all I’ve learnt is through forums and that. I need to sort that drop down out * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [7 years, 1 month ago](https://wordpress.org/support/topic/drop-down-menu-box-not-centered/#post-11792648) * Okay I see. So remove that JS and CSS you’re using to control the submenu position. * Then add this: * ``` .nav li { display: inline-block; position: relative; } .nav li:hover ul, .nav li.sfhover ul { left: 0; } ``` * Summarising the issue; 1) Your main navigation menu items were displayed “inline”, but they needed to be “inline-block” 2) Your drop-down menu was not positioned relative to their parent item in the main navigation * Thread Starter [Phase](https://wordpress.org/support/users/phaseband/) * (@phaseband) * [7 years, 1 month ago](https://wordpress.org/support/topic/drop-down-menu-box-not-centered/#post-11792732) * Nothing happened. If I shorten the word it gets fixed if it’s of any help * Thread Starter [Phase](https://wordpress.org/support/users/phaseband/) * (@phaseband) * [7 years, 1 month ago](https://wordpress.org/support/topic/drop-down-menu-box-not-centered/#post-11792735) * my guess is there’s more css below what I am adding that cancels what I am trying to change * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [7 years, 1 month ago](https://wordpress.org/support/topic/drop-down-menu-box-not-centered/#post-11792742) * Clear your browser’s cache, you should see a difference Viewing 14 replies - 1 through 14 (of 14 total) The topic ‘Drop Down menu box not centered’ is closed to new replies. ## Tags * [center](https://wordpress.org/support/topic-tag/center/) * [drop-down](https://wordpress.org/support/topic-tag/drop-down/) * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/) * 14 replies * 3 participants * Last reply from: [Andrew Nevins](https://wordpress.org/support/users/anevins/) * Last activity: [7 years, 1 month ago](https://wordpress.org/support/topic/drop-down-menu-box-not-centered/#post-11792742) * Status: not resolved ## Topics ### Topics with no replies ### Non-support topics ### Resolved topics ### Unresolved topics ### All topics