pixel error in navigation

Hi there,

sorry i am not sure what the problem is. Is it the parent menu color changing when you hover? Or the rounded corners on the sub menu

Colors are all fine. My problem is that when the submenu opens there is a little cap at the left:
https://ibb.co/557CrXY

I'd like to have the submenu open exactly under the main-navigation.

Hopefully you understand what my problem is.
Thanks

Ok - try this CSS:

@media (min-width: 769px) {
    .dropdown-hover .main-navigation:not(.toggled) ul li:hover>ul,
    .dropdown-hover .main-navigation:not(.toggled) ul li.sfHover>ul {
        left: -10px;
        padding-left: 10px;
    }
}

Thank you very much!

I changed the amout of pixels and now it's perfect!

@media (min-width: 769px) {
    .dropdown-hover .main-navigation:not(.toggled) ul li:hover>ul,
    .dropdown-hover .main-navigation:not(.toggled) ul li.sfHover>ul {
        left: -1.5px;
        padding-left: 2px;
    }
}

Awesome - glad to be of help and thanks for sharing your final CSS

I actually still got a little problem with my submenu. If I hover on my submenu it adds a square to the main navigation:
https://ibb.co/Jq7ygYN

If I then hover on the main navigation again, the square disappears:
https://ibb.co/YB8ztQ4

Can you help me with this as well?

Thanks in advance

Hi there,

try changing the hover background colors to transparent. You can edit that in Customizer > Colors > Primary Navigation.

awesome, thanks!

You're welcome