Transparent Header and Logo effect for Tablet/Mobile modes

nansen179 replied

3 years ago

Customer Reply

Hi support team -

Thanks for the update.

I've followed through the updated custom CSS and tips to make changes for my website. Currently, they resolved the issues I raised for the ticket - transparent header and its logo image effects can work as what I desired for Desktop/ Tablet/ Mobile responses.

I thought the ticket can get closed. No more question.

Thanks again.

Nansen

PenciDesign Supporter replied

3 years ago

Staff Reply

Hi,

1. In the previous code I've sent:

Find:

border-color: rgba(255, 255, 255, 0.1);

Replace with:

border: none;

2. Add the following CSS code to your site:

@media only screen and (max-width: 767px) {
    .penci-header-trans .penci-header-wrap .sticky-wrapper:not(.is-sticky) #navigation.header-6 #logo .penci-logo-sticky{
        display: none;
    }
    .penci-header-trans .penci-header-wrap .sticky-wrapper:not(.is-sticky) #navigation.header-6 #logo .penci-logo:not(.penci-logo-sticky){
        display: block;
    }
}

3. If you want to apply for the tablet and mobile,

Find all the codes I've sent on this ticket:

max-width: 767px

Replace with:

max-width: 1169px

Regards,
PenciDesign.

nansen179 replied

3 years ago

Customer Reply

Hi support team -

Thanks for the update.

I re-ran this new custom CSS and got a better response on Mobile. Three more things -

(Q1) For Mobile mode, is it possible to remove the line on the bottom of the transparent header as shown below ?

(Q2) For Mobile and Tablet modes, I would like for the transparent header to have a specific logo image and did the setting, but it looks the logo image cannot be enabled by this new custom CSS. Can we make it happen for Mobile and Tablet modes? It should look like the logo image shown on Desktop mode below.

(Q3) For Tablet mode, this new custom CSS looks not workable. Can we make it run the same as Mobile mode ?

Nansen

PenciDesign Supporter replied

3 years ago

Staff Reply

Hi,

Please replace the previous code with this CSS:

@media only screen and (max-width: 767px) {
    .penci-header-trans .penci-header-wrap .sticky-wrapper:not(.is-sticky) #navigation  {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 9999999;
        background: transparent;
        border-color: rgba(255, 255, 255, 0.1);
    }
    .sticky-wrapper:not(.is-sticky) #navigation.header-6 .pcheader-icon > a,
    .sticky-wrapper:not(.is-sticky) #navigation.header-6 .show-search a.close-search,
    .sticky-wrapper:not(.is-sticky) #navigation.header-6 .main-nav-social,
    .sticky-wrapper:not(.is-sticky) #navigation .button-menu-mobile, .show-search a.close-search {
        color: #fff;
        fill: #fff;
    }
}

Regards,
PenciDesign.

nansen179 replied

3 years ago

Customer Reply

Hi support team -

Thanks for the reply and custom CSS.

Unfortunately, that is not exactly the effect (header transparency and header logo) the ticket are looking for on Tablet and Mobile modes.

Taking Desktop mode for example, header background would turn transparent and "transparent" header logo would come up as well on "Desktop" mode when I scroll up to the top of pages. Header background would come back to customised color and "custom" header logo would come up as a result when I scroll down to the rest of pages. Overall, I'm happy with the effect about the transition of transparent/custom header background/logo styles when scroll up to the top and down to the rest of pages.

To make it clear, can we copy the effect to "Tablet" and "Mobile" modes when we scroll up to the top of pages to enable header background to fully transparent and "transparent" header logo, and scroll down to the rest of pages to enable header background to customised color and "custom" header logo ? So far for "Tablet" and "Mobile" modes, header background stays with customised color and "custom" header logo comes all the time even when I scroll up to the top of pages. That's weird.

Nansen

PenciDesign Supporter replied

3 years ago

Staff Reply

Hi,

Please go to Appearance → Customize → Additional CSS then add the following custom CSS code:

@media only screen and (max-width: 767px) {
    .penci-header-trans .penci-header-wrap #header {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 9999999;
    }
    #navigation {
        background: transparent;
        border-color: rgba(255, 255, 255, 0.1);
    }
    #navigation.header-6 .pcheader-icon > a,
    #navigation.header-6 .show-search a.close-search,
    #navigation.header-6 .main-nav-social,
    #navigation .button-menu-mobile, .show-search a.close-search {
        color: #fff;
        fill: #fff;
    }
}

Regards,
PenciDesign.

nansen179 replied

3 years ago

Customer Reply

Hi support team -

No problem.

My site URL: 179nansen.com

Please have a look at the transparent header and logo image effects on Desktop, Tablet and Mobile modes, respectively.

Nansen

PenciDesign Supporter replied

3 years ago

Staff Reply

Hi,

Please send me your site URL, I'll check and then send you a custom CSS code.

Regards,
PenciDesign.

nansen179 started the conversation

3 years ago

Conversation Start

Hi support team -

I'm using Soledad's template "Software Development" above and looking at its Transparent Header and Logo effect when scrolling down pages. Currently, both transparency and logo effects work well for Desktop mode; however, they seems not work at all for Tablet and Mobile modes.

Please advise what I should do to make both the transparency and logo of Transparent Header take effect for Tablet and Mobile modes when scrolling down the pages. Thanks.

Cheers!

Nansen