Enable Sticky Header on Mobile

Home › Forums › Gillion Theme › Enable Sticky Header on Mobile

Home › Forums › Gillion Theme › Enable Sticky Header on Mobile

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    NOT RESOLVED Posts

  • irfanisrael
    Participant

    Hello Shufflehound Support,

     

    how do I enable sticky header on Mobile, how do I change the size of the sticky header on mobile and how do I make sure that the blue line I have in the header transfers to mobile?

     

    Thank you

     

    Vadims

    Shufflehound Support
    Moderator

    Hi Vadims,

     

    I hope you are well today and thank you for your questions.

     

    You can achieve it by adding the following CSS code in the Custom CSS code option of your theme on the below path.

     

    Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code

     

    #header-mobile {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    border-bottom: 2px solid rgb(37, 170, 225) !important;
}

.sh-header-mobile-navigation .header-logo img {
    max-height: 80px;
}

     

    Best regards,
    Shufflehound team

    irfanisrael
    Participant

    Hello,

     

    the following code does not work properly.

     

    1. The header gets actually bigger and overlaps with the content on the website, image attached.

     

    2. The sticky header is not displayed in full width, image attached.

     

    3. When I click on mobile menu while the sticky header is active, I can’t scroll in the menu and only the content that is below the sticky header is scrolling, the sticky header is just a visual thing.

     

    I will keep the code you gave me on the website, so that you can better see these 3 issues.

     

    I hope there is a way to properly make a sticky mobile header.

     

    Thank you

     

    Vadims

    Attachments:
    You must be logged in to view attached files.

    Shufflehound Support
    Moderator

    Solution for this topic

    Please try changing above shared CSS code as following.

     

    #header-mobile {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    border-bottom: 2px solid rgb(37, 170, 225) !important;
width: 100%;
}

.sh-header-mobile-navigation .header-logo img {
    max-height: 80px;
}

@media (max-width: 1025px){
 #page-container {
    margin-top: 125px;
}   
}

     

    Also please note currently the theme doesn’t provide sticky header on mobile but I have created feature request for it so that It will be developed in the future version of theme.

     

    If the above shared code solution doesn’t work for you then you have to wait for theme update to implement it or you can consider hiring a developer to develop it for you. You can hire a developer from any freelance site. Shufflehound recommends the developer https://www.upwork.com/freelancers/~011652ffec8865c6d5

    irfanisrael
    Participant

    Hello,

     

    this worked, but I still can’t scroll when I click on the menu.

     

    And is there a way to make the header size fully responsive (if it’s not already fully responsive), because it’s a lot bigger on smaller screens, but gets smaller with bigger screens, image attached?

     

    Thank you

    Attachments:
    You must be logged in to view attached files.

    Shufflehound Support
    Moderator

    this worked, but I still can’t scroll when I click on the menu.

    Then you have to develop more custom code as described in the previous reply.

     

    And is there a way to make the header size fully responsive (if it’s not already fully responsive), because it’s a lot bigger on smaller screens, but gets smaller with bigger screens, image attached?

    To help us keep support thread separates could you please create new thread for each of your other questions instead of asking them in your single thread as it makes the thread messy and hard to read.

     

    If you want to you can also add reference of this thread in your newly created thread.

     

    We would be more than happy to help you on your new thread.

    Shufflehound Support
    Moderator

    The issue is resolved in the below latest version of the theme so please update the theme as described here https://support.shufflehound.com/updating-theme/

     


    Please login to access this file

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)