issue with full width header on mobile

  • Hi Tomas,

    I use the Happenstance v1.1.2 pro. Full width layout. when I am viewing the site on mobile phone, it does not expand horizontally to the full width of the phone screen, leaving a blank margin on the right. When I scroll down a bit, enough for the sticky main menue to reach the top, the page expands to the full width and the problem disappears. Scroll back up to the top again, same issue.

    When viewing on the same phone except holding horizontally, there is no such issue. Desktop, tablets etc all work fine.

    In case if it matters, I have social icons plugin in the header area, but it don’t really think it matters…I played around with them, though did not remove all, but nothing changed.

    Thanks,
    Vahe

Viewing 8 replies - 1 through 8 (of 8 total)
  • Thread Starter icmysite

    (@icmysite)

    By the way, I tried disabling the scroll-up button, didn’t help.

    Really appreciate your help. It’s a bit urgent.
    Thanks!

    Theme Author TT Themes

    (@tomastoman)

    Dear Vahe,

    if possible, please post here a link to your website so I could check it. At first, I recommend you to deactivate all your installed plugins (one after another) as there might be a plugin conflict that causes this issue.

    Best regards,
    Tomas Toman

    Thread Starter icmysite

    (@icmysite)

    Thanks, Tomas.
    Here is the site, work in progress: https://icmysite.com/
    It’s my first one, so I’m a bot new. )

    If I deactivate the plugins, then reactivate, will the settings and values be retained, or will I have to recreate everything?

    Thread Starter icmysite

    (@icmysite)

    And thanks for the super-quick response!

    Theme Author TT Themes

    (@tomastoman)

    Thank you for the link, Vahe. The problem with mobile layout is probably caused by the fact that you haven’t created a custom menu in “Appearance > Menus”. The automatically generated menu contains links to all your pages. Unfortunately, this default menu isn’t converted into a drop-down list on the mobile devices. If there are some sub-menus, they can overflow the page container – this causes the right margin. Please go to “Appearance > Menus”, create there a custom menu and assign it to the Main Header Menu location, it should fix the problem.

    If you deactivate and then reactivate your plugins, all your settings should stay preserved.

    Best regards,
    Tomas Toman

    Thread Starter icmysite

    (@icmysite)

    Easy fix. Thank you!

    Thread Starter icmysite

    (@icmysite)

    So sorry. Could I bother you one last time? How can I make my contact info on the very top to align to the right, not left as it is now?

    Theme Author TT Themes

    (@tomastoman)

    I am glad that I could help you! To align the header contact info to the right, please insert the following custom CSS into “Theme Options > Other Settings > Custom CSS”:

    #wrapper .header-contact {float: right;}
#wrapper .header-contact span {padding-right: 0; padding-left: 12px;}

    Best regards,
    Tomas Toman

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘issue with full width header on mobile’ is closed to new replies.