Centring logo and menu in mobile view

  • Resolved carobcn

    (@carobcn)


    7 years, 1 month ago

    Hello,

    I’m having trouble with getting my logo and menu to centre in mobile phones. I’ve tested it on an iPhone 5, iPhone 7 and HOMTOM HT20. I’ve tried adding various bits of code to no avail so far.

    The logo doesn’t centre in any phone, but the menu appears to be in the centre in iPhones but not in the other (larger) phone.

    It may be worth mentioning that I have added code to make the menu sticky on phones, and my web hosts added code to make the logo larger – both into the child theme.

    Any help much appreciated! Thanks

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

Viewing 11 replies - 1 through 11 (of 11 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Do you have a horizontal scroll on those phones? Try swiping to the right – is there a gap on the right?

    Thread Starter carobcn

    (@carobcn)

    I don’t think it scrolls horizontally, but yes you can move the main page around. If swiping left it leaves a gap on the right, where you can see the header image. I hope that makes sense!

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Yes that makes sense. I think this is what is contributing to the lack of centring. Could you re-apply the CSS I recommended here: https://www.ads-software.com/support/topic/create-sticky-collapsable-menu-on-mobile-phone/#post-9618203

    I know you said that had not resolved the issue, but it will help me figure out what’s wrong.

    Thread Starter carobcn

    (@carobcn)

    I just checked and actually I hadn’t removed it, so it is still in place.

    Thanks

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Oh, could you remove this bit on your Child Theme style.css file:

    
.custom-logo-link img,
body.home.title-tagline-hidden.has-header-image .custom-logo-link img,
body.home.title-tagline-hidden.has-header-video .custom-logo-link img {
        max-width: 550px !important;
}
    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Don’t worry about losing your changes, the code I recommended still contains it.

    Thread Starter carobcn

    (@carobcn)

    Done!

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    The horizontal scrolling should now be resolved. Can you check if this has resolved/ affected the centring problems with the menu? If it has resolved it, I can help you then centre the logo.

    Thread Starter carobcn

    (@carobcn)

    Yes, that’s worked! Thanks so much!

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Great. Did you still need help centring the logo? If so the first thing that would really help getting it centred would be to crop the whitespace beside the image itself: https://www.roselandpartners.com/wp-content/uploads/2017/10/cropped-Banner_smallest.png

    So that the logo image has no space around it. You can perhaps keep the space above and below the image, but the important thing is to remove the space from the left and right of the image.

    Thread Starter carobcn

    (@carobcn)

    No, it seems that everything including the logo is now centred! Checked on all phones again. I’m so grateful, thanks very much (again) Andrew!

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Centring logo and menu in mobile view’ is closed to new replies.