Bottom mobile menu

Ray H

• November 05, 2022 17:19

How do I add a sticky mobile menu at the bottom. See image of actual website that uses this.

0

• 

  K C George

  • November 07, 2022 06:56
  • Edited

  Hi Ray,

  Please watch this video for the procedure to create a sticky bar at the bottom of your screen. https://jmp.sh/8wEDw3s4 Please have a look at my test design at https://digital-works.brizy.site/

  To make the sticky bar available only on mobiles, you can hide it in the Desktop and tablet views. 

  0
• 

  Ray H

  • November 07, 2022 16:25

  That is great. BUT! I clicked on hide and it disappeared. It does not now show in the editor (mobile or desktop). I can can view it on the preview.

  This is odd, can I ask for private ticket, unless you know how to fix this.

   

   

  0
• 

  K C George

  • November 08, 2022 05:25

  Hi Ray,

  To make a hidden element visible on the editor, please click on the 'Eye' icon at the right bottom corner.

   

  0
• 

  Ray H

  • November 08, 2022 09:04

  I knew you were going to advise that. I am fully aware of that, thank you.

  It appears that even a day later the preview was still showing the mobile bottom menu but not in editor.

  The preview has now gone. I can only assume that I had accidentally deleted it in the editor and the issue was browser cache. Do you think? I was surprised that this would show in preview as I had logged in and out several times.

  0
• 

  K C George

  • November 08, 2022 11:05

  Hi Ray,

  Yes; it's possible that you deleted it by mistake in the editor. If you reload the page after deletion, it ought to be gone from preview as well. Not sure why it was visible in preview.

  0
• 

  Ray H

  • November 09, 2022 20:20
  • Edited

  Hello Again KC George

  It works but with one small issue. There are gaps left and right of the bottom menu bar. It looks fine in the editor. I have removed all paddings and margins.

  

   

  0
• 

  K C George

  • November 10, 2022 10:14
  • Edited

  Hi Ray,

  To remove the gaps on both left and right, please try adding a negative left and right margins to the Row which has the three icons.

   

  0
• 

  Ray H

  • November 10, 2022 12:11
  • Edited

  I can't get this to align correctly, negative margins did not work.

  Also I can't get the global setting to work, see image, I get a spinning circle and do not get any options for pages. Is there an issue with this element.

  Also why do I need to use accordion, are there other options, just curious?

  

  0
• 

  K C George

  • November 10, 2022 12:16
  • Edited

  Hi Ray,

  Ideally we should use a column or a row for this purpose. Unfortunately the column and row elements do not have the fixed position option. Hence I recommended the Accordion element.

  If you would like me to fix the spacing issue with the bottom bar, please invite me as a Team Member to your project. My email: kc.george@brizy.io. Please assign me the 'Manager' role. Once you send me the invitation, please let me know here.

         

  0
• 

  Ray H

  • November 11, 2022 09:20
  • Edited

  OK Kc

  Invite has been sent. This is a test page, I haven't made any negative margins.

  Please use "1st Project TEST" it is located in the "My Personal Projects" folder.

  Also there seems to be a display bug in the library. The accordion mobile menu I saved doesn't show, it shows a greyed out entry. Please check, can you send this to your developers as a bug.

  Thank you

  Ray 

  0
• 

  K C George

  • November 11, 2022 10:09

  Hi Ray,

  The Row element in your footer bar was set at 87% width. I have set it to 100% width on mobile and have added negative left and right margins to the Row. Please check.

  I am sorry; I could not understand the bug you were reporting. What library are you referring to?

  0
• 

  Ray H

  • November 11, 2022 11:04
  • Edited

  Okay it works now can you supply a video so that I can see the setting, thank you.

  The library you can see If you add block and then select saved. See image, go to bottom of saved items to see greyed out item (mobile bottom menu).

  

  Also is it possible to have it fixed on screen. Currently when you scroll/page up to the top the menu disappears.

  0
• 

  K C George

  • November 11, 2022 12:16
  • Edited

  Hi Ray,

  The changes I made are not long enough to make a video. I have set the Row width to 100% and I added the left and right negative margins to the Row.

  I have saved the bottom bar in your Saved blocks now. I have also made it fixed at the bottom of the screen. Please check.

  

   

  1
• 

  Ray H

  • November 27, 2022 20:02

  Thank you KC George you are very helpful.

  0
• 

  Ray H

  • April 04, 2023 20:21

  An issue has arisen recently with this menu. SiteGround Optimizer plugin has a conflict with Brizy.

  I have sent you an email about this.

  I have check on both mobile (not new), They both cannot access the burger menu (3 lines) part of the bar:

  1. Iphone SE 1st Generation
  2. Huawei P8 Lite 2017

   

  0
• 

  Ariel H.

  • April 05, 2023 09:02

  Hi Ray,

  Thank you for contacting us.

  We are already aware of this issue and a fix will be included in the next update.
  We apologize for any inconvenience this may have caused and appreciate your patience as we work to resolve it.
  If you have any further questions or concerns, please let us know.

  Best regards,
  Ariel H.

  0
• 

  K C George

  • April 06, 2023 11:05
  • Edited

  Hi Ray,

  In your WordPress Dashboard under SG Optimizer - Frontend, please disable the option "Minify Javascript Files" and check if that makes a difference. https://jmp.sh/zCgTD3jw

  If this does not help, please deactivate the SG Optimizer plugin. You may need to use an alternate plugin until we are able to roll out a fix.  

  0
• 

  Ray H

  • April 06, 2023 11:43

  Option to Minify Javascript Files has been disabled and this fix worked for now until fix is rolled out.

  Thx for you input

   

  0

Please sign in to leave a comment.