Mobile menu like the website

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%;
}

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.

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%;
}

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.

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

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.

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;
}

Hi David,

That worked perfectly.

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

Thanks a lot.

Awesome.
Yeah i would probably use SVGs from now.

Ok, thanks a lot David.

Have a nice day.

You're welcome and you too.