Help sought for configuring header for mobiles and tablets

  • Resolved aenea

    (@aenea)


    4 years, 10 months ago

    Hoping for some help in configuring my website’s header for mobile and tablet screens.

    I want the website to look like my ‘live’ site https://sustainability-in-practice.org.uk/ which is still using an old version of the Responsive Theme (v 3.22). But having updated Responsive on my test site https://test.sustainability-in-practice.org.uk/ I am having difficulty getting it to look the way I want.

    After some work (and help from this Forum), I have now got the Test site to look OK on a desktop computer but when I reduce the width of the screen, the header goes wrong.

    I used to use a Header image but, as that feature has been discontinued, I have switched to using a site logo. However the header now no longer scales correctly but opens up a gap top and bottom of the image when the screen width is decreased.
    I guess I’ve got some settings wrong and/or have implemented the image incorrectly. Help with this would be appreciated.

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

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

  • Hi @aenea

    Seems like you have used your own custom CSS for .site-branding-wrapper without media query, you need to add media for the smaller screens and to fix it.

    Also, the menu breakpoint is set to a very small width ( maybe zero ) from customizer please change it too to see the hamburger button in smaller screens.

    to know how to change settings in customizer please check customizer -> documentation

    Thank you

    Thread Starter aenea

    (@aenea)

    Thanks once again. Solution was obvious once you pointed it out. I needed to add the .site-branding-wrapper into the custom CSS to avoid a gap between my header image and the menu. Should have realised that this needed @media modification for smaller screen sizes.

    With regard to the menu, I have decided not to use the mobile menu option.

    Theme Author CyberChimps

    (@cyberchimps)

    @aenea

    Thank you for your reply.

    We are closing this topic as your issue gets resolved.

    Thank you.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Help sought for configuring header for mobiles and tablets’ is closed to new replies.