Header looks different on mobile device

James Wan

• January 24, 2022 05:08

I created a typical menu header. It looks fine in desktop

https://www.brizy.cloud/projects/8049419/editor/page/561245

 

but on a mobile device, like a phone, it puts the menu items below the logo line, and the hamburger below the menu items. Why?

0

• 

  Denis B

  • January 28, 2022 10:53
  • Edited

  Hi James,

  Sorry for for such delay.

  Team is checking your project. We'll reply you with an update asap.

  Regards,
  Denis.

  0
• 

  James Wan

  • January 28, 2022 20:59

  Thank you. Hope you can resolve soon.

  0
• 

  Denis B

  • January 31, 2022 15:58

  Hi James,

  Sorry for late reply, support is limited on weekends.

  We checked your website and I see that you have 3 columns in header (logo and two menus) and they are displayed in mobile view in same order according to responsive rules. Do you expect them to be displayed in 3 columns in mobile view as well? Please, provide more details to your question.

  Best regards,
  Denis.

  0
• 

  James Wan

  • January 31, 2022 22:05

  Hi Denis,

   

  In a desktop browser like Chrome, the way the header is displayed is correct. The logo, "Home", "Blog" buttons and hamburger are displayed in the same row.

   

  But on a mobile device's browser, the logo displays on one row and is centre justified, the "Home", "Blog" buttons display on another row and is right justified, and the hamburger icon is displayed on another row below and is centre justified.

   

  0
• 

  Denis B

  • February 03, 2022 15:05

  Hi James,

  Sorry for late reply.

  If you mean that problem is in aligning everything to the centre, please, switch to mobile view and change alignment (View screenshot) for the menu (not hamburger menu).

  Let me know if you will have any other questions.

  Best regards,
  Denis.

  0

Please sign in to leave a comment.