[Support request] Mobile menu like the website

Home Forums Support [Support request] Mobile menu like the website

Home Forums Support Mobile menu like the website

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #932195
    Nacho

    Hello,

    Will it be possible to create a mobile menu like the one on the website URL?

    The button menu is super close to the right thumb so it makes super easy to access the menu on mobile.

    Thanks a lot.

    #932752
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    You could likely achieve something similar to this using our Mobile Header and Off Canvas Panel.

    Then you could add some CSS like this:

    #mobile-header .menu-toggle {
        position: fixed;
        bottom: 10px;
        right: 10px;
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 50%;
    }
    #932982
    Nacho

    Hello Tom,

    Super helpful. I think we´re getting there.

    Take a look at my website in the URL of the post because the position of the 3 horizontal bars are not in the middle of the bubble I cannot get them in the middle and bigger.

    Also when you click on the bubble menu an “x” shows inside. To test it you have to press the mobile button and then press it again, then you´ll see the “x”.

    And will it be possible to allign the menu as much close to the button so the user access the menu items right with the thumb?

    The website where the menu button is https://barbacoas.online

    Is this fixable?

    Thanks a lot for your help.

    #933118
    David
    Staff
    Customer Support

    Hi there,

    try this CSS instead for styling and positioning the button and removing the ‘x’ on second click:

    #mobile-header .menu-toggle:before {
        margin: 0 auto;
        margin-left: auto;
        position: fixed;
        display: block;
        bottom: 4rem;
        right: 1.5rem;
        z-index: 1000000000;
        width: 1.8em;
        line-height: 1.8em;
        border: 0;
        border-radius: 50%;
        opacity: 1;
        padding: 0.5rem;
        -webkit-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, .5);
        box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, .5);
        background-color: #fff;
        -webkit-transition: .3s ease all;
        transition: .3s ease all;
        display: block;
        color: #000;
        font-size: 1.8em;
    }
    
    .toggled .menu-toggle:before {
        content: "\f0c9" !important;
    }

    Then for the size and position of the navigation this should get you started:

    #generate-slideout-menu {
        height: 50%;
        top: 50%;
    }
    #933235
    Nacho

    Hello David,

    Thanks a lot!

    Take a look. I think it looks cool and helpful.

    Now I need to work with the space of the logo since I would love to have the phone there and I need to fix the position of the navigation since it looks bit weird right now when you click on the button menu.

    Thanks again and have a nice day David.

    #933620
    David
    Staff
    Customer Support

    Looks great 🙂
    Glad to be of help. Let us know if you need assistance with the menu.

    #934231
    Nacho

    Hello David,

    I´ve just updated to the GP latest version and found out that if I chose SVG icons, the bubble menu button breaks.

    Do you know why it happens and how can I solve this issue?

    Thanks a lot.

    #934444
    David
    Staff
    Customer Support

    Try replacing the first part of the CSS that does the toggle styling with this:

    #mobile-header .menu-toggle .gp-icon {
        margin: 0 auto;
        margin-left: auto;
        position: fixed;
        display: block;
        bottom: 4rem;
        right: 1.5rem;
        z-index: 1000000000;
        width: 1.8em;
        line-height: 1.8em;
        border: 0;
        border-radius: 50%;
        opacity: 1;
        padding: .5rem;
        -webkit-box-shadow: 0px 5px 10px 0px rgba(0,0,0,.5);
        box-shadow: 0px 5px 10px 0px rgba(0,0,0,.5);
        background-color: #fff;
        -webkit-transition: .3s ease all;
        transition: .3s ease all;
        display: block;
        color: #000;
        font-size: 1.8em;
    }
    
    .toggled .icon-menu-bars svg:nth-child(1) {
        display: inline !important;
    }
    
    .toggled .icon-menu-bars svg:nth-child(2) {
        display: none !important;
    }
    #934515
    Nacho

    Hi David,

    That worked perfectly.

    I guess it is recommended that for now on to use the SVG icons right?

    Thanks a lot.

    #934553
    David
    Staff
    Customer Support

    Awesome.
    Yeah i would probably use SVGs from now.

    #934555
    Nacho

    Ok, thanks a lot David.

    Have a nice day.

    #934563
    David
    Staff
    Customer Support

    You’re welcome and you too.

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