- This topic has 11 replies, 3 voices, and was last updated 4 years, 9 months ago by David.
-
AuthorPosts
-
June 17, 2019 at 6:28 am #932195Nacho
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.
June 17, 2019 at 2:50 pm #932752TomLead DeveloperLead DeveloperHi 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%; }
June 18, 2019 at 12:18 am #932982NachoHello 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.
June 18, 2019 at 3:22 am #933118DavidStaffCustomer SupportHi 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%; }
June 18, 2019 at 5:49 am #933235NachoHello 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.
June 18, 2019 at 8:53 am #933620DavidStaffCustomer SupportLooks great 🙂
Glad to be of help. Let us know if you need assistance with the menu.June 19, 2019 at 1:34 am #934231NachoHello 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.
June 19, 2019 at 5:09 am #934444DavidStaffCustomer SupportTry 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; }
June 19, 2019 at 6:03 am #934515NachoHi David,
That worked perfectly.
I guess it is recommended that for now on to use the SVG icons right?
Thanks a lot.
June 19, 2019 at 6:28 am #934553DavidStaffCustomer SupportAwesome.
Yeah i would probably use SVGs from now.June 19, 2019 at 6:28 am #934555NachoOk, thanks a lot David.
Have a nice day.
June 19, 2019 at 6:29 am #934563DavidStaffCustomer SupportYou’re welcome and you too.
-
AuthorPosts
- You must be logged in to reply to this topic.