[Resolved] Float menu and logo to the left

[Stew]

https://generatepress.com/forums/topic/logo-and-menu-float-left-problem/

Opened a new topic in response to this thread above. Because my site is in staging and behind a maintenance wall I’ve attached a picture. The above part is what it currently looks like, the below the red line is what I’d like for it to look like. I know getting on the site is preferred so you can see the CSS and inspect the page, but I’d need to give login credentials, so you’ll need to contact me directly for that. I’ve tried the methods in the above thread and that didn’t work. I currently am using the page header premium thing, menu plus, secondary nav, woocommerce, and typography.

[Leo]

Hi there,

With only using one menu plus menu item float right works for you?
https://docs.generatepress.com/article/adding-icons-to-menu-items/#floating-the-icon-to-the-right

[Stew]

Sorry, I don’t see how this answers the question after reading the document. I don’t want to add an icon to my menu, I want to take the site logo and put it on the left before the primary menu. If I float the primary menu left, and the secondary menu right, the logo is centered. I don’t want it centered, I want it on the left before the primary menu. [ SITE LOGO | PRIMARY MENU | | SECONDARY MENU ]. The part between the brackets being the header width.

[Tom]

Have you tried adding your site logo as the “Navigation logo”?: https://docs.generatepress.com/article/navigation-logo/

I haven’t personally tried this layout, but that should work in theory.

Let me know if it doesn’t 🙂

[Stew]

As a work around it sort of works, but not really. I had actually tried this already. I wanted to avoid doing this because then it looks odd in the sticky menu, and really bad on mobile. I also think it’s going to also lead to a lot more CSS coding to make it looks exactly how I’d like on both desktop and mobile.

[Tom]

I think we might need to adjust the sticky menu and mobile then, as any other method would be very similar HTML markup to the navigation logo.

If you’d like to set it up send me login details so I can see the issues, that would be awesome: https://generatepress.com/contact/

[Stew]

Sent in a message

[Tom]

Alright, let’s ditch the navigation logo idea.

Then try this CSS:

@media (min-width: 769px) {
    body.nav-float-left.secondary-nav-float-right .inside-header .site-logo {
        float: left;
        clear: none;
    }

    body.nav-float-left .inside-header .main-navigation {
        clear: none;
    }
}

Let me know if it gets us closer 🙂

[Stew]

Hi Tom,

No change after changing the CSS.

[Tom]

I just made a couple small adjustments, can you update your CSS?: https://generatepress.com/forums/topic/float-menu-and-logo-to-the-left/#post-483767

[Stew]

That fixed it. Thank you very much for sticking with the issue and actually helping to solve it. Just curious, what was the change?

[Tom]

I had to add body in front of the classes so they were more specific.

Glad I could help! 🙂

[Author]

Posts