Divi is a great theme for building your WordPress website but one little issue can drive you up a wall!
You just finished up your Divi WordPress website ant it’s looking pretty sweet. Time to give it the ole’ once over before you go live. Hmmm, something seems amiss. There is a horizontal scroll bar showing up for some reason. You do a quick check with the developer tools and everything seems to be fitting on the page. So what is that extra space off to the right? More importantly…HOW CAN I FIX IT!?!
Relax…I’ve got your covered. The issue is a hidden sub-menu that is overflowing the page container. If you click on your last navigation item in the main header, you will see the sub-menu flyout and overflow to the right. It’s a quick fix and one that many would argue should be in the pre-packaged code for the Divi Theme. All we have to do is re-position that last sub-menu flyout. Check out the code below:
If you’d like to move the menu even further away from the edge you can adjust the value of “right”.
Simple enough and now you can move on with publishing your site and enjoying all of the compliments on how awesome it looks!
Looking for this code long time. Chears!
Thank you so much!
Seems like the new Divi has changed the selector. This is what worked for mem change “sub-meu” to “children”.
#top-menu > li:last-child .children {
position: absolute;
right: -20px;
}
Worked perfectly. Thank you 🙂
This doesn’t work anymore. Anyone know why? The site has the same exact markup yet the item is flying off the screen still on laptops.
Can you share the URL to your site? I haven’t looked at this code in quite some time. I’m sure something has changed slightly.
Doesn’t work anymore.