Mobile header not responsive

  • Resolved happyfrogtravels

    (@happyfrogtravels)


    1 week, 2 days ago

    Hello,

    I’ve recently made a new website using Kadence theme. While it looks great on the desktop, on the mobile logo is bigger than the screen and the primary menu is out of the screen altogether.

    When I go to customize it, it appears ok, but when I check my website on my mobile phone it looks distorted just like I mentioned.

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hi there!

    Glad you reached out to us.

    I checked your website and the overflow is caused by your wide logo. There are separate options for the Logo Max Width for desktop, tablet, and mobile views.

    Since mobile views are much smaller, it would be great if you can also adjust the logo’s max width for it. Follow these steps to assign a logo max width lower than 400px:

    1. Go to Dashboard > Appearance > Customize > Header.
    2. Click the cog icon beside the Logo header item: https://share.zight.com/6qupOO4q
    3. Click the mobile icon beside the Logo Max Width option name: https://share.zight.com/Z4uBllRP
    4. Set a smaller value: https://share.zight.com/9ZuOee1d

    I hope this helps and let me know if I can assist you further.

    Thread Starter happyfrogtravels

    (@happyfrogtravels)

    Thank you so much!

Viewing 2 replies - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.