center menu items with dropdown

Hi there,

try adding this CSS:

@media(min-width: 769px) {
    .main-navigation:not(.toggled) ul li:hover > ul.sub-menu {
        left: 50%;
        transform: translate3d(-100px,0,0);
    }
}

Hi David,

Is still watching wrong:

https://snipboard.io/j9GrWf.jpg

Hi Alfonso,

Give this CSS a try:

span.dropdown-menu-toggle {
    position: absolute;
}
.main-navigation .main-nav > ul > li {
    padding: 0 13px;
}

Hi Ying,

Now is look better, so is not possible to align center taking into account the dropdown arrow:

https://snipboard.io/aZz3PD.jpg

You can try add this CSS as well:

.menu-item-has-children br + .dropdown-menu-toggle {
    top: 0.5em;
}
li#menu-item-1416 svg {
    left: 20px;
}

It is not the solution I expected but maybe it could be worth it

I don't see a better solution, but if you do, please share with me :)