Header/Menu disappearing on Mobile devices

Home Forums Talon Header/Menu disappearing on Mobile devices

This topic contains 9 replies, has 2 voices, and was last updated by  Roman 4 days, 7 hours ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1050289

    Tommyr23
    Participant

    Hi,

    I’ve searched through the forum already and found similar issues however I have yet to find a solution to my problem.

    My site:

    http://www.nomads4good.com

    The menu/header are fine when using a desktop however it completely disappears when using a mobile device. Any help would be greatly appreciated!

    Many thanks,

    Tom

    #1052451

    Roman
    Moderator

    Hello Tom,

    Can you please provide some explanatory screenshots?

    You can upload screenshots to your WordPress Media Library and share a link, or you can use one of the online services (Google Drive, Dropbox, etc.).

    Kind Regards, Roman.

    #1052493

    Tommyr23
    Participant

    HI Roman,

    Thanks for the reply.

    So the sticky header/menu works fine on a desktop, but disappears when you scroll down on a tablet or mobile device.

    Please see pics:

    http://www.nomads4good.com/wp-content/uploads/2017/09/FullSizeRender.jpg
    Can see header/menu circled in pink
    http://www.nomads4good.com/wp-content/uploads/2017/09/FullSizeRender-2.jpg
    Header/menu has now disappeared when scrolling

    Thanks,

    Tom

    • This reply was modified 6 days, 16 hours ago by  Tommyr23.
    #1053327

    Roman
    Moderator

    Hello Tom,

    You can try to use the following CSS code.

    You can add CSS code in Dashboard → Appearance → Customize → Additional CSS.

    .header-sticky {
        position: fixed;
        top: 0;
        z-index: 9999;
        width: 100%;
    }

    Please feel free to ask any other questions that you might have.

    Kind Regards, Roman.

    #1053597

    Tommyr23
    Participant

    Hi Roman,

    Many thanks for the help. The CSS works however it cuts off the top of the slider image. Please see pictures below:

    Before using your CSS code:
    http://www.nomads4good.com/wp-content/uploads/2017/09/IMG_3720.png
    After using code, can see that the top part of the slider image and text are cut off/behind the menu:
    http://www.nomads4good.com/wp-content/uploads/2017/09/FullSizeRender-3.jpg

    Would be great if you knew how to rectify this.

    Cheers!

    Tom

    #1055324

    Roman
    Moderator

    Hello Tom,

    Can you please enable the code that I mentioned above and leave here a note?

    Kind Regards, Roman.

    #1056009

    Tommyr23
    Participant

    Hi Roman,

    OK, have added the code.

    Look forward to hearing from you soon.

    Kind regards,

    Tom

    #1056096

    Roman
    Moderator

    Hello Tom,

    Okay, I checked your website once again and that CSS workaround doesn’t seem to work well.

    It looks like it’s better to find out why the theme doesn’t work as expected by default so please remove that code and leave here a note once again.

    Kind Regards, Roman.

    #1056108

    Tommyr23
    Participant

    ok, CSS removed.

    #1057071

    Roman
    Moderator

    Tom, just for your information, header is not sticky on mobile devices by default, the theme was designed in this way.

    You can try to use the following CSS code instead of previous if you still want to make it sticky on mobile devices.

    @media (max-width: 1024px) {
        .header-sticky {
            position: fixed;
            top: 0;
            z-index: 9999;
            width: 100%;
        }
    
        #content {
            margin-top: 129px !important;
        }
    }

    Kind Regards, Roman.

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.