Issues with horizontal scroll bar & mobile logo

  • Hi, I’m totally new to coding and have been having a few issues with the website I’m working on. I’ve tried googling, but have had no success so far.

    Issue 1: When viewing the website on a mobile, the top section of the homepage has a horizontal scroll bar with nothing but white space in it. I have tried everything to get rid of it but nothing has worked. However when you scroll down the page a bit, it disappears?

    Issue 2: The same problem as Issue 1, but on this page here: https://whitelotusdesign.co.uk/design-brief/
    Again the problem only seems to appear on the mobile version of the site.

    Issue 3: When viewing on a mobile, the logo in the header changes position as you scroll down. I have a sticky header enabled and as you scroll down, the logo appears on the left side. I’d like it to stay at the left side, when at the top of the page too, instead of being in the middle.

    Any help would be greatly appreciated, I’ve been tearing my hair out for weeks now!!

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

Viewing 4 replies - 1 through 4 (of 4 total)
  • Joey

    (@leglesslizard)

    Hey,

    1. I can’t see this scroll bar you are referencing…was this fixed? If not, is this in a specific browser?

    2. Same as above.

    3. You should just be able to add the following custom css:

    .mobile_menu_active #site-logo {
    font-size: 30px;
    margin: 5px 0 5px;
    padding: 0;
}

    Regards,
    Joey

    Thread Starter nicolef1208

    (@nicolef1208)

    Hey, thanks for replying!

    I still seem to be having the scroll bar issue, I’m just using Samsung Internet on my phone. I have checked on different mobiles and they also show this horizontal scroll but only on https://whitelotusdesign.co.uk/design-brief/

    I added the custom css but nothing has changed. The logo is in the same position ??

    Joey

    (@leglesslizard)

    Hey,

    Apologies, I just realised I copied you the wrong css…it’s getting late here.
    You may need to add an additional line if you want to ensure the site logo stays central on all screen sizes all the time:

    .mobile_menu_active #site-logo {
    margin: 5px auto;
    text-align: center;
}

    If you have any caching please try clearing it after adding the custom css to ensure it is displayed (hard refresh of the browser may also be needed).

    With regards to the horizontal scroll I really can’t say. If you can view it within chrome/firefox (each have options for testing mobile views) you can right click and inspect the element. If you can find the element you can add css to hide it but I can’t help with that currently as I can’t see it…sorry!

    Regards,
    Joey

    Thread Starter nicolef1208

    (@nicolef1208)

    I’ve just noticed the horizontal scroll bar appears at the top of all the separate pages (home page, design brief and terms & conditions), and it seems to have something to do with the header. As you scroll down and the sticky header appears, the horizontal scroll bar disappears.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Issues with horizontal scroll bar & mobile logo’ is closed to new replies.