[Resolved] Float logo and navigation is clashing when sizing down.

[mrbishwork]

Hello, there is there a way not to collide the navigation and logo when the changing the browser size?

[David]

If you have the Primary Navigation Location set to the Float Right then below it is a Navigation Drop Point. Set this to the width of the screen when the logo and nav clash. The nav will then fall below the logo at that point.

[mrbishwork]

Hello David, thanks for the quick reply. Im not using a Float right navigation setting. Im using my navigation as a header then I used the float navigation logo outside container from this guide.

https://docs.generatepress.com/article/navigation-logo/

Is there a way to avoid the clashing in these settings of mine? thanks

[David]

Can you open the site so i can see what the best solution is?

[mrbishwork]

Its open now the link is http://.flywheelsites.com

[David]

The nav is quite long and clashes with the logo at around 1080px, which is really high. What would you want the logo or the nav to do at this point?

[mrbishwork]

I was thinking when it hits to 1080px i planning to put the logo on the center and below of that the navigation.

[Tom]

You could try something like this, but even it might collapse at smaller screen sizes because of the number/length of menu items:

@media (max-width: 1100px) and (min-width: 769px) {
    .main-navigation .site-logo.navigation-logo {
        float: none;
        position: relative;
        margin: 0 auto;
    }

    .main-navigation .site-logo.navigation-logo img {
        left: auto;
        top: auto;
        margin: 0 auto 10px;
    }

    .nav-aligned-right .main-navigation {
        text-align: center;
    }

    .main-navigation .main-nav ul li a {
        font-size: 13px;
        padding: 0 10px;
    }
}

[mrbishwork]

Thank you very much Tom! It works 🙂

[Tom]

You’re welcome 🙂

[Author]

Posts