Resize sticky header on scroll (Mobile)

Home Forums All Other Themes Resize sticky header on scroll (Mobile)

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #163466
    Andrei Ursu
    Participant
    • Topics: 3
    • Replies: 5
    • Total: 8
    Member since: September 9, 2020

    Hello!
    Is there a way to resize the header on the mobile version of the website on scrolling? Like make it two times smaller so it’s still there but does not take that much space.
    Also, it would be a bonus for that code to make the header sticky in the first place. (There is separate plugin for that so that’s not necessarily a must).

    I am using the SKT Cafe theme. My website si capsulecafea dot net.
    At this moment the sticky header plugin is deactivated. I will try it alongside the smaller header on scroll code from you and come back with feedback.
    Thank you!

    #163589
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 25494
    • Total: 25494
    Member since: August 16, 2013

    Hi,

    Sticky header plugin is deactivated. Therefore we are unable to check the issue.

    Kindly activate the sticky header plugin.

    Regards,
    Dave

    #163628
    Andrei Ursu
    Participant
    • Topics: 3
    • Replies: 5
    • Total: 8
    Member since: September 9, 2020

    Hello,

    I have activated the sticky header. I want the header to get 80% smaller on scrolling, so it does not take up as much space as it does in full size. The website logo can get smaller so the coffe beans bg image will get significantly smaller in height. Is there a way to make this happen? Thank you.

    #163701
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 25494
    • Total: 25494
    Member since: August 16, 2013

    Hi,

    Kindly go to Appearance >> Theme Options >> Basic Settings >> Custom CSS Box:

    Add this code there:

    .header.sticky-element-cloned.element-is-sticky .logo {
        padding-top: 5px;
        padding-bottom: 10px;
    }
    .header.sticky-element-cloned.element-is-sticky .sitenav {
        padding-top: 10px;
    }
    .header.sticky-element-cloned.element-is-sticky .sitenav ul li a {
        padding-bottom: 10px;
    }

    Regards,
    Dave

    #163723
    Andrei Ursu
    Participant
    • Topics: 3
    • Replies: 5
    • Total: 8
    Member since: September 9, 2020

    Wow..amazing!
    There is a small issue when tapping the MENU button while I am scrolled. It won’t open the MENU but it will get me to the top of the page. If I tap MENU while on the top of the page, the menu opens. Is there any fix for this? Other than that it`s perfect!
    Thank you!

    #163831
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 25494
    • Total: 25494
    Member since: August 16, 2013

    Hi,

    We checked, the MENU button is working while scrolling. Opening the menu when it clicked.

    Regards,
    Dave

    #163850
    Andrei Ursu
    Participant
    • Topics: 3
    • Replies: 5
    • Total: 8
    Member since: September 9, 2020

    Hello,

    The problem is on the mobile version.. can you please check on mobile? thank you

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.