MOBILE STICKY HEADER

Home Forums Suffice MOBILE STICKY HEADER

This topic contains 5 replies, has 2 voices, and was last updated by  Ashish 6 days, 17 hours ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1385314

    indrabhusanroy
    Participant

    The desktop header is sticky but when viewed in mobile is not sticky. Please help me to make the mobile header sticky. Also I want to remove the loader in mobile where a picture shows up automatically when you click something. I have disabled the loader from customizer but it still shows up in the mobile view.

    Regards
    Indra Bhusan Roy

    #1385482

    Ashish
    Moderator

    Hi Indra,
    Sticky header options for Tablet, Mobile is available on Pro version of the theme only. Also, can you explain what do you mean by picture shows up.. ? Your site URL or screenshot might help me understand.

    Regards,
    ThemeGrill Support Team.

    #1386077

    indrabhusanroy
    Participant

    Hi, I have made the mobile header sticky using this css:
    @media only screen and (min-width: 320px) and (max-width: 520px) {
    .site-header {
    position: fixed!important;
    width: 100%;
    height: 100%;
    z-index:9;

    }
    }
    Now the here in the code if I add z-index then the buttons are not working in mobile view, but If I don’t provide the z-index then the page contents while scrolling down, passes over the header instead of going below the header.
    The buttons code:
    IST BUTTON
    .icon-box .icon-box-readmore {
    font-weight: 500;
    text-transform: uppercase;
    color: #FFF;
    border-bottom: 0px;
    text-decoration: none;
    border-color: #ffa500;
    border-width: 2px;
    border-style: solid;
    font-size: 15px;
    padding-top: 7px;
    padding-bottom: 7px;
    padding-left: 50px;
    padding-right: 50px;
    letter-spacing: 4px;
    background-color: #ffa500;
    position: relative;
    }
    2ND BUTTON
    .so-widget-sow-features-default-4b9c77d2b061 .sow-features-list .sow-features-feature .sow-icon-container [class^=”sow-icon-“], .so-widget-sow-features-default-4b9c77d2b061 .sow-features-list .sow-features-feature .sow-icon-container .sow-icon-image {
    text-decoration: none;
    color: #FFFFFF;
    width: 25px;
    height: 25px;
    position: relative;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    }
    Now changing the button position to absolute from relative does solve the problems partially for the IST BUTTON BUT NOT FOR THE 2ND BUTTON. Please help kindly to solve this problem.

    #1386123

    Ashish
    Moderator

    @indrabhusanroy
    It’s hard for us to provide you a solution from CSS and information you’ve provided. Can you be more specific about your issue with your site link and explain area of the issue? Hope you understand and provide URL and screenshots as I asked before. 🙂 Thanks.

    #1386127

    indrabhusanroy
    Participant

    HERE IS THE LINK: http://hundedinner.com/fasttracker

    IF YOU VIEW IN MOBILE, THE BUTTONS ARE NOT WORKING. BUT IN PC ITS WORKING FINE. IN THE SITE HEADER CODE, I HAVE ADDED Z-INDEX, SO THAT THE PAGE CONTENTS DO NOT MOVE OVER MY SITE HEADER, BUT BY DOING SO THE BUTTONS CANNOT BE CLICKED. SO PLEASE HELP ME TO MAKE BUTTONS CLICKABLE IN MOBILE VIEW WHILE KEEPING THE SITE HEADER STICKY. THANKS.

    #1386423

    Ashish
    Moderator

    @indrabhusanroy
    While checking your site in Mobile device, the button links are working fine in the link provided above. Can you check and confirm? Thanks.

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

You must be logged in to reply to this topic.