Do not have header appear on scroll for desktop view only 7.1

Site URL: https://madhattersnyc.com/

Hi,

My header reappears when scrolling up on a page, which is not a problem on mobile because the header is an appropriate size. But on desktop, the header takes up almost the entire page and only leaves a few rows of text or part of an image visible. I know it's supposed to disappear when you stop, but it sometimes sticks. I'm wondering if it might be a better user experience to make the header NOT appear when scrolling? Is this possible on just the desktop view? Attaching images for reference.

TIA!

Try this in custom css pls

@media only screen and (max-width: 768px) {
        header.shrink {
          transform: translateY(-100%) !important;
        }
}

Hi @bangank36

That didn't appear to work. Screenshot attached -

4 minutes ago, mhnyc said:

Hi @bangank36

That didn't appear to work. Screenshot attached -

My bad, it should be min-width instead of max-width, could you make the chabge yourself?

That worked! TYSM @bangank36!

28 minutes ago, mhnyc said:

That worked! TYSM @bangank36!

you rock!

@mhnyc I see the footer on tablet doesn't look good (email break)

You can add this to Design > Custom CSS to increase contact us column width
 

/* Footer tablet */
@media screen and (max-width:991px) and (min-width:768px) {
div#page-section-5f2f45a13102f37ed8d4cd34 .span-12 .span-7 .span-5 {
    width: 80%;
}
div#page-section-5f2f45a13102f37ed8d4cd34 .span-12 .span-7 .span-2 {
    width: 20%;
}
footer.sections .content {
    width: 95% !Important;
}
}

2. Mobile blog has very long content. You should consider adding a back to top button.

3. Post pagination title on mobile looks huge, overlap.

You can remove them, add Prev/Next by this CSS

/* Pagination title */
@media screen and (max-width:767px) {
h2.item-pagination-title {
    display: none;
}
.item-pagination-prev-next {
    display: block !important;
}
}

Thank you so much, @tuanphan! Really great feedback 🙂