[Resolved] pixel error in navigation

[Marc Witschi]

I have a small error in my menu which drives me crazy 😉 When I hover on the first section of my menu the submenu opens but with some pixels postponed.
Here a screenshot of my problem:

https://ibb.co/CbK8vd3

Can you help me with this?

[David]

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

[Marc Witschi]

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

[David]

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;
    }
}

[Marc Witschi]

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;
    }
}

[David]

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

[Marc Witschi]

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

[David]

Hi there,

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

[Marc Witschi]

awesome, thanks!

[David]

You’re welcome

[Author]

Posts