[Resolved] Logo left, hamburger right

Home Forums Support [Resolved] Logo left, hamburger right

Home Forums Support Logo left, hamburger right

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #865602
    Hazel

    I found this code from Tom on the forum to float the logo left and the hamburger right but it doesn’t seem to do anything to the site.

    @media (max-width: 768px) {
        .nav-float-right .main-navigation {
            float: right;
        }
        .nav-float-right .site-logo {
            float: left;
        }
    }

    P.S. I’m not using the actual mobile menu.

    #865605
    Leo
    Staff
    Customer Support

    Hi there,

    I believe this method would work the best for the layout you are after (both desktop and mobile):
    https://docs.generatepress.com/article/navigation-as-a-header/

    Note that weโ€™ve made the navigation as a header an option in the next version of GP Premium which is already in release candidate 1 so quite stable:
    https://generatepress.com/gp-premium-1-8/

    Let me know if this helps ๐Ÿ™‚

    #866666
    Hazel

    Hi Leo
    Thanks for the reply. I’ll certainly use the navigation as header feature in future but this client REALLY wants to have the desktop header on smaller screen sizes. It’s working very well except logo and nav are centered. The code to float the logo left and the nav right in my earlier question was provided on this forum for just such an occasion but it isn’t working.
    Any ideas would be appreciated.

    #867257
    Leo
    Staff
    Customer Support

    Not sure if I understand.

    If you use my suggested above, you would have the logo on the left and menu on right in both desktop and mobile as mentioned.

    #867604
    Hazel

    Hi Leo
    Looking at the example page you directed me to I see the menu and a tiny logo. The client wants it to look the way it already does with larger logo and a gradient background. Am I missing something?

    By the way, what is estimated release date for Premium 1.8. The site in question is going live next week and I’m reluctant to upgrade to a Release Candidate.

    #867625
    Leo
    Staff
    Customer Support

    You can create the exact layout as you have right now with the navigation as a header method.

    Have you tried it yet?

    You can follow the 6 steps here if you don’t want to use 1.8:
    https://docs.generatepress.com/article/navigation-as-a-header/

    #867798
    Hazel

    Hi Leo
    Thanks. I didn’t realise the logo could be as large as I wanted

    #868051
    Leo
    Staff
    Customer Support

    Wouldn’t make the suggestion if it wasn’t going to work ๐Ÿ˜‰

    Glad it’s working for you ๐Ÿ™‚

    #868289
    Hazel

    Hi Leo
    I don’t know if I used the best solution but the logo didn’t show on some screens using 1.8 so I added menu item height until it did. It was made a bit more difficult because the tablet and phone previews didn’t seem all that accurate.

    Is it possible to add some top and and bottom padding to the navigation if required?

    #868601
    Tom
    Lead Developer
    Lead Developer

    For sure, try this CSS:

    #site-navigation .inside-navigation {
        padding: 10px 0;
    }
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.