Difficulty with menu responsiveness

Jason Berry

• April 06, 2021 17:35

Hi there,

Please see below the trouble I'm having with the responsive mobile menu. Any help you can offer would be great. 

I want the menu to look like it does in the brizy mobile preview.

https://www.screencast.com/t/Q80fu9Wo
https://hskogendesign-312c94.ingress-bonde.easywp.com/

0

• 

  Sandra Prunici

  • April 07, 2021 09:36

  Hi,

  Thank you for the URL and screenshots. After analyzing both of them, I found that you are using many and large margins to the columns and elements. Therefore, you make it look good in the editor mode in certain screen sizes but when you go live and try to check the header in different sizes, it doesn't look in the way you design in the editor mode and it is normal when is using the fixed margins. For example in de desktop mode, I notice you added the margin to the company name to display it in the middle of the header. For the column, you can set the position of the element in the top, middle or bottom position. See here. Therefore, you can use it to correctly position all elements.

  About the menu in the mobile mode - it is the same situation, I described before. Therefore, If you set the menu with the absolute position, I can suggest don't set up negative margins because it is a high risk that on some device screens to have the menu out of the screen in the negative values. Also, in the mobile mode, I noticed that you added some negative and large margin to the other header element (logo, brand name) which isn't recommended because of the same reasons stated before. I can suggest adjusting the column sizes because it is possible to do in mobile mode. 

  Best regards,
  Sandra

  0
• 

  Jason Berry

  • April 07, 2021 16:34

  Thank you for getting back to me. Very much appreciated!

  0
• 

  Sandra Prunici

  • April 08, 2021 08:53

  Happy to help!

  Best regards,
  Sandra

  0

Please sign in to leave a comment.