[Resolved] Hamburger menu on the left in mobile version

Home Forums Support [Resolved] Hamburger menu on the left in mobile version

Home Forums Support Hamburger menu on the left in mobile version

  • This topic has 11 replies, 2 voices, and was last updated 2 months ago by Ying.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #2010022
    ioan

    Hello, I am developing a woocommerce website with GP Premium.
    We have two menus, the primary one only contains the user icon and the secondary one the accesses to other pages.

    Is it possible that in the mobile version it will show the hamburger with the Secondary menu collapsed on the left side, on the right side the Primary menu not collapsed (user icon) plus the shopping cart icon, and the logo in the center.

    Thanks in advanced.

    #2010120
    Ying
    Staff
    Customer Support

    Hi there,

    Any chance you can link us to the site in question?

    You can use the private information field.
    https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

    Let me know πŸ™‚

    #2010170
    ioan

    Sorry, its offline under development environment

    #2010171
    ioan

    Just looking for a way to put on mobile the hamburger with the Secondary menu on the left, the logo centered and the primary menu and shopping cart icon on the right

    #2010279
    Ying
    Staff
    Customer Support

    Sorry but I have to see the site to know what CSS code is needed.

    Can you get back to us when it’s online?

    Let me know πŸ™‚

    #2010298
    ioan

    Ok. I think it could work with the link:

    https://habanapack.com/

    It’s another website that is on line and has similar conditions, so solutions for this one will work.

    #2011266
    ioan

    Inadvertently I mark the topic as resolved and it is not. Could you please help me.

    #2011470
    Ying
    Staff
    Customer Support

    Are you trying to achieve something like this?
    https://www.screencast.com/t/NXM5UUybsg

    If so, try this CSS:

    @media (max-width: 768px) {
    nav#site-navigation {
        position: absolute;
        top: 78.2px;
        right: 0;
        height: 35px;
    }
    }
    #2011541
    ioan

    Thank for your support Ying, what I try the archive is, on the same horizontal line: on the left side the hamburger with the Secondary menu, in the middle (centered) the logo, and on the right side the Primary menu (not collapsed because it only has the font awesome user icon) and the cart icon.

    #2011585
    Ying
    Staff
    Customer Support

    That’s quite a lot customizations especially you’ve already have some CSS regrading the header section.
    I can’t guarantee the same CSS would work for your other site:

    Give this CSS a try:

    @media (max-width: 480px) {
        .site-logo {
            position: absolute;
            left: 50%;
            transform: translatex(-50%);
            top: 0;
        }
        button.menu-toggle.secondary-menu-toggle {
            width: 20px;
            display: flex;
            background-color: transparent!important;
            color: #009999 !important;
            margin-top: -40px;
            padding-bottom: 20px;
            padding-top: 20px;
        }
        .secondary-navigation .inside-navigation {
            flex-wrap: wrap;
            justify-content: flex-start;
        }
        .secondary-navigation.toggled .main-nav {
            width: 100%;
        }
        body .secondary-navigation {
            background-color: transparent !important;
        }
        .secondary-navigation {
            padding-left: 0 !important;
        }
        nav#site-navigation a {
            font-size: 20px !important;
        }
        .main-navigation .inside-navigation {
            padding-top: 20px;
            margin-bottom: -20px;
        }
    }
    #2011674
    ioan

    Great! As you mention before, it was hard to give me the right css code, but you put me on the way. Thanks you very muchs.
    As always, excellent support from GeneratePress team.
    I will mark it as resolved.

    #2012486
    Ying
    Staff
    Customer Support

    You are welcome πŸ™‚

    Hope it will work for your other site somehow!

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.